Tipps und kleine Kniffe

 Probleme mit vertikaler Ausrichtung?

Eine vertikal zentrierte Ausrichtung ist häufig optisch ansprechender. Ganz bestimmt für ein Menü. Vertikale Ausrichtung mit Tabellen war ein Kinderspiel. Um Zellinhalte in der Mitte einer Zelle auszurichten, wurde das Attribut valign="middle" verwendet.

Eine vertikale Ausrichtung von Menülinks die in Tabellen angeordnet sind, war ein Kinderspiel. Um Zellinhalte in einer Zelle vertikal auszurichten, wurde das Attribut valign="middle" verwendet. Das funktionierte mit Textlinks und auch mit grafischen Elementen. Die vertikale Ausrichtung wurde also einfach mit "Mitte" fesgelegt.

Bei CSS-formatierten Menüstrukturen gibt es bei der vertikalen Ausrichtung manchmal Probleme (unter anderem auch abhängig von der Eintragung des Doc-Types der HTML-Seite).

Beispiel eines Menüs. Textlinks mit Hintergrundgrafiken, die bei MouseOver mittels CSS-Angaben ausgetauscht werden.

Eine vertikale Zentrierung ist nicht ganz so einfach, wenn Sie für ein Menü mit einem CSS-Layout arbeiten. Speziell wenn für die Menüelemente eine feste Höhe vorgegeben wurde, welche die normale Zeilenhöhe überschreitet (z.B. die Menüelemente sind 24 Pixel hoch, der Eintrag für die Texthöhe der Links 'font-size' ist 12 Pixel).


Zwar gibt es CSS-Anweisungen für eine vertikale Ausrichtung (vertical-align). Die bezieht sich aber auf die Textoberkante, die Mittellinie, die Basislinie oder die Textunterkante (eine Entlehnung aus dem Buchdruck), in Relation zu benachbarten Seitenelementen. Siehe css-alignment



   Der Trick mit 'line-height'

Angenommen, Sie haben eine Navigation, bei der Sie jedem Menüpunkt eine feste Höhe von 24 Pixel zugewiesen haben.

Die Zuweisung für die Höhe ist hier notwendig, weil als Hintergrund für jeden Menüpunkt eine Grafik mit dem Abmessungen 150 x 24 Pixel verewendet werden soll.



Versuch: Danach fügen Sie in der CSS-Regel eine vertikale Ausrichtung 'middle' hinzu. Ergebnis: Es wird grundsätzlich / in den meisten Fällen keinen Unterschied machen und der Textlink wird oben ausgerichtet sein. So erzielen Sie also nicht den gewünschten Effekt.

Die Lösung: Legen Sie für die Zeilenhöhe die gleiche Größenangabe fest, die Sie für die Höhe des Menüpunkts / der LinkBox gewählt haben. In diesem Beispiel ist der Link-Bereich 24 Pixel hoch. Tragen Sie also in die CSS-Regel des Textlinks für line-height den gleichen Wert: 24px. Der Text rückt nun in die Mitte der Box - perfekt!

<style type="text/css">
<!--

#Menue01 {
        width: 150px;
        overflow:hidden;
}


#navcont01 ul
{
        list-style-type: none;
        margin:0px;
        padding:0px;
}

#navcont01 a
{
        display: block;
        padding: 0px 0px 0px 15px;
        width: 150px;
        border-bottom: 1px solid #FFFFFF;
        height: 24px;
        line-height: 24px;
        }

#navcont01 a:link, #navcont01 a:visited
{
        font-family:Verdana,Arial,Helvetica,sans-serif;
        font-size:11px;
        font-weight: normal;
        color: #FFFFFF;
        text-decoration: none;
        background-image: url(31.gif);
}

#navcont01 a:hover
{
        font-family:Verdana,Arial,Helvetica,sans-serif;
        font-size:11px;
        font-weight: normal;
        color: #0054A8;
        background-image: url(34.gif);
}

-->
</style>

<div id="Menue01">
<div id="navcont01">
<ul>
<li><a href="dateiname.htm">Meerschweinchen</a></li>
<li><a href="dateiname.htm">Rennmäuse</a></li>
<li><a href="dateiname.htm">Hamster</a></li>
<li><a href="dateiname.htm">Leguane</a></li>
<li><a href="dateiname.htm">Schildkröten</a></li>
</ul>
</div>
</div>

line-height: 24px;

MINI-IMAGE-Box

Grafiken / Aufzählungszeichen vor Listelementen mit CSS

Grafiken / Aufzählungszeichen vor Listelementen mit HTML

farbige Bullets / Aufzählungszeichen mittels Sonderzeichen