Hover border style probleempje

[Pablo11392]

*knip, crop al die witruimte er maar even uit*

Plaatje spreekt voor zich denk ik? Hij pakt de border-style voor elke volgende regel tekst, maar dat ziet er niet uit... Hoe kan ik dit zo aanpassen dat die maar 1x de border-style toepast in dit menu blokje?

code:

li {font-family: courier; }


#navigatie {
display      : inline;
list-style : none;
margin       : 0;
padding      : 0;
}       
 
#navigatie li {
background    : black;
border-style    : dashed;
border-width    : 1px;
border-color    : 006600;
padding             : 5px 5px 5px 5px;
text-align      : center;
width                   : 170px;
height              : 60px;
float                   : left;
white-space     : no-wrap;
   }

#navigatie a {
text-decoration : none;

}

#navigatie a:link {
color            : 99CC33;
}

#navigatie a:visited {
color            : 99CC33;
}

#navigatie a:hover {
border-style    : double;
border-width    : 7px 0px 3px 0px;
border-color    : 99CC33;
}

[ Voor 5% gewijzigd door MueR op 30-11-2010 00:17 ]

[Mercarra]

Zet de tekst in een div, en pas daar je border styling op toe. Misschien kan het ook netter, maar zo zou ik 't oplossen.

[amahusu]

je beseft dat je nu een border-top en border-bottom meegeeft aan je hover? Dus als de text niet op 1 regel past dan 'botst' de bottom border van de bovenliggende regel met de topborder van de onderliggende regel.

bovendien maak je ook nog eens gebruik van een double border style, dus effectief zie je dan 4 lijnen in bovenstaand geval, die in elkaar lopen. Ziet er niet echt netjes uit imo.

dus je kan ofwel je link divjes/li'tjes groter maken (of je text kleiner) zodat de link op 1 regel past. Of je je kunt je borders wat netter maken door bijv. "border-bottom: 1px solid #99CC33"

[Rvanlaak]

Hoogte elementen moet je altijd op je anchor toepassen, zodat deze automatisch je list-item vergroten. Dit in combinatie met display=block zou het juiste resultaat moeten geven.

[Pablo11392]

En hoe ziet die code er in zijn geheel uit? Ben nog beginner.. Dus ik snap ff niet waar ik dan die hoogte elementen moet toepassen.

[MueR]

Verzin/probeer zelf eens eerst iets? Ik hoef het helpdesk verhaal toch niet nog een keer op te ratelen?

[Pablo11392]

Ja dat probeer ik ook? Ik ben niet stom in mn hoofd of iets dergelijks. Ik kom er gewoon niet uit...Dan mag ik het toch wel vragen.

[MueR]

pablo11392 schreef op maandag 29 november 2010 @ 22:52:
En hoe ziet die code er in zijn geheel uit?

Dit mag je niet vragen, dat weet je na een kleine 15 meldingen toch wel, hoop ik.

pablo11392 schreef op maandag 29 november 2010 @ 22:52:
Dus ik snap ff niet waar ik dan die hoogte elementen moet toepassen.

Lees je uberhaupt wat je verteld wordt? Deze reactie zou je namelijk precies moeten vertellen hoe en wat:

Rvanlaak schreef op maandag 29 november 2010 @ 22:02:
Hoogte elementen moet je altijd op je anchor toepassen, zodat deze automatisch je list-item vergroten. Dit in combinatie met display=block zou het juiste resultaat moeten geven.

Probeer dat nou maar eerst eens.