Hoi Yammaski,
Bedankt weeral ccshunter.
Jawel, jawel,
maar je hebt m'n suggestie niet overgenomen om de sizes in em's ipv px op te nemen. Dat betekent als de bezoeker in FF de lettergrootte vergroot heeft zonder alles in te zoomen:
De div-kop komt door de harde pixels over de inhoud heen te lopen, en op het eind lopen de items uit de inhoud-achtergrond (+ lijken verdwenen, omdat de tekst-kleur gelijk is aan de background-kleur van de pagina).
Ook door de harde pixels kan de bezoeker met IE als browser niet de lettergrootte aanpassen, als dat nodig is.
=======
Nu heb ik nog wel 1 probleempje : de links staan "bold", hetgeen ik liever "normal" had gezien.
Hoe kan ik dit nog fixen ?
Dit werkt, maar is het volgens de regels ? (...)
Ja, dat is volledig valid volgens de regels. Maar als je de regel
"en ook zo eenvoudig mogelijk" aanhangt, kan het zonder een extra <span> in elke <a> te moeten zetten, en zonder de bijbehorende extra class.
- Als je nog eens naar m'n testpagina van reactie #2 kijkt, zie je dat daarin (behalve een vereenvoudigde html/css-structuur) een
#NavLeft li {font-weight: normal;}
zit, die (zonder span) in ruststand de items niet bold maakt.
- Die heb je weliswaar overgenomen, maar dat werkt niet omdat je verderop in de css hebt staan:
Code:
a:link {
...
font-weight: bold;
}
Dat is specifieker dan wat in de li wordt opgegeven (de <a>'s zijn children van de <li>'s), en dit gaat dus de normal van de li overrulen.
- Om dat te verhelpen, moet de normal uit de li gehaald worden, en toegevoegd worden aan de <a>'s van het lijstje:
Code:
#NavLeft a {
...
font-weight: normal;
}
Nu is dit specifieker geworden dan de algemene link-setting met bold, en in het lijstje wint dus de normal.
=======
De achtergrond (blokje en gradient) heb ik apart gezet, ik had anders een fijn wit boordje links.
Dat kan, maar het hoeft niet.
Je kunt het boordje links (en ook het top-lijntje, om mooi aan te sluiten) opnemen in het combi-image. Dat scheelt weer een vertragende http-request van de browser naar de server:
Ik heb er hier een blauw kadertje omheen gezet om het beter te kunnen zien; in het echt is het deze:
yam-sprite-2.png.
De onderrandjes van de hover-links zijn echte borders, zodat de hoogte van de achtergrond-afbeelding pijnloos kan meegroeien bij opschalen van de lettergrootte.
Ook in IE is het letterformaat schaalbaar (van "Extra klein" t/m "Extra groot").
In de afbeelding en de css een beetje scharrelen met de afstanden, en dan draait dat.
=======
Met vriendelijke groet,
CSShunter
__________
PS: In een paar pagina-namen van de links stonden spaties. Om die te vermijden (cq. in de links een %20 ipv de spatie te moeten zetten), heb ik die vervangen door - streepjes zoals die ook in de andere pagina's al staan.
