www.computerkit.be/cursus
XHTML en CSS - copyright Kris Merckx 2009
Een webpagina vormgeven met CSS Met CSS kan u bepalen waar elk onderdeel van de webpagina moet staan en hoe elk onderdeel er moet uitzien.
1. Een webpagina opsplitsen in div's Het is belangrijk dat u HTML-elementen onderbrengt in 'verzamelingen'. ● ● ●
Alle links in een verzameling die we navigatie gaan noemen. Alle tekstinhouden en afbeeldingen in een onderdeel dat we inhoud gaan noemen. Een kop of banner die we kop gaan noemen.
Hiervoor moeten we de html-pagina in onderdelen (divisions) opsplitsen. Elk onderdeel (<div></div>) krijgt een uniek id waaraan we de namen gaan toekennen. Bijvoorbeeld: <div id="kop"> <h2>Website</h2> </div> <div id="navigatie"> <ul> <li><a href="contact.html">contact</a></li> <li><a href="winkel.html">winkel</a></li> <li><a href="home.html">home</a></li> </ul> </div> <div id="inhoud"> Hier staat de tekst. </div> Al deze verzamelingen of onderdelen, plaatsen we nu in een globale verzameling die we de naam container geven. <div id="container"> <div id="kop"> <h2>Website</h2> </div> <div id="navigatie"> <ul> <li><a href="contact.html">contact</a></li> <li><a href="winkel.html">winkel</a></li> <li><a href="home.html">home</a></li> </ul> </div> <div id="inhoud"> Hier staat de tekst. </div> </div>
www.computerkit.be/cursus
XHTML en CSS - copyright Kris Merckx 2009
2. De container-div centreren en vormgeven Met CSS kunnen we nu elk onderdeel op zijn plaats zetten. Het heeft geen zin om een CSS-stijl te definiĂŤren voor alles div's, want ze moeten er niet allemaal hetzelfde uitzien. Gelukkig bestaat in de CSS de mogelijkheid om een welbepaald html-element (in ons geval een div) te selecteren. Dat doen we door het #-symbool gevolgd door de id van het element. De container moet centraal staan en een flexibele breedte hebben van 80%. Dit wil zeggen dat de container mee zal uitrekken met de schermresolutie van de bezoeker. #container{ width:80%; background:#cccccc; margin-right:auto; margin-left:auto; } Door margin-right en margin-left op auto te plaatsen, kiest de browser ervoor om de container te centreren en de aan elke kant 10% ruimte te laten. Jammer genoeg werkt dit niet in Internet Explorer. Daarom moeten we browserspecifieke CSS-code gaan schrijven. In Internet Explorer kan je een div enkel centreren door in het <body>-element alle tekst te centreren. body{ text-align:center; } Dit heeft een erg ongewenst gevolg nl. dat alle tekst op de webpagina wordt gecentreerd. We kunnen dit probleem simpel oplossen door in de container de tekst weer links uit te lijnen. #container{ width:80%; background:#cccccc; margin-right:auto; margin-left:auto; text-align:left; } Als we de container tege de 'top' van de webpagina willen aandrukken, moeten we de marge en de padding op 0px zetten. body{ text-align:center; margin:0; padding:0; }
www.computerkit.be/cursus
XHTML en CSS - copyright Kris Merckx 2009
Toch levert dit nog steeds problemen op omdat de andere div's (kop, inhoud, navigatie...) ook nog elk een marge hebben. We kunnen met ĂŠĂŠn instructie duidelijk maken dat de browser alle marges op 0 moet zetten *{ margin: 0; padding: 0; } body{ text-align:center; margin:0; padding:0; }
3. De kop vormgeven We geven de kop een vaste hoogte zodat alle andere div's naar beneden worden verschoven. #kop{ height:150px; } We voegen een achtergrondafbeelding toe aan de kop. De afbeelding moet niet even breed zijn. Let wel op: wanneer je een echte foto kiest, wordt hij herhaald! Daarom kiezen we voor een smalle afbeelding (met een patroon) die perfect mag herhaald worden. #kop{ height:150px; background: url(banner.jpg); } De tekst in de kop staat nog steeds tegen de rand aan geplakt. Door enkel de titel in de kop een padding mee te geven, komt hij op de gewenste plaats terecht: #kop h2{ padding-left:15px; padding-top:20px; }
www.computerkit.be/cursus
XHTML en CSS - copyright Kris Merckx 2009
4. De navigatiebalk In een vorige les hebben we al besproken hoe u een navigatiebalk bouwt op basis van een HTML-lijst met links. We gebruiken gelijkaardige opmaak voor de navigatiebalk van ons CSS-ontwerp: #navigatie ul{ background:url(link.jpg); height:31px; } #navigatie li{ list-style-type:none; float:left; border-right:1px solid #cccccc; } #navigatie a{ line-height:31px; padding-right:15px; padding-left:15px; display:block; text-decoration:none; color:white; font-variant:small-caps; } #navigatie a:hover{ background:url(linkhover.jpg); } Doordat de <div> met id navigatie in de html-code ook onder de <div> kop staat, wordt hij ook daaronder weergegeven door de browser. Vergeet zeker niet de hoogte in te stellen van de <div> navigatie. We kiezen hier voor 31 pixels omdat onze achtergrondafbeelding eveneens 31 pixels hoog is. Elk list-item (li) krijgt aan de rechterkant een rand van 1 pixel breed. Hierdoor krijg je het gevoel dat er echte knoppen ontstaan. Vervolgens stellen we de lijnhoogte (line-height) van elke link in de lijst eveneens op 31 pixels waardoor de tekst van de links ook verticaal gecentreerd wordt. De padding-right en padding-left van elke link zorgt ervoor er links en rechts van de links een spatie van 15 pixels ontstaat. Door de display van de links in te stellen op block is ook de padding aanklikbaar en niet alleen de tekst van de links zoals op heel wat websites het geval is.
www.computerkit.be/cursus
XHTML en CSS - copyright Kris Merckx 2009
5. Het onderdeel 'inhoud' opmaken De optie float:left zorgt ervoor dat een HTML-element steeds links gaat staan in zijn parent (ouder) element. Het parent-element in ons geval is container. De ouder-kind-relatie ziet er eigenlijk als volgt uit: PARENT: body CHILD/PARENT: div container CHILD/PARENT: div kop CHILD: h2 CHILD/PARENT: div navigatie CHILD/PARENT: ul CHILD/PARENT: li CHILD/PARENT: a CHILD/PARENT: li CHILD/PARENT: a CHILD/PARENT: li CHILD/PARENT: a CHILD/PARENT: div inhoud ... enz. Wanneer we het onderdeel <div> met id inhoud instellen op left, gaat het zich links uitlijnen ten opzichte van zijn PARENT-element container. Dit heeft als belangrijkste gevolg dat inhoud ook altijd onder navigatie zal komen te staan. Door de breedte van inhoud in te stellen op 96% komt de tekst nooit tot aan de rand van de container. Ook de padding zorgt ervoor dat de tekst in de afbeeldingen die in de <div> inhoud komen te staan, nooit tegen de rand aan kleven.
www.computerkit.be/cursus
XHTML en CSS - copyright Kris Merckx 2009
De complete code van de HEAD van de HTML-pagina <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Een CSS-layout in XHTML-transitional</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <meta name="author" content="Kris Merckx"/> <meta name="keywords" content="CSS xhtml"/> <meta name="description" content="CSS-layout in XHTML transitional"/> <title></title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <style type="text/css" media="screen"> <!-*{ margin: 0; padding: 0; font-family:arial, helvetica; } body{ padding: 0; margin: 0; background-color: #666; text-align: center; } #container{ width:80%; background:#cccccc; margin-right:auto; margin-left:auto; text-align:left; } #kop{ height:150px; background: url(banner.jpg); } #kop h2{ padding-left:15px; padding-top:20px; } #navigatie ul{ background:url(link.jpg); height:31px; } #navigatie li{ list-style-type:none; float:left; border-right:1px solid #cccccc; } #navigatie a{ line-height:31px; padding-right:15px; padding-left:15px; display:block; text-decoration:none; color:white; font-variant:small-caps; }
www.computerkit.be/cursus
XHTML en CSS - copyright Kris Merckx 2009
#navigatie a:hover{ background:url(linkhover.jpg); } #inhoud{ clear:left; width:96%; padding:20px; } #voet{ text-align:center; padding:2px; height:30px; line-height:30px; font-size:small; clear:both; background:#8798A8; } --> </style> </head>
De complete code van de BODY van de HTML-pagina <body> <div id="container"> <div id="kop"> <h2>Welkom op mijn website</h2> </div> <div id="navigatie"> <ul> <li><a href="contact.html" title="ga naar de contactpagina">contact</a></li> <li><a href="winkel.html" title="Open de winkelpagina">winkel</a></li> <li><a href="home.html" title="Keer terug naar de startpagina">home</a></li> </ul> </div> <div id="inhoud"> <div id="subnavigatie"> <ul> <li><a href="#what" title="Ga naar tekst 1">Tekst 1</a></li> <li><a href="#lorem" title="Ga naar tekst 2">Tekst 2</a></li> <li><a href="#viv" title="Ga naar tekst 3">Tekst 3</a></li> </ul> </div> <h2>What is lorem ipsum?<a name="what"/></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula eros, euismod sed, dignissim eu, porttitor eu, est. Mauris dapibus urna eget nisl. Cras erat lacus, sodales non, rutrum et, sollicitudin sit amet, ipsum. Nam id ipsum eu diam suscipit dapibus. Morbi tincidunt dolor ac mi. Morbi quis dolor nec turpis hendrerit tristique. Morbi ullamcorper euismod augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna sem, fermentum id, tempor eu, gravida eget, mi. Aliquam non augue vitae tortor adipiscing mattis. Nulla dignissim. Nam sed mauris vel lorem dignissim varius. Aenean in dui. Maecenas consequat. Nam nec lectus. </p> <blockquote>Vivamus at magna<a name="viv"/></blockquote> <p> Vivamus at magna. Ut non enim non sapien tristique malesuada. Aliquam urna arcu, facilisis id, blandit nec, lacinia ac, ligula. Nulla fringilla, odio sed varius varius, risus mi vulputate dui, non sodales dui felis sed mauris. Integer pulvinar laoreet odio. Suspendisse nec massa quis nunc lacinia tincidunt. Phasellus justo. Donec vel erat nec felis mattis fringilla. Nulla in nisl. Maecenas mollis elit sed mi pretium mattis. Duis non mi. </p> <img src="afbeelding1.jpg"/>
www.computerkit.be/cursus
XHTML en CSS - copyright Kris Merckx 2009
<p> Vivamus at magna. Ut non enim non sapien tristique malesuada. Aliquam urna arcu, facilisis id, blandit nec, lacinia ac, ligula. Nulla fringilla, odio sed varius varius, risus mi vulputate dui, non sodales dui felis sed mauris. Integer pulvinar laoreet odio. Suspendisse nec massa quis nunc lacinia tincidunt. Phasellus justo. Donec vel erat nec felis mattis fringilla. Nulla in nisl. Maecenas mollis elit sed mi pretium mattis. Duis non mi. </p> </div> <div id="voet"> &copy; K. Merckx 2009 </div> </div> </body>
De inhoud van de div 'inhoud' opmaken U kan in de CSS ook de diverse onderdelen zoals alinea's, quotes, afbeeldingen die u in de <div> inhoud zal opnemen gaan vormgeven of stijlen. Let op dat u bij de opmaak van bijvoorbeeld een alinea (<p>) enkel de alinea's opmaakt die zich bevinden in de <div> inhoud. U doet die op de volgende manier: #inhoud p{ /*hier schrijft u de CSS-opmaakcode*/ } #inhoud h2{ /*hier schrijft u de CSS-opmaakcode*/ } #inhoud img{ /*hier schrijft u de CSS-opmaakcode*/ } Bestudeer de voorbeeldcode bovenaan en bekijk zeker ook het online voorbeeld.
Kris Merckx 2009 www.computerkit.be/cursus