Zoals je ziet nemen we in deze stap de primaire navigatie onder handen. Deze
zit, vanzelfsprekend, in een UL element die de links onder elkaar
plaatst. We hebben echter gekozen, zoals te zien is, voor een menu waarin alle
links horizontaal naast elkaar staan. Wederom hebben we er ook voor gekozen om,
net zoals bij de zwarte balk met het logo, beide uiteinden te voorzien van ronde
hoeken. Dat leidt er toe dat we niet genoeg hebben aan het ene UL
element om de afbeeldingen, net zoals we zagen in de vorige stap.
We kiezen in deze stap echter voor een iets andere oplossing voor dit afbeeldingen probleem dan dat we in de vorige stap kozen. Toen gebruikten we namelijk:
H1 element voor de linker hoeken en het logo;FORM element van het zoekveld voor de rechter hoeken;DIV element waar de bovengenoemde H1 en
FORM beide in zaten voor het middelste stuk van de balk die het
logo en de rechter hoeken met elkaar verbond.Wat we voor de achtergrond van de primaire navigatie gebruiken lijkt erop, maar verschilt in één opzicht; we gebruiken maar twee afbeeldingen:
Aan deze techniek zit in vergelijking met die van de vorige stap één nadeel
en één voordeel. Het voordeel is dat we dan maar twee elementen nodig hebben
voor het menu, i.p.v. drie elementen zoals in de vorige stap. We hebben er
echter maar één (het UL element) dus hebben we een DIV
element toegevoegd en deze om het de UL heen te doen. Het
id wat dit DIV element heeft is "nav-menu" en zal dus
in de CSS gebruikt worden om dit element, samen met het UL element
wat erin zit, op te maken.
Het nadeel is dat de layout zich aanpast aan de grootte van de resolutie van het beeldscherm van de gebruiker. Heeft de gebruiker een lage resolutie, dan is de pagina smaller dan bij iemand met een hoge resolutie. Dit op zich is natuurlijk geen nadeel, maar hierdoor weten we nooit hoeveel pixels het menu breed is. Zo kan het bij iemand met een lage resolutie 700 pixels zijn, maar bij iemand met een hoge resolutie misschien 1150 pixels. Hierdoor kunnen we dus niet gewoon een afbeelding met een bepaalde grote (van bijv. 700 pixels) maken die het middenstuk van het menu voorstelt, omdat deze voor sommige resoluties te klein is waardoor het lijkt alsof er een gat in de achtergrond van het menu zit.
Het nadeel kan misschien nog niet helemaal duidelijk, dus laten we kijken wat we in de vorige stap deden waar we dat nadeel niet hadden. Daar hadden we in het middenstuk gekozen voor een afbeelding van 1 pixel breed wat zich zovaak herhaalde wat nodig was zodat het beide uiteinde van de zwarte balk met elkaar verbond. We hadden echter, zoals eerder gemeld, gekozen om het menu uit twee afbeeldingen te laten bestaan waarvan aan één afbeelding ook het middenstuk zit (afbeelding 2 die we eerder hebben genoemd). Deze afbeelding kunnen we natuurlijk niet 1 pixel breed maken en oneindig keer herhalen want aan die afbeelding zit ook de linker hoek dus ga je oneindig keer de linker hoek krijgen wat er niet zo mooi uitzien.
Wat we hebben gedaan om dit probleem om te lossen is om één afbeelding 10.000 pixels breed te maken met aan de linker kant de linker hoek van de balk. Dit is natuurlijk overdreven breed omdat niemand een resolutie heeft die 10.000 pixels breed is, maar het zorgt er wel voor dat het middenstuk nooit te klein is waardoor beide uiteinden van de balk mooi met elkaar verbonden zijn. Dit hebben we voor elkaar gekregen d.m.v. de volgende CSS code:
#nav-menu {
background:url(/style/nav-left.png) repeat-x; /* De linker kant van het menu met het 10.000 pixels brede middenstuk. */
}
#nav-menu ul {
background:url(/style/nav-right.png) no-repeat top right; /* De rechter kant van het menu. */
}
#nav-menu li {
display:inline; /* Door de LI element inline-level te maken komen alle links op één regel terecht. */
}Door alleen de bovenstaande CSS code te gebruiken voor de primaire navigatie
komen we uit op een klein en in elkaar gedeukt menuutje: 
Daarom voegen we wat margin en padding toe om het wat
overzichtelijker te maken. Ook maken we de links in het menu wat op en komen we
uit op deze CSS
code.
Nu de primaire navigatie voltooid is kunnen we naar de volgende stap gaan: de inhoud.
Copyright © 2006 Modern Markup. Alle rechten voorbehouden.