Ik heb in mijn vorige tutorial de basis van stylesheets uitgelegd! Nog niet gelezen? Doe dat dan eerst.
We gaan eerst beginnen met de standaard html.
Code:
<!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" xml:lang="en" lang="en">
<head>
<title>Titel van je document</title></head>
<center> // deze gebruik ik om de site in het midden te zetten
<body>
</body>
</center>
</html>
Hierboven dus de standaard opmaak. En ik heb dus xHTML gebruikt bovenin om te zorgen dat de layout in zoveel mogelijk browsers het zelfde weergeeft.
<!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" xml:lang="en" lang="en">
<head>
<title>Titel van je document</title><style type="text/css">
<!--
body {
background: #ffffff;
font-size: 11px;
font-family: verdana;
}
#container {
background: #777777;
width: 794px;
overflow: hidden;
margin: 0px auto;
margin-left: 3px;
margin-right: 3px;
}
#header {
width: 800px;
height: 140px;
background: #000000;
}
-->
</style>
</head>
<center> // deze gebruik ik om de site in het midden te zetten
<body>
<div id="header"></div>
<div id="container">
inhoud van de div
</div>
</body>
</center>
</html>
Even een korte uitleg over de div:
# voor de stylenaam = oproepen als:
inhoud
. voor de stylenaam = oproepen als:
inhoud
Dit was je eerste onderhouds layout in kleur codes!
binnenkort gaan we een uitgebreide layout basen.
