XHTML SVG CSS PHP

Dr. O. Hoffmann

CSS-Layout

Das Schöne tut seine Wirkung schon bei der bloßen Betrachtung, das Wahre will Studium.
Johann Christoph Friedrich von Schiller

Objekte zentrieren

Inzeilige Elemente wie Text, Bilder, das Element span, Verweise können mittels text-align: center relativ zum umgebenden Blockelement horizontal zentriert werden. Blockelemente wie Überschriften werden damit nicht direkt zentriert, sondern nur ihr Inhalt, sofern es sich um inzeilige Elemente handelt.

Das horizontale Zentrieren von Blockelementen wie Überschriften, Listen oder div-Elementen ist recht einfach - dazu ist nur margin-left: auto und margin-right: auto anzugeben.
Relevant ist das natürlich nur, wenn das Objekt eine definierte Breite hat, dazu dienen die Eigenschaften width oder max-width - in der Regel mit Maßangaben in em oder Prozent.
Beispiel: Horizontales Zentrieren
Der Text wird bereits im Element body zentriert, ein Element div mit der Breite 20em wird horizontal zentriert. Die Rahmen der Elemente body und div sind jeweils mit einem Titelattribut und einem dünnen Rahmen ausgestattet, damit festgestellt werden kann, wo sich was befindet.
Erfolgreich getestet mit: Konqueror 2.2 und 3.2, Opera 7.54, 8, 9, Mozilla/Gecko 1.5, Netscape 4.75, microsoft-internet-explorer 6 (msie), Amaya 8.2.
Probleme: Netscape4 zentriert das Blockelement, aber übernimmt nicht das text-align vom body (hier bereits durch erneute Angabe kompensiert, wäre für die anderen überflüssig).

Eine andere Möglichkeit ergibt sich natürlich, wenn für margin-left und margin-right der gleiche Wert angegeben wird.

Vertikales Zentrieren ist hingegen nur für Tabellen vorgesehen oder für Elemente mit einer Tabellenformatierung display: table, table-row, table-cell.

Liegt ein Element mit einer definierten Höhe vor, kann innerhalb dieses Elementes ein weiteres relativ leicht vertikal zentriert werden. Dazu wird das zu zentrierende Element mit dem CSS-Attribut display: table-cell und mit vertical-align: middle ausgezeichnet. Das umgebende Element bekommt die Eigenschaft display: table.
Beispiel: Test: Zentrieren mit tabellenartigen Attributen 1
Der Inhaltskasten (violetter Rahmen) sollte relativ zur div-Bereich table (brauner Rahmen) zentriert sein. Um zu verstehen, welches Darstellungsprogramm welches Anzeigemodell hat, ist die Farbe des Hintergrundes für das Element html gelblich, die für das Element body violett und für div der Klasse table nahezu weiß. Die Elemente in diesem Bereich sind mit Rahmen gekennzeichnet.
Erfolgreich getestet mit: Konqueror 2.2, 3.2 und 3.3, Opera 7, 8, 9, Mozilla/Gecko 1.5, 1.8
Diverse Probleme mit Netscape 4.75, Amaya 8.2, microsoft-internet-explorer 6, aber der Inhalt bleibt zugänglich. Amaya und der internet-explorer ignorieren vor allem Angaben zur Höhe, bereiten sonst aber keine Probleme.

Das Element div der Klasse table versuche ich ferner relativ zum Anzeigebreich des Darstellungsprogrammes mit margin-top zu zentrieren, dabei sind html und body zu 100% definiert.
Das klappt so bei keinem Programm perfekt - warum, weiß ich nicht. In den nächsten Beispielen dazu mehr.

Die Ursache aller Probleme des vertikalen Zentrierens relativ zum Anzeigebereich des Darstellungsprogrammes liegt bereits in der Spezifikation begraben. Oder wenn man so will, im Anspruch des vertikalen Zentrierers im Medium XHTML, das ja an sich ein Fließtext-Medium ist, dessen Höhe von dargestellten Elementen also durch deren Inhalt bestimmt wird. Eine Höhe ergibt nur in Ausnahmefällen in so einem Medium einen Sinn. Wenn ein Autor wirklich volle Kontrolle über die Positionierung von Inhalten benötigt, ist eher ein Format wie SVG angemessen, nicht XHTML, weil es ein dafür geeignetes Modell aufweist. (X)HTML hat gegenüber anderen Formaten ohnehin historische Probleme, die teilweise auch mit Sonderregeln in CSS zum Ausdruck kommen.

Bei graphischen Darstellungsprogrammen ist die Korrelation zwischen dem Anzeigebereich und den Abmessungen der Elemente html oder body nicht eindeutig festgelegt. Zudem kann dies für HTML und XHTML (XML) unterschiedlich sein. Während allgemeine Übereinstimmung darin besteht, daß hundert Prozent Breite von html dem Anzeigebereich entspricht, sind die Modelle für die Höhe uneinheitlich oder im Falle des Programmes microsoft internet explorer (msie) vermutlich gar nicht definiert.
Für Opera sieht es so aus, als entspreche hundert Prozent Höhe von html dem Anzeigebereich. Beim Mozilla/Gecko ist dies ebenso und auch beim Konqueror. Der msie kann offenbar den Bereich für html selbst gar nicht darstellen.
Jetzt sollte eigentlich für die drei ersten Programme klar sein, was jeweils hundert Prozent für body bedeutet - das sollte identisch mit dem Bereich für html sein. Konqueror (getestet mit Version 3.2) ist aber anderer Meinung und beendet body vertikal direkt nach dem Inhalt derselben und dehnt sie nicht bis zur Ende von html aus. Das macht vertikales Zentrieren relativ zum Element html des Konquerors 3.2 unmöglich, nicht jedoch zu seinem Anzeigebereich. Der msie verhält sich noch widersprüchlicher - er dehnt zwar body über den ganzen Anzeigebereich aus, verweigert aber trotzdem ähnlich dem Konqueror den Zugriff auf den Teil von body unterhalb des Inhaltes. Das macht vertikales Zentrieren relativ zum Anzeigebereich beim msie eigentlich ganz unmöglich, bei Prozentangaben hat er aber eine Überraschung parat, was wiederum das Verhalten dieses Programmes komplett unvorhersehbar erscheinen läßt.

Bei den folgenden Beispielen sind die einzelnen Elemente sowohl mit einem geeigneten Attribut title ausgestattet als auch mit einem farbigen Rahmen. Bedingt durch die endliche Breite der Rahmen kann es zu kleinen Ungenauigkeiten von der Größenordnung der Rahmendicke kommen, die ohne Rahmen nicht auftreten sollten.
Farben (Rahmen/Hintergrund): cyan/rosa - html; blau/gelbweiß - body; grün - div der Klasse viewport (nur erstes Beispiel), diese hat eine feste Größe von 30em und ist vertikal nicht zentriert, alles andere sollte zentriert sein. Innerhalb dieses Elementes div befinden sich die Elemente div mit Tabellenanzeige und darin mit violettem Rand zentriert das Element div mit dem Inhalt. Je nach Position der Maus innerhalb der tabellenartigen Elementes div wird der Text zentriert, links- oder rechtsbündig angezeigt.
Beispiel:
Test: Zentrieren mit tabellenartigen Attributen 2
Erfolgreich getestet mit: Konqueror 2.2, 3.2 und 3.3, Opera 7, 8, 9, Mozilla/Gecko 1.5, 1.8.
Diverse Probleme mit Netscape 4.75, Amaya 8.2, microsoft-internet-explorer 6, aber der Inhalt bleibt zugänglich.
Zentrieren des Bereiches 'table' relativ zu 'viewport' erfolgreich getestet mit: Konqueror 2.2, 3.2 und 3.3, Opera 7, 8, 9, Mozilla/Gecko 1.5, 1.8
Weitere Zentrierungsversuche dieses Bereiches 'viewport' zum body oder dem Anzeigebereich des Darstellungsprogrammes klappten aber wieder nicht perfekt, dafür ist offenbar anders vorzugehen.

Beim nächsten Beispiel findet die Zentrierung über die Festlegung der Außenrandabstände statt und verwendet Absolutpositionierung, bei der sich Opera, Mozilla und Konqueror allerdings einig sind, daß die Positionierung relativ zum Anzeigebereich zu erfolgen hat. Folglich treten keine Probleme mit der Zentrierung auf. Anders beim msie, dessen Fehler hier abgefangen werden müssen, damit der Inhalt überhaupt noch angezeigt wird.
Man beachte wieder die unterschiedliche Interpretation des Bereichs html und von body bei den verschiedenen Programmen - die in diesem Falle allerdings mit Ausnahme des msie keine Rolle spielt.
Beispiel:
Test Zentrieren durch Festlegung des Außenabstandes
Erfolgreich getestet mit: Konqueror 3.2, 3.3, Opera 7, 8, 9, Mozilla/Gecko 1.5, 1.8
Probleme mit Konqueror 2.2, Netscape 4.75, Amaya 8.2, msie6, Inhalt bleibt aber zugänglich.

Weitere Beispiele, mit Konqueror 3.2, Mozilla und Opera erfolgreich getestet, für die anderen zugänglich (gemacht):
Test: Zentrieren mit Absolutpositionierung in %
Test: Zentrieren mit Absolutpositionierung in em
Test: Zentrieren mit fixed-Positionierung in %
Test: Zentrieren mit fixed-Positionierung in em

Eine weitere Möglichkeit ergibt sich, wenn die Abmessungen in Höhe und Breite (zum Beispiel jeweils 22em) für ein Objekt festgelegt sind. Dann kann man es einfach mit position: absolute; top: 50%; left: 50%; height: 22em; width: 22em; margin-top: -11em; margin-left: -11em; overflow: auto; zentrieren.
Das mit 'box' bezeichnete Element div wird in dem Beispiel zentriert.
Um abgeschnittenen oder überstehenden Inhalt zu vermeiden, wurde noch overflow: auto gesetzt.
Die Methode eignet sich allerdings nur für Objekte, die garantiert kleiner als der Anzeigebereich sind, sonst wird es spannend, wie das Programm den Konflikt löst.
Da nur CSS-Anweisungen verwendet werden, die schon lange von Darstellungsprogrammen beherrscht werden, gibt es hier die wenigsten Kompatibilitätsprobleme, sollte man meinen, aber bei Amaya 8.2 und dem alten Konqueror 2.2 wird der Inhalt so unzugänglich. Das dürfte vermutlich am negativen margin liegen, der von diesen falsch interpretiert wird, obgleich dies erlaubt ist.
Beispiel:
Test: Zentrieren mit absoluter Positionierung und negativem Außenabstand
Erfolgreich getestet mit: Konqueror 3.2, Opera 7.54, Mozilla/Gecko 1.5, msie 6.
Probleme mit Konqueror 2.2 und Amaya 8.2 (ohne folgende Korrektur unlesbar!), Netscape 4.75 (alles bleibt lesbar)
Indem die negativen Angaben zu margin in einen speziellen Selektor div.box[class] gesetzt werden, den die beiden nicht kennen, wird der Inhalt wieder lesbar gemacht. Da der msie diesen aber auch nicht kennt, muß das für den wieder rückgängig gemacht werden, daher wird für den ein gesonderter CSS-Bereich mit diesen Angaben wieder angehängt.

Schön ist das besonders bei den alten Programmen alles noch nicht, aber mit Mühe handhabbar.
Mit ähnlichen Tricks sind natürlich auch andere Positionierungen möglich, etwa nach dem goldenen Schnitt oder sonstigen ästhetischen Gesichtspunkten.
Test fixed-Positionierung mit Werten aus dem Goldenen Schnitt,
mit Konqueror 3.2, Mozilla und Opera erfolgreich getestet, für die anderen zugänglich (gemacht).