Zentriertes Layout über CSS
Im letzten Kapitel haben wir unser 3-Spalten-Layout bereits erstellt. Dieses wollen wir jetzt zentrieren. Daher ist unsere Zielsetzung ein zentriertes Layout mit einer festen Breite.
Bisher nimmt unser Inhalt die komplette Breite ein. Damit wir überhaupt ein zentriertes Layout erstellen können, müssen wir unserem Inhalt eine Breite mitgeben. Dabei empfiehlt es sich eine Auflösung zu nutzen, die verbreitet ist. Nehmen wir an, dass der Großteil der Geräte mindestens eine Auflösung in der Breite von 1024 Pixel haben, können wir problemlos eine schmalere Breite nutzen. Exakt 1024 Pixel funktioniert nicht, da die meisten Browser auch ein paar Pixel für die Scroll-Leiste und Ihren Rahmen verbrauchen. Daher im Folgenden 900 Pixel Breite.
Der Inhalt wird nun auf 900 Pixel Breite festgenagelt. Dazu packen wir den HTML-Bereich in einen „Container“, der den kompletten Inhalt umschließt. Dieses DIV-Element bekommt als ID-Name wrapper.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Fennek und seine Umwelt - Beispielseite HTML5</title>
<meta charset="UTF-8">
<link href="design.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
...
<!-- hier kommt der komplette Inhalt -->
...
</footer>
</div>
</body>
</html>
In unserer CSS-Datei legen wir nun auch für den ID-Selektor wrapper einen Bereich mit Hintergrundfarbe an:
#wrapper {
background-color: #FF55FF;
}
Schauen wir uns das Ergebnis im Browser an, sehen wird das pink durchblitzen. Es umschließt alle Elemente, bzw. es liegt hinter diesen Elementen.
Jetzt können wir dem Bereich wrapper noch eine Breite mitgeben. Zusätzlich bekommt der Bereich einen Rahmen mit. Allerdings muss man bei Rahmen immer aufpassen, da diese auch Platz benötigen. Durch den Rahmen haben wir einen Platzbedarf von 900 + 2 + 2 = 904 Pixel. Allerdings können wir die grausame Hintergrundfarbe nun durch ein grau ersetzen.
#wrapper {
background-color: #eeeeee;
width: 900px;
border: 2px solid red;
}
Nun haben wir unseren Bereich erstellt, der allerdings noch nicht mittig ausgerichtet ist. Zur Demonstration verkleinere ich die Anzeige im Browser auf 50% (bei den meisten Browsern einfach die STRG-Taste und die Plus- bzw. Minus-Taste drücken) oder im entsprechenden Menü einstellen.
Mittiges Layout über CSS erstellen
Für unser mittiges Layout geben wir dem Wrapper die Information mit, dass dieser einen Außenabstand einhält. Hierzu wird die CSS-Anweisung margin verwenden. Von oben wollen wir 0 Pixel – und links und rechts soll einfach der verfügbare Platz gleichmäßig aufgeteilt werden. Dazu kann bei margin der Wert auto verwendet werden. Dadurch wird der verfügbare Platz gleichmäßig verteilt, egal wie breit das Browserfenster ist.
#wrapper {
background-color: #eeeeee;
width: 900px;
border: 2px solid red;
margin: 0 auto;
}
Wir haben dann fast schon unser zentriertes Layout:
Allerdings erhalten wir nur bei modernen Browser das zentrierte Layout. Alte Knochen (auch die Vorschau von Scriptly, der den alten Internet-Explorer für die Vorschau nutzt) zentrieren unsere Website noch nicht. Diese benötigen die Angaben text-align: center; im CSS im Bereich body
body {
text-align: center;
}
header, nav, footer, aside, section {
display: block;
}
#wrapper {
background-color: #eeeeee;
width: 900px;
border: 2px solid red;
margin: 0 auto;
}
Jetzt funktioniert es auch in alten Browsern. Allerdings sieht unsere Website nun aus wie ein Gedichtband, da der komplette Text zentriert dargestellt wird.
Und deshalb wird noch ein weiterer Schritt notwendig, um diese Zentrierung wieder aufzuheben. Wir geben dem Wrapper mit, dass seine Inhalte normal linksbündig dargestellt werden.
body {
text-align: center;
}
header, nav, footer, aside, section {
display: block;
}
#wrapper {
background-color: #eeeeee;
width: 900px;
border: 2px solid red;
margin: 0 auto;
text-align: left;
}
Somit haben wir ein zentriertes, dreispaltiges Layout erstellt. Jetzt geht es an das Ausfeilen.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
