Tutorials
CSS tut - Deel 3
Een liquid lay-out met CSS
Pagina 1
Liquid lay-out
Deze CSS tut gaat over het maken van een lay-out. We gaan geen volledige lay-out maken, maar een opzet met een header-, een sidebar- en een contentdeel.
De header heeft een vaste hoogte en dezelfde breedte als de viewport (het browservenster). De minimale breedte wordt 700 pixels, zodat de pagina niet in elkaar gedrukt wordt als het venster heel smal is. De sidebar staat aan de linkerkant en heeft een vaste breedte. De hoogte hangt van de inhoud af. De content staat aan de rechterkant en heeft een variabele breedte. Dit type lay-out heet "liquid".
Vooruit met de geit!
De header heeft een vaste hoogte en dezelfde breedte als de viewport (het browservenster). De minimale breedte wordt 700 pixels, zodat de pagina niet in elkaar gedrukt wordt als het venster heel smal is. De sidebar staat aan de linkerkant en heeft een vaste breedte. De hoogte hangt van de inhoud af. De content staat aan de rechterkant en heeft een variabele breedte. Dit type lay-out heet "liquid".
Vooruit met de geit!
Pagina 2
De header
We beginnen met de CSS voor de header
CSS:
#header {
height: 100px;
background: #fff;
min-width: 700px;
}
HTML:
<div id="header">
<h1>CSS tut deel 3</h1>
</div>
Het eerste probleem waar we tegenaan lopen, is dat IE de eigenschap min-width niet ondersteunt. Dit lossen we simpel op: we geven de <h1> in de header een breedte van 700px als we met IE te maken hebben:
<!--[if IE]>
<style>
#header h1 { width: 700px; }
</style>
<![endif]-->
Deze methode heet "Conditional Comments". Zie ook CSS tut 1.
Nu hebben we een header van 100px hoog met een minimale breedte van 700px in alle browsers.
CSS:
#header {
height: 100px;
background: #fff;
min-width: 700px;
}
HTML:
<div id="header">
<h1>CSS tut deel 3</h1>
</div>
Het eerste probleem waar we tegenaan lopen, is dat IE de eigenschap min-width niet ondersteunt. Dit lossen we simpel op: we geven de <h1> in de header een breedte van 700px als we met IE te maken hebben:
<!--[if IE]>
<style>
#header h1 { width: 700px; }
</style>
<![endif]-->
Deze methode heet "Conditional Comments". Zie ook CSS tut 1.
Nu hebben we een header van 100px hoog met een minimale breedte van 700px in alle browsers.
Pagina 3
Sidebar en Content
Onder de header plaatsen we nu twee nieuwe divs, #sidebar en #content:
<div id="sidebar">
<h2>Sidebar Alinea 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut velit quam, volutpat sit amet, mollis at, auctor eu, nibh. Vestibulum tempor, pede vel scelerisque consequat, erat mauris blandit nisl, sed pretium sapien purus dignissim mauris. Donec molestie sagittis turpis. Donec fringilla neque quis enim.</p>
<h2>Sidebar Alinea 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut velit quam, volutpat sit amet, mollis at, auctor eu, nibh. Vestibulum tempor, pede vel scelerisque consequat, erat mauris blandit nisl, sed pretium sapien purus dignissim mauris. Donec molestie sagittis turpis. Donec fringilla neque quis enim.</p>
</div>
<div id="content">
<h2>content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut velit quam, volutpat sit amet, mollis at, auctor eu, nibh. Vestibulum tempor, pede vel scelerisque consequat, erat mauris blandit nisl, sed pretium sapien purus dignissim mauris. Donec molestie sagittis turpis. Donec fringilla neque quis enim.
Nullam pharetra. Nunc a erat. Morbi sollicitudin felis et urna. Phasellus malesuada convallis est. Quisque dui velit, ultricies nec, scelerisque nec, tincidunt non, nulla. Duis dolor est, ultrices ac, bibendum non, adipiscing a, nisl. Nam dui justo, laoreet non, scelerisque ac, accumsan non, purus. Fusce rutrum pretium elit. Integer gravida. Cras tempor. Sed fringilla nunc vel nibh. Ut porta, orci eu fringilla iaculis, diam nisl pharetra est, ut bibendum augue orci vel mauris. Quisque tempor uscipit diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut velit quam, volutpat sit amet, mollis at, auctor eu, nibh. Vestibulum tempor, pede vel scelerisque consequat, erat mauris blandit nisl, sed pretium sapien purus dignissim mauris. Donec molestie sagittis turpis. Donec fringilla neque quis enim.
Nullam pharetra. Nunc a erat. Morbi sollicitudin felis et urna. Phasellus malesuada convallis est. Quisque dui velit, ultricies nec, scelerisque nec, tincidunt non, nulla. Duis dolor est, ultrices ac, bibendum non, adipiscing a, nisl. Nam dui justo, laoreet non, scelerisque ac, accumsan non, purus. Fusce rutrum pretium elit. Integer gravida. Cras tempor. Sed fringilla nunc vel nibh. Ut porta, orci eu fringilla iaculis, diam nisl pharetra est, ut bibendum augue orci vel mauris. Quisque tempor uscipit diam.</p>
</div>
Ik ontwerp zelf graag met wat vultekst, "lorem ipsum", te verkrijgen via www.lipsum.com
Dan krijg je al een beetje een idee hoe de lay-out er uit komt te zien als er echte tekst in staat.
<div id="sidebar">
<h2>Sidebar Alinea 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut velit quam, volutpat sit amet, mollis at, auctor eu, nibh. Vestibulum tempor, pede vel scelerisque consequat, erat mauris blandit nisl, sed pretium sapien purus dignissim mauris. Donec molestie sagittis turpis. Donec fringilla neque quis enim.</p>
<h2>Sidebar Alinea 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut velit quam, volutpat sit amet, mollis at, auctor eu, nibh. Vestibulum tempor, pede vel scelerisque consequat, erat mauris blandit nisl, sed pretium sapien purus dignissim mauris. Donec molestie sagittis turpis. Donec fringilla neque quis enim.</p>
</div>
<div id="content">
<h2>content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut velit quam, volutpat sit amet, mollis at, auctor eu, nibh. Vestibulum tempor, pede vel scelerisque consequat, erat mauris blandit nisl, sed pretium sapien purus dignissim mauris. Donec molestie sagittis turpis. Donec fringilla neque quis enim.
Nullam pharetra. Nunc a erat. Morbi sollicitudin felis et urna. Phasellus malesuada convallis est. Quisque dui velit, ultricies nec, scelerisque nec, tincidunt non, nulla. Duis dolor est, ultrices ac, bibendum non, adipiscing a, nisl. Nam dui justo, laoreet non, scelerisque ac, accumsan non, purus. Fusce rutrum pretium elit. Integer gravida. Cras tempor. Sed fringilla nunc vel nibh. Ut porta, orci eu fringilla iaculis, diam nisl pharetra est, ut bibendum augue orci vel mauris. Quisque tempor uscipit diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut velit quam, volutpat sit amet, mollis at, auctor eu, nibh. Vestibulum tempor, pede vel scelerisque consequat, erat mauris blandit nisl, sed pretium sapien purus dignissim mauris. Donec molestie sagittis turpis. Donec fringilla neque quis enim.
Nullam pharetra. Nunc a erat. Morbi sollicitudin felis et urna. Phasellus malesuada convallis est. Quisque dui velit, ultricies nec, scelerisque nec, tincidunt non, nulla. Duis dolor est, ultrices ac, bibendum non, adipiscing a, nisl. Nam dui justo, laoreet non, scelerisque ac, accumsan non, purus. Fusce rutrum pretium elit. Integer gravida. Cras tempor. Sed fringilla nunc vel nibh. Ut porta, orci eu fringilla iaculis, diam nisl pharetra est, ut bibendum augue orci vel mauris. Quisque tempor uscipit diam.</p>
</div>
Ik ontwerp zelf graag met wat vultekst, "lorem ipsum", te verkrijgen via www.lipsum.com
Dan krijg je al een beetje een idee hoe de lay-out er uit komt te zien als er echte tekst in staat.
Pagina 4
Floating the sidebar
Nu moeten we de #sidebar div naar links zien te krijgen. Dat doen we met een float. Om te begrijpen wat een float precies doet, moeten we even een zijsprongetje maken.
Stel dat je een <p> hebt met wat tekst erin en een plaatje. Vaak wil je dat de tekst om het plaatje heen loopt, bijvoorbeeld rechts of links. Dit is nu precies wat je met een float kunt doen.
Als je dit doet:
CSS
img {
float: left;
}
Dan zal het plaatje aan de linkerkant van de <p> kleven en de tekst loopt er keurig rechts omheen.
Nu hebben floats een eigenschap die je goed moet snappen wil je er lekker mee kunnen werken. Als je <p> niet veel tekst heeft en het plaatje is hoger dan je alinea, dan "breekt" het plaatje aan de onderkant door de border heen. Zie voorbeeld 1
Waarom is dit gedaan? Stel dat je een aantal korte alinea's hebt en het plaatje staat in de eerste. Dan zou het er nogal raar uitzien als de tweede alinea onder het plaatje begon. Zie voorbeeld 2
De andere korte alinea's moeten natuurlijk ook langs het plaatje lopen! Vandaar dat een float het element waar hij in zit niet oprekt. Hij breekt door de onderste border heen, zodat ook andere alinea's er keurig langs lopen. Zie voorbeeld 3
In de lay-out die we deze keer maken, levert dit geen problemen op, omdat de #sidebar zich niet in een andere div bevindt. Maar zodra je pagina iets ingewikkelder wordt, komt het vaak voor dat je een div met een float in een andere div moet stoppen. En dan wil je dat de buitenste div mee rekt met de hoogte van de float-div. Er zijn een aantal manieren om dit te bewerkstelligen.
Daarover misschien meer in een volgende tut die een ingewikkelder lay-out behandelt.
We geven onze #sidebar dus een float: left en een paar andere eigenschappen:
#sidebar {
float: left;
padding: 9px;
width: 200px;
border-right: 2px solid #fff;
}
De padding is de afstand van de inhoud van de div tot de randen van de div. 9px geeft een aardige ruimte. De breedte staat op 200. De padding moet je optellen bij de breedte. Dat geeft 200 + 9 + 9 = 218 pixels. Met border-right zetten we een 2 pixels brede witte border aan de rechterkant. Die moet je ook bij de breedte optellen, dus dat geeft een breedte van 220 pixels.
N.B. Padding en borders moet je bij de breedte optellen!
Als je in IE géén doctype opgeeft, dan blijft de totale breedte onveranderd. Ik dwing IE altijd in de strict mode. Dan behandelt in ieder geval IE6 het boxmodel correct. Er zijn ook boxmodel "hacks" voor IE of andere trucs. Lees meer...
Voor HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">;
Of voor XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
Stel dat je een <p> hebt met wat tekst erin en een plaatje. Vaak wil je dat de tekst om het plaatje heen loopt, bijvoorbeeld rechts of links. Dit is nu precies wat je met een float kunt doen.
Als je dit doet:
CSS
img {
float: left;
}
Dan zal het plaatje aan de linkerkant van de <p> kleven en de tekst loopt er keurig rechts omheen.
Nu hebben floats een eigenschap die je goed moet snappen wil je er lekker mee kunnen werken. Als je <p> niet veel tekst heeft en het plaatje is hoger dan je alinea, dan "breekt" het plaatje aan de onderkant door de border heen. Zie voorbeeld 1
Waarom is dit gedaan? Stel dat je een aantal korte alinea's hebt en het plaatje staat in de eerste. Dan zou het er nogal raar uitzien als de tweede alinea onder het plaatje begon. Zie voorbeeld 2
De andere korte alinea's moeten natuurlijk ook langs het plaatje lopen! Vandaar dat een float het element waar hij in zit niet oprekt. Hij breekt door de onderste border heen, zodat ook andere alinea's er keurig langs lopen. Zie voorbeeld 3
In de lay-out die we deze keer maken, levert dit geen problemen op, omdat de #sidebar zich niet in een andere div bevindt. Maar zodra je pagina iets ingewikkelder wordt, komt het vaak voor dat je een div met een float in een andere div moet stoppen. En dan wil je dat de buitenste div mee rekt met de hoogte van de float-div. Er zijn een aantal manieren om dit te bewerkstelligen.
Daarover misschien meer in een volgende tut die een ingewikkelder lay-out behandelt.
We geven onze #sidebar dus een float: left en een paar andere eigenschappen:
#sidebar {
float: left;
padding: 9px;
width: 200px;
border-right: 2px solid #fff;
}
De padding is de afstand van de inhoud van de div tot de randen van de div. 9px geeft een aardige ruimte. De breedte staat op 200. De padding moet je optellen bij de breedte. Dat geeft 200 + 9 + 9 = 218 pixels. Met border-right zetten we een 2 pixels brede witte border aan de rechterkant. Die moet je ook bij de breedte optellen, dus dat geeft een breedte van 220 pixels.
N.B. Padding en borders moet je bij de breedte optellen!
Als je in IE géén doctype opgeeft, dan blijft de totale breedte onveranderd. Ik dwing IE altijd in de strict mode. Dan behandelt in ieder geval IE6 het boxmodel correct. Er zijn ook boxmodel "hacks" voor IE of andere trucs. Lees meer...
Voor HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">;
Of voor XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
Pagina 5
Content
De content geven we een margin aan de linkerkant, zodat hij naast de #sidebar komt te staan.
#content {
margin: 0px 10px 0px 220px;
padding: 9px;
}
Met de breedte doen we helemaal niets, want we willen dat de lay-out liquid is. En standaard heeft een div een breedte van 100%, dus net zo breed als de viewport, wat precies is wat we willen in dit geval. We zorgen dat de #content div een margin van 220 pixels aan de linkerkant heeft, zodat de inhoud aan de rechterkant van de #sidebar verschijnt.
Hieronder de hele CSS met wat extra styles:
<style type="text/css" media="screen">
* {
margin: 0px;
padding: 0px;
}
body {
background: #fe8;
}
h1 {
font: bold 14px arial;
}
h2 {
font: bold 12px arial;
margin-top: 5px;
}
#header {
height: 100px;
min-width: 700px;
}
#sidebar {
float: left;
padding: 9px;
width: 200px;
border-right: 2px solid #fff;
}
#content {
margin: 0px 10px 0px 220px;
padding: 9px;
}
p {
font: 0.6em verdana;
}
</style>
<!--[if IE]>
<style>
#header h1 { width: 700px; }
</style>
<![endif]-->
Voor het uiteindelijke resultaat zie voorbeeld 4
Verander ook de grootte van je venster om te checken dat de lay-out echt liquid is.
#content {
margin: 0px 10px 0px 220px;
padding: 9px;
}
Met de breedte doen we helemaal niets, want we willen dat de lay-out liquid is. En standaard heeft een div een breedte van 100%, dus net zo breed als de viewport, wat precies is wat we willen in dit geval. We zorgen dat de #content div een margin van 220 pixels aan de linkerkant heeft, zodat de inhoud aan de rechterkant van de #sidebar verschijnt.
Hieronder de hele CSS met wat extra styles:
<style type="text/css" media="screen">
* {
margin: 0px;
padding: 0px;
}
body {
background: #fe8;
}
h1 {
font: bold 14px arial;
}
h2 {
font: bold 12px arial;
margin-top: 5px;
}
#header {
height: 100px;
min-width: 700px;
}
#sidebar {
float: left;
padding: 9px;
width: 200px;
border-right: 2px solid #fff;
}
#content {
margin: 0px 10px 0px 220px;
padding: 9px;
}
p {
font: 0.6em verdana;
}
</style>
<!--[if IE]>
<style>
#header h1 { width: 700px; }
</style>
<![endif]-->
Voor het uiteindelijke resultaat zie voorbeeld 4
Verander ook de grootte van je venster om te checken dat de lay-out echt liquid is.
Pagina 6
Crossbrowser CSS
Ik ben bewust begonnen met een redelijk simpele lay-out. Als je al wat langer met CSS bezig bent, is dit waarschijnlijk gesneden koek voor je. Maar als je nog steeds met tabellen ontwerpt, dan wil ik je met deze tut uitdagen om de overstap naar CSS te maken.
Denk je eens in dat je een website met 40 pagina's hebt en dat je opdrachtgever ineens besluit dat hij de #sidebar toch liever aan de rechterkant heeft. Met CSS hoef maar een paar dingen in je CSS bestand aan te passen. Met een tabellen-lay-out kun je al je bestanden stuk voor stuk aan gaan passen.
Tot zover deze tut en happy PHP-ing.
Jan Koehoorn
p.s. Deze tut is getest in IE 6, FF 1.5 en Opera 8.5
Denk je eens in dat je een website met 40 pagina's hebt en dat je opdrachtgever ineens besluit dat hij de #sidebar toch liever aan de rechterkant heeft. Met CSS hoef maar een paar dingen in je CSS bestand aan te passen. Met een tabellen-lay-out kun je al je bestanden stuk voor stuk aan gaan passen.
Tot zover deze tut en happy PHP-ing.
Jan Koehoorn
p.s. Deze tut is getest in IE 6, FF 1.5 en Opera 8.5
Reacties
0