Yeps, ik had afgelopen tijd even een spoedklusje-met-deadline op mijn werk, dus was even uit de lucht.
Maar daar gaat ie weer.
We halen eerst de <meta>'s die onder de <style> staan even naar boven, want dat is een betere plaats.
Omdat de vogelhuisjes niet meer op de vervolgpagina's komen, en het achtergrondplaatje groter is geworden, kunnen alle css-eigenschappen van de background-posities van de huisjes verwijderd worden.
Dan krijgen we deze:
Nu kan je met een schone lei beginnen.
Eerst gaan de tekst-namen van de huisjes buiten beeld, door ze een absolute positie en een margin-left van -9999px te geven. Dat hadden ze al toen ze nog in de #header zaten, maar daar zijn ze nu uit. Dus daar passen we de css even op aan. Er komt bij:
Code:
#menu span {
position: absolute;
left: 0;
margin-left: -9999px;
}
Ook de {float: right;} van het #menu kunnen we intussen missen, want het menu begint gewoon aan de linkerkant onder het logo. Met een afstandje van 50px vanaf de linkerkant: die kan als margin-left aan de menu-<ul> toegevoegd worden.
De breedte en de hoogte van de vogelhuisjes is nu nog niet goed.
Die kunnen opgemeten worden uit het image
http://koenmaassen.comxa.com/images/menuknoppen.png:
Alle huisjes zijn 140px hoog, en passen op 120px breedte; behalve het laatste huisje, dat is met het streepje van de t van kontakt 138px breed.
Zo kan het formaat van de <li>'s en de links <a> in deze list-items aangepast worden:
Code:
#menu li {
float: left;
width: 120px;
margin: 0 15px 0 0; /* 15px afstand rechts tot de volgende */
padding: 0;
}
#menu li#last {
width: 138px;
}
#menu a {
width: 120px;
height: 140px;
display: block;
background: url(images/menuknoppen.png) no-repeat 0 9px;
}
#menu #last a {
width: 138px;
}
Nu kunnen de background-posities van de links ingesteld worden:
Code:
a#home { background-position: 0 9px; }
a#kim { background-position: -120px -150px; }
a#kim:hover { background-position: -120px 9px; }
a#kosten { background-position: -238px -150px; }
a#kosten:hover { background-position: -238px 9px; }
enz.
Tegelijk zetten we het geheel nog iets naar boven, nu we de stand van de vogeltjes bovenop weten:
Code:
#menu {
margin: -25px 0 0 50px;
enz.
}
Nu hoeven alleen de laatste huisjes nog de goede background-posities te krijgen, maar dat zal wel lukken denk ik.
Met vriendelijke groet,
CSShunter
