[CSS] menu vertical alignen

[Avalaxy]

Ik heb een menu met CSS in elkaar geflanst:

HTML:

            <div id="header">
                <div class="menu">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Guitars</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>

Cascading Stylesheet:

#header {
background-image: url(images/header.png);
height: 100px;
text-align: center;
}

#header ul {
list-style-type: none;
float: left;
position: relative;
left: 50%;
padding: 0;
margin: 0 auto;
width: auto;
}

#header li {
float: left;
position: relative;
right: 50%;
width: auto;
}

#header ul a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 3px 10px 3px 10px;
width: auto;
}

#header ul a:hover {
color: #091f0f;
}

.menu {
clear: both;
float: left;
width: 100%;
overflow: hidden;
}

Er staat dus een horizontaal menu in een div van 800px breed en 100px hoog. Nu staat dat menu aan de top van die div, terwijl ik hem juist op de bodem wil hebben.

Ik heb al enorm veel gegoogled, maar het vertical-alignen lukt niet, volgens mij doordat ik display: block gebruik.

Iemand enig idee hoe ik dit ding op de bodem kan zetten?

Nu ziet het er zo uit:



Oja, overige opmerking over de code zijn uiteraard ook welkom. Ik heb het idee dat ik teveel heb lopen klooien met het menu

[steffex]

boven de div waar de ul in staat een div gooien met een vaste hoogte en je bent er

optie 2 is de header op position relative en de menu div op absolute en dan bottom: 0; in de stylesheet...

[ Voor 39% gewijzigd door steffex op 23-09-2009 20:18 ]

[--MeAngry--]

Optie 1 is geen optie, dat is de ranzigste manier die er is, dan kun je je UL nog beter een margin-top geven. Want anders kunnen we net zo goed weer tables gebruiken, en dat is dan ook het enige wat in dit geval nog meer af te raden is.

Optie 2 is de beste (en eigenlijk enige aan te raden manier).

[ Voor 28% gewijzigd door --MeAngry-- op 23-09-2009 20:23 ]

[Avalaxy]

stef-o schreef op woensdag 23 september 2009 @ 20:17:
boven de div waar de ul in staat een div gooien met een vaste hoogte en je bent er

optie 2 is de header op position relative en de menu div op absolute en dan bottom: 0; in de stylesheet...

Het werkt met optie 2!
Merci bien

[Jey]

Geef de line-height en vertical-align: middle; dan hoef je geen extra divje te maken

[R4gnax]

--MeAngry-- schreef op woensdag 23 september 2009 @ 20:22:
Optie 2 is de beste (en eigenlijk enige aan te raden manier).

De beste manier is om dat menu inline-block te maken met een vertical-align: bottom er bij, terwijl je de header een line-height geeft die gelijk staat aan de hoogte (100px, dus).

Moet je alleen eventjes opzoeken hoe je inline-block in IE kunt triggeren op block level elementen. Display: inline-block werkt normaal alleen op inline elementen in IE. Hoewel: eigenlijk is dat een halve waarheid. Display: inline-block doet niets anders dan de magische 'hasLayout' / 'layout' property aanzwengelen, welke op inline elementen zich toevallig (min of meer) als een inline block gedraagt. (Het heeft nl. ook gevolgen voor stacking contexts van absoluut en relatief gepositioneerde elementen.)

Kort door de bocht kun je dat voor elkaar krijgen met

Cascading Stylesheet:

.myInlineBlock
{
  display: inline-block;
  zoom: 1;
  *display: inline;
}

De eerste regel zet hasLayout aan. De tweede houdt hem aan door zoom: 1 te specificeren, en de laatste die alleen door IE opgepikt zou moeten worden (beter om dat via een conditionele stylesheet te doen...), zorgt dat het element weer inline wordt (met behoud van block level inhoud: inline-block, dus).