Deze tutorial maakt deel uit van een serie van vijf:
De plaatjes die je hieronder ziet doen je waarschijnlijk niet denken aan een menu. Dat is niet zo gek want ik overdrijf hier een beetje. De plaatjes die je ziet zijn de achtergrondafbeeldingen van de listitems. Je kunt op deze manier dus wel goed zien hoe de listitems overal te positioneren zijn waar jij wilt. Kijk maar eens in de CSS bij de posities (top en left) van bijv. #buteen of #buttwee.
Verder staan er tekstlinks in de listitems, maar die tekst zie je niet doordat deze met #menu li a { text-indent: -999em;} buiten boord is gezet.
De mouse-overs die je ziet zijn weer andere achtergrondplaatjes, nu van de a:hovers van de links in de listitems.
Overigens, hier zijn allemaal losse afbeeldingen gebruikt. Dat betekent 10 afbeeldingen die 10 server requests geven. Volgende stap isdan ook om sprites te gebruiken.
WaalWeb Webdesign | Voorbeelden bij Zelfstudiehandboek Websites Ontwikkelen