Je eerste, goede website maken. Stijlen invoegen.
We gaan naar aanleiding van het vorige artikel over de opbouw van een website, nu de stijlen invoegen. Het vorige artikel vind je hier. daarbij hadden we een eenvoudige opmaak gemaakt voor een twee-koloms layout met een footer, met behulp van div.
De code ziet er nu als volgt uit:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Hier komt de titel</title>
<link rel=”stylesheet” type=”text/css” href=”jouw_stijl_blad.css” />
</head>
<body>
<div id=”kop”>Titel van de website</div>
<div id=”navigatie”>Home<br />Pagina 2<br />Pagina 3</div>
<div id=”inhoud”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean nec nunc vitae tellus elementum scelerisque.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos.
Mauris mollis justo nec est. Nunc eget dui vitae libero viverra mollis.</p>
</div>
<div id=”footer”>© 2005 bladiebla</div>
</body>
</html>
Zonder stijlblad is dit het resultaat:
Dan komen we nu bij het stijlblad. Deze heeft van ons de naam jouw_stijl_blad.css meegekregen, die kun je natuurlijk elke willekeurige naam geven, als je de link rel maar hetzelfde noemt. Het eerste wat we in het stijlblad gaan benoemen is de body, hierin komen algemene zaken te staan als lettertype en -kleur, breedte van de hele pagina en de margin en padding.
body {
margin: 0;
padding: 0;
font-family: Georgia, Times, “Times New Roman”, serif;
color: black;
width: 600px;
border-right: 1px solid black;
}
We gaan nu de header regelen. in onze header komt de titel van de website te staan met een mooie achtergrondkleur. Onder deze header komt een lijn.
#kop {
background-color: #666;
color: white;
font-size: 19px;
border-bottom: 1px solid #333;
}
Aangezien het hier om de kop gaat hoeven we verder geen positie te regelen. Dit komt vanzelf wel bovenaan de website te staan. Anders is dat voor de navigatie, die naar links gezet moet worden met behulp van float: left. Daarna hoeven we de inhoud, die ernaast staat niet meer naar rechts te floaten. Dus hier de stijl voor de navigatie en de inhoud.
#navigatie {
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;
}
#inhoud {
padding-top: 1em;
margin: 0 2em 0 200px;
}
Bij de laatste regel is er voor margin een verkorte expressie gebruikt. Je kunt dit gebruiken door de getallen de volgorde mee te geven: boven, rechts, onder, links. Als je twee getallen gebruikt, dan gelden deze voor boven/onder en rechts/links.
Nu de footer. Meestal gebruikt voor een adresregel of copyright ofzo. Aangezien deze onderaan de pagina moet komen en niet links of rechts uitgelijnt, gebruiken we float: clear. Beide zijkanten worden dan leeggehouden.
#footer {
clear: both;
background-color: #ccc;
padding-bottom: 1em;
border-top: 1px solid #333;
padding-left: 200px;
}
Met stijlblad krijg je het volgende als resultaat:
Dat was het voor deze pagina. We gaan nu verder niet in op hoe je het menu maakt. Daar komen we later nog wel eens op. Experimenteer er rustig eens op los.
