in den newslettern erschienene artikel

[prefix]

nl 18: das zusammenspiel zwischen xhtml und css -> zum artikel

nl 19: formatierungsmöglichkeiten für hyperlinks (strichlierter unterstrich) -> zum artikel

nl 20: formatierungsmöglichkeiten für hyperlinks (symbole, hintergründe) -> zum artikel

nl 22: "vertical-align" - anwendungsbeispiele (nicht am portal, daher als antwort folgend der artikel)

to be continued

[prefix]

hier mein artikel über "vertical-align" vom nl 22:

Die CSS-Eigenschaft "vertical-align" - Die vertikale Ausrichtung von Elementen

Da es immer wieder Fragen zu dieser bzw. Probleme mit dieser Thematik gibt, möchte ich die CSS-Eigenschaft "vertical-align" einmal etwas ausführlicher behandeln.

Die CSS2-Spezifikation sagt darüber folgendes:

Wie im Abschnitt über Inline-Formatierungskontexte (9.4.2) beschrieben, führen Benutzerprogramme Inline-Boxen zu einem vertikalen Stapel aus Zeilen-Boxen zusammen. Die Höhe einer Zeilen-Box wird wie folgt ermittelt:

1. Die Höhe jeder Inline-Box in der Zeilen-Box wird berechnet (siehe Abschnitt 10.6, „Höhen und Ränder berechnen“, und die Beschreibung der 'line-height'-Eigenschaft).
2. Die Inline-Boxen werden vertikal gemäß ihrer 'vertical-align'-Eigenschaft ausgerichtet.
3. Die Höhe der Zeilen-Box ist der Abstand zwischen der oberen Kante der obersten Box und der unteren Kante der untersten Box.

Leere einzeilige Elemente erzeugen leere Inline-Boxen, aber diese Boxen haben dennoch Ränder, Auffüllung, Rahmen und eine Zeilenhöhe und beeinflussen damit diese Berechnungen genauso wie Elemente mit Inhalt.

Beachten Sie, dass die Zeilen-Box genau die Höhe der höchsten Box hat, wenn alle Boxen in der Zeilen-Box ihrer unteren Kante nach ausgerichtet sind. Sind die Boxen dagegen entlang einer gemeinsamen Grundlinie ausgerichtet, kann es sein, dass die obere und untere Kante der Zeilen-Box die untere und obere Kante der höchsten Box nicht berühren.

Was bedeutet das nun in der Praxis??

Ich hab das mal anhand dieses Beispieles verdeutlicht!

Die CSS-Definitionen sehen wie folgt aus:

.beispiel1 {
height: 200px;
width: 500px;
background-color: red;
color: white;
vertical-align: middle;
}

.beispiel2 {
height: 200px;
width: 500px;
background-color: yellow;
vertical-align: middle;
line-height: 200px;
}

td {
height: 40px;
border: 1px solid black;
vertical-align: top;
}

Ich gebe der Klasse "beispiel1" nur ein "vertical-align", der Klasse "beispiel2" zusätzlich ein "line-height" und einer Tabellenzelle (td) ebenfalls nur ein "vertical-align" mit!

Die Einbindung in XHTML 1.0 sieht wie folgt aus:

[...]
< body>
< div class="beispiel1">Ohne Angabe von line-height</div>
< p>Beispiel 2:</p>
< div class="beispiel2">Mit Angabe von line-height</div>
< p>Beispiel 3:</p>
< table width="500" cellspacing="0" cellpadding="0">
< tr>
< td>Hier ben&ouml;tigt man</td>
< td>keine Definition</td>
< /tr>
< tr>
< td>von</td>
< td>line-height</td>
< /tr>
< /table>
< /body>
[...]

Bei der Darstellung kann man nun erkennen, dass:

Beispiel 1 die Definition für "vertical-align" ignoriert - der Text wird oben ausgerichtet, wie das Standard für Container ist;

Beispiel 2 aufgrund der zusätzlichen Definition der "line-height" (gleich hoch wie der Container) den Text korrekt "middle" positioniert! Dies ist jedoch nur "scheinbar" die richtige Interpretation, da "vertical-align" nur auf Inline-Elemente angewendet werden kann;

Beispiel 3 den Text ebenfalls korrekt vertikal oben ausrichtet, allerdings ohne dass es hier einer Defintion der Zeilenhöhe bedarf. (Standardmäßig wird der Text in Tabellenzellen mittig ausgerichtet)

Der Grund liegt darin, dass eine Tabellenzelle im Gegensatz zu einem Container eben nur die Definition "vertical-align" benötigt, nicht aber jene der Zeilenhöhe!

Die hier angeführten Beispiele in folgenden Browsern getestet:

- Internet Explorer 6 / Win
- Mozilla Firebird 0.7 / Win
- Netscape 7.0 / Win
- Opera 7.0 / Win
- IE 5.0 / Mac
- Safari / Mac
- Camino / Mac
- Mozilla Firebird / Mac

Fazit: Vertical-Align funktioniert nur einwandfrei, wenn man dieses auf Tabellenzellen anwendet! Container (Block-Level-Elemente) sind somit nur "scheinbar" damit handelbar!