PDA

Volledige versie bekijken : Drie achtergronden voor mijn HTML, via CSS ?

tijmen_4real
%Europe/Berlin %106 %2008, 03:33
Hoi !

Voorafgaand aan deze post was een aantal malen zoeken via Google. Het kan best zijn dat ik niet op de goede woorden gezocht heb, mijn excuses hiervoor....

Ik wil graag in mijn HTML via CSS 3 verschillende achtergronden definiëren. Hiervoor wil ik een HTML die in de breedte is verdeeld over 3 vlakken (25%,50%,25%)
Deze wil ik in de lengte (hoogte) alledrie een andere kleur geven.

Kan dat via CSS ? Zo ja, hoe doe ik dat ??
En kan ik dan bovenop deze vlakken (achtergronden) nog andere elementen plaatsen ???
Greetz,

tijmen_4real 8D
digitalecartoons
%Europe/Berlin %383 %2008, 10:11
Je bedoelt iets als dit? (weet niet of het css3 is, maar het doet waarnaar je zocht denk ik)

<html>
<head>
<style type="text/css">
.links {
position: absolute;
top: 0;
left: 0%;
width: 25%;
height: 100%;
background-color:#0099FF;
}
.midden {
position: absolute;
top: 0;
left: 25%;
width: 50%;
height: 100%;
background-color:#33CC66;
}
.rechts {
position: absolute;
top: 00px;
left: 75%;
width: 25%;
height: 100%;
background-color:#CC3333;
}
</style>
</head>
<body>
<div class="links">Dit is de eerste kolom: 25%.</div>
<div class="midden">Dit is de tweede kolom: 50%.</div>
<div class="rechts">Dit is de derde kolom: 25%.</div>
</body>
</html>
tijmen_4real
%Europe/Berlin %453 %2008, 11:52
Thanks, ik ga het ook nog even uitproberen. Maar kan ik dan ook nog andere elementen, zoals tekst, bovenop zo'n kolom plaatsen ?
digitalecartoons
%Europe/Berlin %598 %2008, 15:22
Hij bestaat nu uit drie divs met ieder zijn eigen tekst:
<div class="links">Dit is de eerste kolom: 25%.</div>
<div class="midden">Dit is de tweede kolom: 50%.</div>
<div class="rechts">Dit is de derde kolom: 25%.</div>

Die kan ieder afzonderlijk dus gevuld worden met z'n eigen tekst/afbeeldingen door b.v. het stuk tekst tussen <div class="midden">.....</div> te vullen met nieuwe content.

Of bedoelde je dat je deze drie kolommen slechts als achtergrond wilt en daarboven over de drie kolommen verdeeld de normale tekst/afbeeldingen? Ook dat kan door b.v. een aparte <div class="content">...</div> 'absolute' te positioneren vanuit 0/0. Dan valt die 'content' div over de drie achtergrond divs heen.
Bargok
%Europe/Berlin %702 %2008, 17:51
De half uitgewerkte non-standaard met de naam css3 word niet tot nergens volledig ondersteunt. Zelfs niet in toekomstige versie van IE is de ondersteuning nog niet compleet, en ook in andere browsers zijn er grote gaten. css2 dus gewoon...wat dit overigens ook is :).
tijmen_4real
%Europe/Berlin %457 %2008, 11:59
Ok, even een stap verder: hoe kan ik er nu voor zorgen dat de middelste kolom (gecentreerd) altijd 700 pixels is, en de andere twee de rest van het scherm, maar dan wel per kolom 50% van die rest ? Want dat kan dus verschillen per resolutie....
digitalecartoons
%Europe/Berlin %350 %2008, 09:24
Mocht je een andere breedte voor de middelste kolom willen: je moet dan de diverse +/- 350 waarden wijzigen in de helft van die nieuwe breedte. Als je kolom dus b.v. 500 px is dan moet je overal +/- 250 invullen.

<html>
<head>
<title>Drie kolommen CSS - middelste kolom 700 px</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-family:verdana;
}
#links {
width:50%;
float:left;
margin-right:-350px;
}
#linkscontainer{
margin-right:350px;
background:red;
}
#midden {
width:700px;
float:left;
background:yellow;
}
#rechts {
width:50%;
float:right;
margin-left:-350px;
}
#rechtscontainer {
margin-left:350px;
background:green;
}
</style>
</head>
<body>
<div id="links">
<div id="linkscontainer">Dit is de eerste kolom. Dit is de eerste kolom. Dit is de eerste kolom. Dit is de eerste kolom. Dit is de eerste kolom. Dit is de eerste kolom. Dit is de eerste kolom. Dit is de eerste kolom. Dit is de eerste kolom. </div>
</div>
<div id="midden">Dit is de tweede kolom met een vaste breedte van 700 px. </div>
<div id="rechts">
<div id="rechtscontainer">Dit is de derde kolom. Dit is de derde kolom. Dit is de derde kolom. Dit is de derde kolom. Dit is de derde kolom. Dit is de derde kolom. Dit is de derde kolom. Dit is de derde kolom. Dit is de derde kolom. </div>
</div>
</body>
</html>
Lorrens
%Europe/Berlin %473 %2008, 12:22
Ik maak dan altijd een plaatje van een paar duizend pixels breed, met in het midden een kolom van 700px breed en deze centreer ik dan.. dan werkt ie ook prima :)
tijmen_4real
%Europe/Berlin %661 %2008, 16:52
Bedankt voor de reacties ! Het is nu qua width zoals ik het wil hebben, alleen qua hoogte nog niet. Ook niet als ik height:100%; aangeef bij de stijlen van links, midden en rechts is het nog niet meer dan 1 regel.

<style type="text/css">
*{ margin:0; padding:0; font-family:verdana; }
#links { width:50%; height:100%; float:left; margin-right:-350px; }
#linkscontainer{ margin-right:350px; background:red; }
#midden { width:700px; height:100%; float:left; background:yellow; }
#rechts { width:50%; float:right; margin-left:-350px; }
#rechtscontainer { margin-left:350px; height:100%; background:green; } </style>Hoe krijg ik deze over de gehele hoogte van het scherm, zoals in voorgaand voorbeeld ?
digitalecartoons
%Europe/Berlin %867 %2008, 21:49
<html>
<head>
<title>css 3 kolommen layout</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#leftColumn {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color: red;
z-index: 1;
}
#rightColumn {
position: absolute;
top: 0px;
right: 0px;
width: 50%;
height: 100%;
background-color: cyan;
z-index: 1;
}
#middleColumn {
width: 700px;
height: 100%;
position: absolute;
left: 50%;
margin-left: -350px;
background: yellow;
z-index: 2;
}
#leftColumnContent {
margin-right: 350px;
}
#rightColumnContent {
margin-left: 350px;
}

</style>
</head>
<body>
<div id="leftColumn">
<div id="leftColumnContent">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer rutrum ipsum et lacus. Pellentesque at velit. Cras nunc pede, egestas pharetra, mattis imperdiet, volutpat id, urna. Aenean adipiscing, sem ut posuere dictum, augue mi placerat lacus, id facilisis sapien lectus sit amet tellus. Nulla varius mauris vel ipsum. In sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam rutrum luctus mauris. Donec consectetuer vulputate nibh. Aenean elit erat, condimentum ac, varius ac, ornare sit amet, velit. In metus magna, cursus iaculis, mattis eget, mollis eget, erat. Donec velit. Cras pede arcu, aliquam vitae, laoreet vitae, luctus eget, purus.</div>
</div>
<div id="middleColumn">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean porttitor orci ut odio. In pretium laoreet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus laoreet, dui vel commodo sollicitudin, dolor lacus dapibus tellus, sed ultrices pede quam dapibus metus. In placerat tortor. Nunc accumsan. Nunc eu ligula. Vestibulum tempus justo sed eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vitae justo. Duis orci. Ut a nisi. Sed blandit, lorem in ornare condimentum, libero metus tincidunt lacus, eu consectetuer dolor ligula ut tellus. Integer ac erat.</div>
<div id="rightColumn">
<div id="rightColumnContent">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent nibh. Nam sapien nulla, tristique vel, commodo eu, molestie nec, turpis. In vitae lacus vel lorem bibendum commodo. Cras nec sem. Suspendisse eleifend, enim malesuada bibendum varius, justo nunc lacinia ante, id pretium felis augue eget libero. Suspendisse suscipit tempus nunc. Phasellus odio. Nunc molestie aliquet purus. Cras mi nibh, molestie in, porttitor ac, tincidunt vitae, mauris. Morbi pretium. Sed nec ipsum nec lorem interdum rhoncus. Sed vitae justo ac arcu laoreet consequat. Vestibulum mauris justo, pretium ac, porttitor ac, volutpat sit amet, turpis. Nullam quis orci et arcu semper hendrerit. Pellentesque laoreet est eu neque. Mauris dapibus, lacus sed eleifend consequat, arcu sapien venenatis lacus, eu pretium enim quam sit amet ligula.</div>
</div>
</body>
</html>
tijmen_4real
%Europe/Berlin %253 %2008, 07:05
Juist, zoiets bedoelde ik. Bedankt tot zover, ik ga weer eens aan de slag!