Die Seite zentrieren

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Als Erstes zentrieren wir die Seite und legen ihre Breite fest. Dazu müssen wir ein weiteres div-Element einfügen, in das die gesamte Seite eingebettet wird. Dieses neue div-Element nennen wir #wrapper und öffnen es unmittelbar nach dem öffnenden <body>-Tag und schließen es wieder vor dem schließenden </body>-Tag.

<body>
  <div id="wrapper">
    <div id="header">
     ...
    </div> <!-- content -->
  </div> <!-- wrapper --> 
</body>

Erstellen Sie jetzt ein externes Stylesheet, in das Sie die folgenden CSS-Regeln einfügen und unter dem Namen fixedwidth.css speichern.

body {
  margin: 0;
  padding: 0;
  text-align: center;
  min-width: 740px;
}
#wrapper {
  text-align: left;
  width: 740px;
  margin-left: auto;
  margin-right: auto;
}

Mehr brauchen Sie nicht, um die Breite der Seite festzulegen und ihre Inhalte zu zentrieren. Diese Regeln werden wir nun Schritt für Schritt durchgehen.

Die erste Regel betrifft das body-Element. Seine Außen- und Innenränder werden entfernt und die Mindestbreite des Layouts wird mit 740 Pixel angegeben. Außerdem wird die Ausrichtung des Textes auf den Wert center gesetzt.

Danach fügen wir eine Regel für das neue Element #wrapper ein, um das wir gerade unser Dokument erweitert haben. Für dieses Element setzen wir den rechten und linken Außenrand auf den Wert auto und die Breite ebenfalls auf 740 Pixel. Wenn Sie die Breite des Layouts ändern möchten, sollten Sie die Werte für width in beiden Regeln ändern. 740 Pixel ist eine gute Breite, da links und rechts der Hintergrund durchscheint, selbst dann, wenn der Benutzer eine Bildschirmauflösung von 800×600 Pixeln hat.

Wenn Sie das Dokument jetzt im Browser anschauen, sollten die Inhalte im Browserfenster 740 Pixel breit und zentriert angezeigt werden.

Wir werden nun der body-Regel ein paar weitere Deklarationen hinzufügen, um Hintergrundbild und -farbe einzufügen, so wie in unserem grafischen Entwurf vorgegeben.

body {
  margin: 0;
  padding: 0;
  text-align: center;
  min-width: 740px;
  background-color: #050845;
  color: white;
  background-image: url(img/bg.jpg);
  background-repeat: repeat-x;
  font: small Arial, Helvetica, Verdana, sans-serif;
}

Damit haben wir sowohl die Hintergrundfarbe als auch das Hintergrundbild eingefügt, genauso wie zuvor bei unseren dynamischen Layouts. Der Text wird in einer kleinen serifenlosen Schrift angezeigt.

Im Moment wird das Hintergrundbild auf der gesamten Seite angezeigt. Deshalb werden wir die Hintergrundfarbe des Inhaltsbereichs im div-Element #wrapper heller und besser lesbar gestalten, sodass der Hintergrund nur um den Inhaltsbereich herum angezeigt wird.

#wrapper {
  text-align: left;
  width: 740px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fdf8f2;
  color: #01407a;
  padding: 10px;
}

In der obigen Stilregel habe ich auch einen Innenrand mit 10 Pixeln definiert, der einen Abstand zwischen den div-Elementen #wrapper und #content erzeugt. In der folgenden Abbildung sehen Sie, wie die Seite zum jetzigen Zeitpunkt aussieht.

Mit dem Hintergrundbild nimmt die Seite langsam Gestalt an

Abbildung: Mit dem Hintergrundbild nimmt die Seite langsam Gestalt an.

Die Kopfleiste

Die Kopfleiste dieses Layouts ist sehr einfach. Sie enthält nur das Logo und eine Titelzeile. Das Logo ist allein schon durch den normalen Textfluss des Dokuments am richtigen Platz, sodass wir direkt zur Formatierung der Titelzeile, die unterhalb des Logos angezeigt wird, schreiten können. Wir benutzen dazu die folgende Stilregel:

#tagline {
  font-weight: bold;
  color: #050845;
  font-style: italic;
  margin: 0 0 0.5em 0;
  padding: 0 0 0 20px;
}

Beachten Sie, dass Sie dem öffnenden <p>-Tag der Titelzeile das Attribut id="tagline" zuordnen müssen.

Mit dieser Regel wird die Schrift auf eine dunkelblaue, fette und kursive Darstellung gesetzt. Am unteren Ende fügen wir einen Außenrand hinzu, der uns ein wenig Abstand unterhalb der Titelzeile schafft. Auf der linken Seite fügen wir mit padding einen Innenrand hinzu, sodass die Titelzeile unterhalb des Logos platziert wird. Das Ergebnis unserer Arbeit sehen Sie in der folgenden Abbildung.

Die fertig formatierte Kopfleiste

Abbildung: Die fertig formatierte Kopfleiste.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg