SELFHTML aktuell Artikel CSS
CSS:
Ausrichtung von Block-Level-Elementen
Carsten Protsch
Hinweise zum Thema
Beispiel mit Erläuterungen
Weiterführende Links
| SELFHTML aktuell Artikel CSS | |
|
CSS:
|
|
|
| |
| E-Mail: |  c.protsch@gmx.de |
|---|
Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!
Das HTML-Attribut align zur Ausrichtung von HTML-Elementen wurde für die meisten Elemente vom W3-Konsortium als deprecated eingestuft, wird also in zukünftigen HTML-Versionen nicht mehr enthalten sein und sollte daher nicht mehr verwendet werden. Daher wird häufig die Frage gestellt, wie man mit Hilfe von cascading Stylesheets eine Ausrichtung erreichen kann.
Um den Inhalt eines Block-Level-Elements, zum Beispiel den Textfluss innerhalb eines Absatzes, auszurichten, benutzen Sie die CSS-Eigenschaft 
text-align. Wie richtet man aber ein Block-Level-Element selbst aus? In manchen Browsern kann man dies ebenfalls mit text-align erreichen, was bei korrekter Auslegung der W3C-Standards allerdings falsch ist. Browser wie Netscape 6.x, Mozilla oder Opera werden daher solche Versuche ignorieren. Bei standardkonformer Interpretation des Codes richtet sich die Ausrichtung eines Block-Level-Elements nach dem CSS Box Modell. Dabei gilt die folgende "Gleichung":
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = Breite des übergeordneten Elements
Erhält eine dieser Eigenschaften, z.B. margin-left, bei gegebenen Werten der übrigen Eigenschaften den Wert auto, so ergibt sich der berechnete Wert aus der obigen Gleichung. Wird der Wert auto sowohl margin-left als auch margin-right zugewiesen, so sind die berechneten Werte für beide Seitenränder gleich groß. Wie sich dies auf die Darstellung auswirkt, sollen die nachfolgenden Beispiele verdeutlichen.
Das erste Beispiel im folgenden Abschnitt erläutert das Vorgehen für aktuelle Browser. Im zweiten Beispiel wird ein Work-Around für ältere Browser gezeigt.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
body { min-width:350px; background-color:white; }
h1 { margin-left:auto; margin-right:auto; text-align:right; width:350px; background-color:#FFDDDD; }
p { margin-left:auto; margin-right:0; text-align:justify; width:80%; background-color:#FFFFE0; border:none; }
table { margin-left:auto; margin-right:auto; background-color:#DDEEFF; border: solid 1px black; }
td { border: solid 1px black; }
-->
</style>
</head>
<body>
<h1>Ausrichtung von Block-Level-Elementen</h1>
<!--usw.-->
</body>
</html>
Mit margin können Block-Level-Elemente ausgerichtet werden. Folgende Angaben sind möglich:
margin-left:0; margin-right:auto; = linksbündig ausrichten (Voreinstellung).
margin-left:auto; margin-right:auto; = zentriert ausrichten.
margin-left:auto; margin-right:0; = rechtsbündig ausrichten.
Die Angabe einer Mindestweite min-width für ein übergeordnetes Element, in diesem Beispiel body, ist notwendig, da sonst bei kleinen Fenstergrößen Inhalte abgeschnitten werden, ohne dass die erforderlichen Scrollbalken erscheinen.
Netscape 4.x und der Internet Explorer 5.x interpretieren diese Angaben nicht, der Internet Explorer 6 nur, wenn er sich im standards-compliant Mode befindet (
Microsoft: !DOCTYPE "Switch" im IE 6). Ein Work-Around für diese Browser findet sich im zweiten Beispiel.
Bei einer links- oder rechtsbündigen Ausrichtung einer Tabelle mittels HTML nehmen nachfolgende Inhalte den nicht beanspruchten Platz ein und umfließen die Tabelle. Um dieses Verhalten auch mit CSS zu erreichen, muss die CSS-Eigenschaft float benutzt werden.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
body { min-width:350px; background-color:white; }
div.center { text-align:center; }
div.right { text-align:right; }
div.center h1 { margin-left:auto; margin-right:auto; text-align:right; width:350px; background-color:#FFDDDD; }
div.right p { margin-left:auto; margin-right:0; text-align:justify; width:80%; background-color:#FFFFE0; border:none; }
div.center table { margin-left:auto; margin-right:auto; text-align:left; background-color:#DDEEFF; border: solid 1px black; }
td { border: solid 1px black; }
-->
</style>
</head>
<body>
<div class="center">
<h1>Ausrichtung von Block-Level-Elementen</h1>
</div>
<!--usw.-->
</body>
</html>
Damit dieser Work-Around auch für aktuelle Browser Verwendung finden kann, bildet die Ausrichtung mit margin weiterhin den Kern. Zusätzlich wird um die auszurichtenden Elemente ein div-Bereich gelegt, dem mit text-align die gewünschte Ausrichtung zugewiesen wird. Da bei aktuellen Browsern nun der Inhalt selbst entsprechend ausgerichtet wird, muss mit einem weiteren text-align im Element selbst die Textausrichtung bestimmt werden. Um bei der Gestaltung des Codes flexibel zu sein, werden zusätzlich CSS-Klassen benutzt.
Netscape 4.x interpretiert nur die Angaben für die Tabelle.
Die folgenden Stellen werden empfohlen, um das obige Beispiel besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.
W3C: Breiten- und Abstandsbestimmung
W3C: Die CSS-Eigenschaft 'text-align'