Links: inline en block
Hoi damnsharp,
Hier de nadere verklaring.
Ik zie weinig verschil als display block erbij zit.
Zie het tekeningetje:
Standaard heeft een link binnen een ander element een "inline"-karakter, dwz de link heeft een oppervlak dat L/R niet verder gaat dan de lengte van de tekst + de eventuele paddings L/R van de link.
Dit is het
bovenste item: geel is de 20px brede padding aan weerszijden, het groene kadertje is het link-oppervlak.
Naast het groen (het rood gearceerde gedeelte is dan geen link, dwz als je er overheen hovert reageert de link niet: geen reactie op klikken, en geen verandering van de link-kleur.
- NB: Het handje dat wel verschijnt als je zonder de {display:block;} over het rood gearceerde deel hovert is schijn die bedriegt: de <li> om de <a> heen heeft in je css een {cursor: pointer;} die daarvoor zorgt, maar daarmee is het nog geen hoverbare&klikbare link geworden! Het handje van de <li> in het rood gearceerde deel doet dan helemaal niets!
Geeft je nu een {display: block;} aan de links, dan krijgen ze een "block"-karakter, dwz de link heeft het oppervlak zo breed als het omringende element toestaat (met daarbinnen de paddings L/R van de link).
Dat is het
tweede item in de tekening: de link is nu over de hele breedte aanklikbaar en van kleur verschietend.
- NB: De {cursor: pointer;} kan dan ook met een gerust geweten uit de <li> geschrapt worden: de <a>'s hebben dezelfde breedte, en die hebben uit zichzelf al de pointer.
=======
Waarom ik de L/R paddings van de li's moet overhevelen naar de a's zie ik niet.
Een padding hoort bij het element zelf, en als je de paddings op de <li>'s hebt staan, begint de <a> erbinnen pas nadat de linker-padding van de <li> is opgehouden, en eindigt al voordat de rechter-padding van de <li> begint.
Betekent: in de padding-gebiedjes van de <li> zit géén link: de link is dus daar niet aanklikbaar.
Dat is het
onderste item van de tekening: de gele padding van de <li> staat buiten de link, en op de uiteinden van het item kan de link dus niet reageren.
Verplaats je de padding naar binnen de link zelf, dan telt deze wel mee voor het aanklikbare oppervlak, maar evengoed begint en eindigt de tekst waar de L-padding ophoudt en de R-padding begint.
Zo wordt het weer item 2 van de tekening.
=======
Het verticaal gaan van menu gaat nog niet goed met dat #nav
Zal ik nog even naar kijken, want niet uitgetest in IE7.
=======
een menu in CSS valt nog niet altijd mee merk ik wel
Klopt, want in een css-uitklapmenu spelen zowel alle kenmerken van het
css-boxmodel *) als die van de relatieve en absolute positionering. En vaak zijn er ook nog floats bij.
Dan heb je alle knooppunten van css wel zo ongeveer te pakken!
Wordt vervolgd!
CSShunter
____________
*) Daarom is een Doctype zo belangrijk: zonder Doctype schiet Internet Explorer in de
quirksmode:
de fratsen-toestand van IE5 die er een andere boxmodel op na hield.
(er staat misschien een kopje koffie)
