[html/css] menu underline

[Verwijderd]

Ik heb een vraagje over een menu wat ik aan het maken ben:

Meestal maak ik een menu alsvolgt:

HTML:

<div id="menu">
        <div class="menuoptie"><a href="#"><span class="menuoptietxt">Home</span></a></div>
        <div class="menuoptie"><a href="#"><span class="menuoptietxt">Knop1</span></a></div>
        <div class="menuoptie"><a href="#"><span class="menuoptietxt">Knop2</span></a></div>
        <div class="menuoptie"><a href="#"><span class="menuoptietxt">Etc</span></a></div>
</div>

Cascading Stylesheet:

#menu{
    width:500px;
    height:32px;
    background-color:#00FFFF;
}

.menuoptie{
    width:100px;
    height:30px;
    float:left;
    text-align:center;
    background-color:#00FF99;
    border:1px solid #FFCC33;
}

.menuoptie a{
    width:100%;
    height:100%;
    display:block;
    text-decoration:none;
}

.menuoptie a:hover{
    text-decoration:underline;
}

.menuoptietxt{
    position:relative;
    top:5px;
}

Op deze manier krijg ik dus een menu die bestaat uit divjes, waarbij je op de hele div kunt klikken en niet alleen op het woord hoeft te klikken.
Dit menu werkt in principe prima in alle browsers, een ding lukt me alleen niet:
De tekst in het menu wil ik verticaal uitgelijnd hebben. Daarom heb ik de tekst in een span gezet en die met position:relative 5px omlaag gezet.
Alleen als ik wil dat als je met de muis over de knop gaat de tekst onderstreept wordt, dan plaatst hij de 'underline' nog op het oude niveau. Die plaatst hij niet met de span omlaag.
Hoe kan ik zorgen dat hij dat wel doet?

thanks

[NiteSpeed]

Plaats eens een working demo online. Dan kan ik wat meer hiermee. Overigens is het gebruik van divjes op deze manier sterk af te raden.

[ Voor 35% gewijzigd door NiteSpeed op 11-12-2008 15:53 ]

[trinite_t]

tip: gebruik lijsten voor menus. en geef dan de link in het list item een

Cascading Stylesheet:

display: block

. Heb je hetzelfde effect. (Doe je nu grotendeels ook al, maar nu met divs)

[ Voor 28% gewijzigd door trinite_t op 11-12-2008 15:53 ]

[harrald]

trinite_t schreef op donderdag 11 december 2008 @ 15:50:
tip: gebruik lijsten voor menus. en geef dan het list item (<li>) een display: block. Heb je hetzelfde effect.

nee de li moet display inline anders komt het menu niet horizontaal.
maar je kan de a natuurlijk nog wel zo stijlen dat ie groter is.

[trinite_t]

zie edit. was even verkeerd aan het redeneren.

[truegrit]

Dit gebeurt trouwens alleen in firefox na een snelle test van mijn kant. IE7 en Opera laten het wel goed zien.

[Verwijderd]

hier staat 't ie

[ Voor 10% gewijzigd door Verwijderd op 11-12-2008 16:00 ]

[truegrit]

Als je nou een padding-top van ongeveer 5 pixels op die <a> zet, die span weghaalt, dan zou je al een heel eind moeten komen (lees: dan werkt het gewoon ). Je moet dan wel de hoogte van de <a> iets kleiner zetten, zodat je de padding weer compenseert.

[ Voor 23% gewijzigd door truegrit op 11-12-2008 16:01 . Reden: die hoogte ]

[Verwijderd]

twerkt prima, en 't is een stuk makkelijker:) stom dat ik daar niet zelf op kwam..

[Verwijderd]

mag dit gebruik van divjes officieel trouwens? Het werkt in ieder geval overal goed, maar weet niet of het 'netjes' is.

[BalusC]

Semantisch gezien gebruikt men hier normaal <ul><li> voor.

[truegrit]

Alles mag, maar zoals eerder gezegd is het gebruik van een unordered of ordered list in dit geval semantisch correcter, omdat het een lijst met links is in zekere zin. Nou ben ik geen expert, maar dat is hoe ik het meestal doe en blijkbaar vele met mij!

[Verwijderd]

het kan prima, maar ik moet dan wel meer code gebruiken.

<ul><li> hebben namelijk standaard een padding margin en list-style, die moet ik veranderen, bij een div hoeft dat niet.

[BalusC]

Uh, daarvoor is CSS uitgevonden.

Met standaard <ul><li> ziet jouw menu ook netter uit wanneer men je website zonder CSS bezoekt (denk aan mobieltjes, textbased browsers, etc).

Als je het graag op je eigen manier wilt doen, vraag dan ook niet aan anderen hoe je dat het beste moet aanpakken.

[ Voor 93% gewijzigd door BalusC op 11-12-2008 16:37 ]

[truegrit]

Als je toch minimalistisch wilt gaan doen kan je ook die classes van de elementen in div#menu halen, want die zijn ook nergens voor nodig.

[Verwijderd]

is niet dat ik perse minimalistisch wil zijn, ik vroeg me af wat de redenen zijn om ul en li ipv een div te gebruiken.

[BalusC]

Semantiek.

[Verwijderd]

Verwijderd schreef op donderdag 11 december 2008 @ 16:20:
het kan prima, maar ik moet dan wel meer code gebruiken.

<ul><li> hebben namelijk standaard een padding margin en list-style, die moet ik veranderen, bij een div hoeft dat niet.

Je vergeet hier de scheiding van structuur en opmaak. In feite is het totaal willekeurig dat UL's (doorgaans) standaard op deze manier worden weergegeven. Bij heel veel mensen zijn dit soort toevallig tot stand gekomen weergavemanieren als een soort wet in het hoofd gaan zitten. Ik ben daarvan af gekomen door altijd te beginnen met een css reset. Toen zag ik pas mijn vooroordelen.

[Fuzzillogic]

Verwijderd schreef op vrijdag 12 december 2008 @ 19:55:
[...]

Je vergeet hier de scheiding van structuur en opmaak. In feite is het totaal willekeurig dat UL's (doorgaans) standaard op deze manier worden weergegeven. Bij heel veel mensen zijn dit soort toevallig tot stand gekomen weergavemanieren als een soort wet in het hoofd gaan zitten. Ik ben daarvan af gekomen door altijd te beginnen met een css reset. Toen zag ik pas mijn vooroordelen.

Er is een soort van "standaard CSS"-stijl voor HTML4. Niet iedere browser (IE met name uiteraard) houdt zich eraan. UL en LI kun je heel eenvoudig met padding: 0; margin: 0; in het gareel krijgen. Die CSS reset-scripts raad ik af. Extra hits op je server, lagere performance, en een toenemende chaos als je CSS moet gaan debuggen met bijv. Firebug. Gewoon alleen dingen overriden wanneer nodig, het is vaak maar een regeltje of 2.

[Verwijderd]

Fuzzillogic schreef op vrijdag 12 december 2008 @ 20:01:
Er is een soort van "standaard CSS"-stijl voor HTML4. Niet iedere browser (IE met name uiteraard) houdt zich eraan.

Ik ben het ermee eens dat een heel aantal "standaard" stylings ook echt redelijk standaard zijn. Het ging er mij om, dat de meeste (beginnende) webdevelopers qua semantiek/scheiding structuur en presentatie die stijl juist moeten afleren. TS is niet de enige die zich afvraagt waarom je een UL voor een menu zou gebruiken, als een DIV al zo handig niet gestyled is.
Vandaar mijn tip om eens met een css reset te gaan werken. Je ziet dan dat een html-element in feite gekozen moet worden om andere redenen dan hoe het eruit ziet.

UL en LI kun je heel eenvoudig met padding: 0; margin: 0; in het gareel krijgen. Die CSS reset-scripts raad ik af. Extra hits op je server, lagere performance, en een toenemende chaos als je CSS moet gaan debuggen met bijv. Firebug. Gewoon alleen dingen overriden wanneer nodig, het is vaak maar een regeltje of 2.

Ik heb de CSS-reset van Eric Meyer uitgekleed tot een niveau waar ik graag mee werk. Alle margins en paddings op 0 bijvoorbeeld. De grootte van de h1 t/m h6 gaat in eerste instantie gewoon terug naar 100%. Dat soort dingen. (Ik ga bijvoorbeeld niet rommelen met de aanhalingstekens van citaten e.d. Dat wordt cross-browser toch een drama.) Ik vind het erg prettig om vanaf dat niveau de stijl weer op te bouwen.

Wat de performance betreft: ik heb de gewoonte mijn losse css-files server side te includen in mijn style.css.php. Je houdt de voordelen van het scheiden van verschillende stijlzaken over verschillende css-files (reset.css, layout.css, typography.css), maar hebt toch maar 1 http-request. Plus de andere voordelen die php biedt ($serif = 'geneva,verdana,arial,sans-serif'; e.d.). Maar goed, dit dwaalt wel heel ver af.