Zentriertes Layout - allgemeine Vorgehensweise
Im ersten Schritt erstellen wir ein zentriertes Layout. Rechts und links vom Inhalt kann dann entsprechend Hintergrund erscheinen – in unserem Beispiel der schräg verlaufende Schriftzug „Tübingen anders sehen“.
Bauen wir das zentrierte Layout Schritt für Schritt auf. Bisher haben wir gesehen, dass Blockelemente die komplette Breite einnehmen. Über CSS können wir mit der CSS-Anweisung width: eine Breite mitgeben. Diese Breite können wir absolut wie beispielsweise Pixel wie auch relativ in Prozent angeben.
Wir arbeiten in diesem Beispiel mit einer absoluten Angabe von Pixel. Geben wir nun als Breite width: 500px; an, sitzt das Blockelement immer noch auf der linken Seite. Es nutzt eine Breite von 500 Pixel. Damit dies sichtbar ist wird dem Blockelement eine Hintergrundfarbe mitgegeben.
Um das Blockelement nun zu zentrieren, gibt es die CSS-Anweisung margin: 0 auto;
Diese Anweisung ist die Kurzschreibweise von margin: 0 auto 0 auto;
Die Bedeutung ist:
- Halte oben (erster Wert) Abstand von 0
- Halte rechts (zweiter Wert) soviel Abstand, wie vorhanden ist
- Halte unten (dritter Wert) 0 Abstand
- Halte links (vierter Wert) soviel Abstand, wie vorhanden ist
Wird also durch die Angabe „auto“ der vorhandene Platz rechts und links aufgeteilt, sitzt unser Blockelement in der Mitte.
Anmerkung am Rande: in der Kurzschreibweise steht der erste Wert für oben und unten und der zweite Wert für rechts und links.
Und nun das Ganze als CSS-Code, in dem wir das Blockelement mit der ID „mittig“ zentrieren:
#mittig {
width: 500px;
margin: 0 auto;
background-color: orange;
}
Zentrieren für alte Internet-Explorer Versionen
Kleine Gemeinheit am Rande. Für alte Versionen des Internet-Explorers ist eine andere Vorgehensweise notwendig, die man aber parallel machen kann.
Damit bei alten IEs zentriert wird, wird über CSS dem body-Element ein text-align: center mitgegeben. Und damit nicht alles auch innerhalb des Blockes dann zentriert ist (wir wollen ja nur das Blockelement selber zentriert haben) wird der text-align dort wieder auf den normalen Wert left gestellt.
body {
text-align: center;
}
#mittig {
text-align: left;
width: 500px;
background-color: orange;
}
body {
text-align: center;
}
#mittig {
text-align: left;
width: 500px;
margin: 0 auto;
background-color: orange;
}
Es ist natürlich immer die Frage, wie weit man Rückwärtskompatibel sein möchte – sprich wie weit rückwärts alte IE-Versionen unterstützt werden soll.
Setzten wir das zentrierte Layout nun auf unser 2-Spalten-Projekt um
2-Spalten-Layout für unser Beispielprojekt
Im ersten Schritt erstellen wir unser übliches HTML-Grundgerüst.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>zentriertes Layout</title>
<link href="zentriert.css" rel="stylesheet">
</head>
<body>
<p>hier kommt der Inhalt</p>
</body>
</html>
Gleich als erstes wird die CSS-Datei erstellt und kontrolliert, ob die HTML-Datei Zugriff auf die CSS-Datei hat. Dies geschieht über das Einfärben des Hintergrunds von <p>. Die CSS-Datei bekommt den Namen „zentriert.css“, wie wir in der HTML-Datei bereits im HEAD-Bereich bei <link festgelegt haben und wird im selben Verzeichnis gespeichert, wie die HTML-Datei!
p {
background-color: yellow;
}
Wenn wir die HTML-Datei im Browser aufrufen, erhalten wir als Ergebnis eine gelb hinterlegte Zeile über die komplette Breite.
Für eine einfache Handhabung zum mittigen Ausrichten packen wir unseren Inhalt (auch wenn es bisher nur ein Absatz ist) in einen eigenständigen Bereich (sprich div). Hier ist eine übliche Benennung dafür „wrapper“. Dieser Bereich umschließt unseren Inhalt.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>zentriertes Layout</title>
<link href="zentriert.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<p>hier kommt der Inhalt</p>
</div>
</body>
</html>
Unser CSS wird auch mit einer Hintergrundfarbe Orange für den #wrapper ergänzt und die Hintergrundfarbe für Absätze wird herausgenommen.
#wrapper {
background-color: orange;
}
Damit wir den Bereich mittig ausrichtig können, darf dieser nicht die komplette Breite einnehmen. Deshalb wird unserem Bereich #wrapper eine Breite mitgegeben und für die mittige Ausrichtung margin: 0 auto;.
#wrapper {
background-color: orange;
width: 300px;
margin: 0 auto;
}
Der Vollständigkeit halber für alte IE-Versionen folgende Ergänzung:
body {
text-align: center;
}
#wrapper {
text-align: left;
background-color: orange;
width: 300px;
margin: 0 auto;
}
Das ist der übliche Weg um zentriertes Webdesign zu machen. Meistens wird man auf Breiten von 900 Pixel bzw. 960 Pixel. Das rührt von vielen alten Monitoren mit 1024 Pixel.
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
-
