[CSS] vertikale uitlijning menuitems

[Atari Paul]

Ik ben nu bezig om een floating menu te maken en tot zover gaat alles ook goed.
Maar nu loop ik tegen het volgende probleem aan:

De menuitems zijn opgebouwd uit een plaatje boven en tekst eronder, tot zover gaat alles prima.
Het vertikaal uitlijnen van zowel het plaatje als de tekst gaat echter niet goed (lukt helemaal niet om het zo maar eens te zeggen).

Op diverse plekken gezocht (google, tweakers, etc.) maar helaas niet de oplossing kunnen vinden.

Diverse oplossingen die ik heb gevonden, maar die helaas niet werkten:

- vertical-align: bottom => werkt helaas alleen bij inline items, dus geprobeerd de betreffende li-items display:inline te geven, mocht helaas niet baten
- bottom: 0px => werkt alleen bij absolute positioning, dit gaat in mijn opbouw niet werken, dan zou ik alle menuitems op een vaste plek moeten zetten en dat is nu juist niet de bedoeling
- margin-bottom: 0px => werkt ook niet, de plaatjes blijven hardnekkig bovenin staan

Hieronder mijn laatste css & html (het is niet perfect maar werkt tot zover):

Cascading Stylesheet:

DIV {width:auto;}
#dragme{position:absolute;cursor:move;}
#menu{position:relative; border:1px solid black;width:500px;background-color: white;}
#topmenu{height: 16px;}
#main_menu {margin-left: 0px;padding-left:0px;height: 65px;}
#main_menu LI {list-style: none;display:inline;margin-left:10px; float:left;text-align: center;height: 65px;}
#logout {float: right; margin-right:10px;}

HTML:

<div id="menu" style="display: none;">
    <div id="topmenu">
        <div id="drag" class="dragme" style="float: right;cursor: move;">
            o
        </div>
        <div id="hide" style="float: right;cursor:default;">
            -
        </div>
    </div>
    <div id="content">
        <ul id="main_menu">
                <li>[img]"images/pages.png"[/img]<br/><span>Pages</span></li>
                <li>[img]"images/menu.png"[/img]<br/><span>Menu</span></li>
                <li>[img]"images/template.png"[/img]<br/><span>Templates</span></li>
                <li>[img]"images/users.png"[/img]<br/><span>Users</span></li>
                <li style="margin-bottom:0px;">[img]"images/files.png"[/img]<br/><span>Files</span></li>
                <li>[img]"images/config.png"[/img]<br/><span>Configuration</span></li>
                <li id='logout' style="float: right;">[img]"images/logout.png"[/img]<br/><span>Logout</span></li>
        </ul>
    </div>
</div>

[crisp]

Je image een display:block geven en een line-height opgeven voor de span met tekst?
display:inline is overigens onzin als je een element float; floats worden automagisch block-level elementen.

[Atari Paul]

Weer wat geleerd Crisp, dank je, maar je bedoeld de hoogte van de span zo aanpassen dat deze op de bottom aligned ? Want dat is eigenlijk wat ik wil bereiken. (net even getest maar na deze aanpassingen kan ik de tekst nog niet op de bottom alignen).

[Brakkie]

crisp schreef op zaterdag 03 juni 2006 @ 12:03:
Je image een display:block geven en een line-height opgeven voor de span met tekst?
display:inline is overigens onzin als je een element float; floats worden automagisch block-level elementen.

display: inline op floats kan wel nuttig zijn om de IE double margin float bug te verhelpen toch?

[ Voor 4% gewijzigd door Brakkie op 03-06-2006 12:23 ]

[crisp]

Atari Paul schreef op zaterdag 03 juni 2006 @ 12:16:
Weer wat geleerd Crisp, dank je, maar je bedoeld de hoogte van de span zo aanpassen dat deze op de bottom aligned ? Want dat is eigenlijk wat ik wil bereiken. (net even getest maar na deze aanpassingen kan ik de tekst nog niet op de bottom alignen).

oh, je wilt de tekst op de bottom hebben; dat wist ik niet. Je zou dat natuurlijk ook voor elkaar kunnen krijgen door je images dan een margin-bottom te geven oid.

Brakkie schreef op zaterdag 03 juni 2006 @ 12:22:
[...]

display: inline op floats kan wel nuttig zijn om de IE double margin float bug te verhelpen toch?

True, maar zet het dan in een aparte stylesheet de je dmv conditional comments inlaadt; er is geen reden om je CSS te vervuilen omdat IE er een zooitje van maakt

[Atari Paul]

oh, je wilt de tekst op de bottom hebben; dat wist ik niet. Je zou dat natuurlijk ook voor elkaar kunnen krijgen door je images dan een margin-bottom te geven oid.

Was het maar zo simpel, ik heb vrees ik niet goed uitgelegd wat mijn probleem is.
De images hebben allemaal verschillende hoogtes waardoor de tekst eronder dus op niet mooi naast elkaar verschijnt.

Dit hoopte ik dus op te lossen door de tekst op de bottom te alignen, maar dit werkt dus niet.

[Atari Paul]

Klein schopje.