In het vorige deel hebben we lijsten (< ul> < /ul>) gemaakt. Veel websites die met CSS zijn opgebouwd maken gebruik van lijsten voor menu's. Het grote voordeel is dat het doel van het menu duidelijk is, zelfs zonder CSS.
We zullen eens kijken naar een HTML-voorbeeld met vier koppelingen in een lijst:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>WSM deel 6</title>
<style type="text/css" media="screen">
#menu {
height: 1.5em;
margin-bottom: 2em;
}
#menu li {
margin: 0;
padding: 0 1em 0 1em;
float: left;
list-style-type: none;
}
#menu a {
color: rgb(32,32,48);
font-weight: bold;
}
#inhoud {clear: both; }
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="inleiding.html">Inleiding</a></li>
<li><a href="wie.html">Wie zijn wij?</a></li>
<li><a href="wat.html">Wat doen we?</a></li>
<li><a href="waar.html">Waar kun je ons
vinden?</a></li>
</ul>
</div>
<div id="inhoud">
<p>Hier komt de inhoud van de pagina.</p>
</div>
</body>
</html>
Het HTML-gedeelte binnen de body zal niet vreemd overkomen. De CSS-code moet misschien nog wel toegelicht worden. Het menu gedeelte is '1.5em' hoog. Een 'em' eenheid is gebaseerd op de gebruikte lettergrootte, omdat die hier niet bekend is gebruik ik een 'em'-eenheid. Als pixelprecisie belangrijk is, dan kun je ook de eenheid 'px' gebruiken en een waarde van '22px' opgeven.
Het menublock bevat 'float'-elementen. Deze zwevende onderdelen kunnen de opmaak van onderliggende blocks nadelig beïnvloegen. De eigenschap "clear: both;" voor het onderliggende block "inhoud" moet dit voorkomen.
Een alternatief menu kan geregeld worden door de CSS-code van het menu te vervangen:
#menu {
height: 1.5em;
margin-bottom: 2em;
border-bottom: 1px solid #000;
}
#menu li {
margin: 0 0.8em 0 0.8em;
padding: 0 1em 0 1em;
height: 1.5em;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
background-color: rgb(200,220,240);
float: left;
list-style-type: none;
}
#menu a {
color: rgb(32,32,48);
font-weight: bold;
text-decoration: none;
Zoals je ziet kun je met een paar eigenschappen een heel andere uiterlijk krijgen. Er wordt hier gespeeld met ruimte, lijnen en een achtergrondkleur. De HTML-code blijft hetzelfde.
Nog een voorbeeld:
#menu {
width: 12em;
margin-bottom: 2em;
}
#menu li {
margin: 0.5em;
padding: 0.5em 0.5em 0.5em 0.5em;
list-style-type: none;
border: 1px solid #000;
background-color: rgb(250,240,200);
}
#menu a {
color: rgb(32,32,48);
font-weight: bold;
text-decoration: none;
}
Zoals je ziet wordt in XHTML veel gebruik gemaakt van CSS voor de vormgeving. Fouten in de CSS-code kunnen leiden tot een onbetrouwbare weergave voor browsers waar niet op getest is. Gebruik de W3 controlesites voor HTML en CSS om je code helemaal perfect te krijgen:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/validator.html.nl
Tot zover deze serie artikelen over XHTML. Hopelijk heb ik je hiermee op weg kunnen helpen.
Bob Broen |
2007-05-16 |
Programmeren en techniek
