Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

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">
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</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.

Element, das alle unsere Bereiche umfasst
Element, das alle unsere Bereiche umfasst

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.

festes 3-Spalten-Layout über CSS
festes 3-Spalten-Layout über CSS

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:

zentriertes 3-Spalten-Layout über margin: 0 auto;
zentriertes 3-Spalten-Layout über margin: 0 auto;

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.

Design wie Gedichtband
Bild: Design wie Gedichtband

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.

weitere eigene Projekte: