vertical-align: middle ...

[miguel_rkc]

Moin,
vorweg: ich habe die Suche verwendet und selfhtml durchforstet. Zum Thema. Ich möchte eine kleine Navigationsleiste erstellen die wie folgt aussieht (sorry wegen der Bildbreite):



Wie ihr seht, funktioniert die vertikale Zentrierung nicht (IE, FF, Net, Moz), obwohl ich meiner Meinung nach, alles richtig gemacht habe.

Hier der Quellcode:

<!-- Header Navigation Anfang -->
    <div id="headnav">
        <div id="headnavmenue">
            <span id="headnavmenuetext">Direktauswahl</span>
            <img src="img/icons/penguin.png" id="headnavmenuebild" />
            <img src="img/main/cut.png" class="headnavcut" />
        </div>
        <div id="headnavpfad">
            <span class="headnavpfadtext">Startseite</span>
            <span class="headnavpfadpfeil">»</span>
            <span class="headnavpfadtext">Monitore</span>
            <span class="headnavpfadpfeil">»</span>
            <span class="headnavpfadtext">CRT's</span>
            <span class="headnavpfadpfeil">»</span>
            <span class="headnavpfadtext">HP 7500</span>
        </div>
        <form action="suche.php" method="post">
        <div id="headnavsuche">
                <img src="img/main/cut.png"  class="headnavcut" />
                <input name="suche" type="text" id="headnavsuchefeld" />
                <input name="suchebild" type="image" src="img/icons/search.png" id="headnavsuchebild" />
        </div>
        </form>
    </div>
<!-- Header Navigation Ende --> 

hier ein Auszug aus dem zugehörigen Stylesheet:

div#headnav {
    background-image:url(../../img/main/headnavbg.png);
    background-repeat:repeat-x;
    height:27px;
}
div#headnavmenue {
    margin-left:15px;
    float: left;
}
span#headnavmenuetext {
    font-weight:bold;
    vertical-align:middle;
}
img#headnavmenuebild {
    vertical-align:middle;
}
div#headnavpfad {
    float: left;
}
span.headnavpfadtext {
    color: #666666;
    vertical-align:middle;
}
span.headnavpfadpfeil {
    color: #FF6600;
    font-family:Verdana;
    vertical-align:middle;
}
div#mainnavsuche {
    float: right;
    margin-right: 15px;
}
input#headnavsuchefeld {
    width:80px;
    vertical-align:middle;
    font-size: smaller;
}
input#headnavsuchebild {
    vertical-align:middle;
}
img.headnavcut {
    vertical-align:middle;
    margin-left: 5px;
    margin-right: 5px;
} 

Ideen? position:relative; top:50% habe ich erfolglos versucht..

[schmalle]

span ist ein INLINE Element. Es wäre mir neu, wenn man darin etwas vertical ausrichten könnte.

[miguel_rkc]

Das kam mir auch strange vor, jedoch schreibt css4you folg.:

<p>Normaler Text
<span style="vertical-align:super">Höher gestellt</span>
Normaler Text
</p> 

... was mich dazu veranlasste, den "losen" text in ein <span> zu verpacken.

[wahsaga]

macht so aber m.E. wenig sinn.

schau dir mal das bild unter http://de.selfhtml.org/css/eigenscha...vertical_align an.


würde eher versuchen, dass über padding für die navi zu regeln.

[miguel_rkc]

padding fand ich weniger geeignet, da die Schriftgrößen (ich verwende "small") in den Browsern verdammt unterschiedlich groß sind - somit würde sich ja ständig eine Abweichung vom genauen Mittelpunkt ergeben.
Aber scheinbar geht es ja nicht anders

Eine ganz andere Frage: Warum stellen Mozilla und Netscape, im Gegensatz zu IE und FF, die Höhe eines Input-Feldes (12px) zu total kleinklein (3mm hoch) dar??

[schmalle]

was ist mit line-height? kann man da nicht was mit treiben?

[miguel_rkc]

@schmalle: line-height klappt nach den ersten Tests beim FF und Netscape, IE kann es bei den <span>'s und Opera macht Bockmist. Ich würde aber, wenn möglich, eine universelle Lösung bevorzugen.