Aufbau eines zentrierten Seitenlayouts mit CSS

Zentrierte Seitenlayouts basieren oft auf einer Tabelle von 800 Pixeln Breite die dann auf einer Seite von 1024 Pixeln Breite zentriert wird. Interessant ist die Frage, wie man diesen Effekt auch mit CSS erreichen kann.

Die grundlegende Technik zum Erzeugen eines zentrierten Layouts in CSS ist relativ einfach, wenn auch nicht ganz nahe liegend. Was also muss man tun, um dieses alte Versatzstück aus einem tabellenorientierten Layout in CSS zu überführen?

Zentrierte Layouts mit herkömmlichen Verfahren

Zum Vergleich hier zunächst ein Beispiel für ein Seitenlayout, das auf einer zentrierten Tabelle beruht. Der folgende Code erzeugt das in Abbildung A gezeigte Beispiel:

Der Tag <table> enthält Attribute, die die Breite auf 80 Prozent der Seitenbreite festlegen und die Tabelle auf der Seite zentrieren. Ein leerer Absatz vor der Tabelle sorgt für einen vertikalen Abstand zwischen dem oberen Seitenrand und dem oberen Rand der Tabelle. Ein weiterer leerer Absatz nach der Tabelle erfüllt dieselbe Funktion am unteren Seitenrand. Die Tabelle selbst enthält zwei Spalten und drei Zeilen mit Zellen. Die Zellen in der oberen und der unteren Zeile wurden jeweils miteinander verbunden, um Flächen für Header und Footer zu schaffen, während die Zellen in der mittleren Zeile zwei Spalten bilden – eine für den Hauptinhalt und eine weitere für eine Seitenleiste.

Dies ist ein sehr einfaches Bespiel für ein Verfahren, das bereits seit Jahren weit verbreitet ist. In der realen Anwendung sind in die Haupttabelle gewöhnlich weitere Tabellen eingebettet, wodurch sich ein komplexeres Layout ergibt. Die höhere Komplexität ändert aber nichts an dem zugrunde liegenden Verfahren.

Page: 1 2 3

ZDNet.de Redaktion

Recent Posts

Gefahren im Foxit PDF-Reader

Check Point warnt vor offener Schwachstelle, die derzeit von Hackern für Phishing ausgenutzt wird.

2 Tagen ago

Bitdefender entdeckt Sicherheitslücken in Überwachungskameras

Video-Babyphones sind ebenfalls betroffen. Cyberkriminelle nehmen vermehrt IoT-Hardware ins Visier.

2 Tagen ago

Top-Malware in Deutschland: CloudEye zurück an der Spitze

Der Downloader hat hierzulande im April einen Anteil von 18,58 Prozent. Im Bereich Ransomware ist…

2 Tagen ago

Podcast: „Die Zero Trust-Architektur ist gekommen, um zu bleiben“

Unternehmen greifen von überall aus auf die Cloud und Applikationen zu. Dementsprechend reicht das Burg-Prinzip…

3 Tagen ago

Google schließt weitere Zero-Day-Lücke in Chrome

Hacker nutzen eine jetzt gepatchte Schwachstelle im Google-Browser bereits aktiv aus. Die neue Chrome-Version stopft…

3 Tagen ago

Hacker greifen Zero-Day-Lücke in Windows mit Banking-Trojaner QakBot an

Microsoft bietet seit Anfang der Woche einen Patch für die Lücke. Kaspersky-Forscher gehen davon aus,…

3 Tagen ago