Das Layout aufbauen

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

Wir haben nun einiges Hintergrundwissen darüber, wie Elemente sich verhalten, wenn sie mit CSS positioniert werden. Mit unserem ersten Layout können wir das Gelernte jetzt in die Praxis umsetzen.

Erzeugen Sie nun ein neues Stylesheet und speichern es unter dem Namen styles.css. Dann verlinken Sie es mit dem zuvor erzeugten Footbag-Freaks-Dokument (index.html), das wir bereits erstellt haben (siehe Das Dokument erzeugen). Fügen Sie dazu die folgenden Zeilen im <head>-Element der Footbag-Freaks-Seite ein:

<head>
  <title>Footbag Freaks</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

Das erste Element, dem wir CSS-Eigenschaften zuweisen wollen, ist das body-Element. Im Entwurf ist ein Hintergrundbild vorgesehen, das anfangs ein Muster hat, welches nach und nach verblasst und in ein kräftiges Blau übergeht. Um diesen Effekt auf unserer Seite nachzubilden, binden wir das Bild als Hintergrundkachel ein und färben die Seite blau ein. Auf diese Weise verschmilzt das Bild mit dem blauen Hintergrund der Seite.

Mit den folgenden Stilregeln wählen wir eine Schriftfamilie und -größe und setzen die Innen- und Außenränder der Seite (den Abstand zwischen dem Rand des Browserfensters und den Inhalten der Seite) auf 0.

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

Die Schriftgröße in Footbag Freaks
Ich habe der Eigenschaft font-size im body-Element das Schlüsselwort small zugewiesen. Während wir das Stylesheet weiterentwickeln, werden wir Prozentwerte für Schriftgrößen verwenden und damit die Größe der Elemente prozentual an dem Wert small ausrichten.

Mit den obigen Regeln wird das Hintergrundbild über die gesamte Breite der Seite gekachelt, wie Sie in der folgenden Abbildung sehen.

Das Hintergrundbild wird über die gesamte Breite der Seite gekachelt

Abbildung: Das Hintergrundbild wird über die gesamte Breite der Seite gekachelt.

Die Inhalte der Seite sind in unserem Entwurf in einer altweißen Box untergebracht. Um diese Box zu erstellen, brauchen wir ein weiteres div-Element, das sämtliche Inhalte der Seite enthält. Wir müssen dazu direkt nach dem öffnenden <body>-Tag die folgenden hervorgehobenen Auszeichnungen einfügen:

<body>
  <div id="wrapper">
    <div id="header">      
    <p>The Home of the Hack</p>

Vergessen Sie nicht, dieses div-Element direkt vor dem schließenden <body>-Tag des Dokuments ebenfalls zu schließen, nämlich so:

      <p><a href="">more</a></p>
    </div> <!--sidebar -->
  </div> <!-- wrapper -->
</body>

Jetzt fügen wir die Regeln in das Stylesheet ein, mit denen die Box ihren altweißen Hintergrund bekommt. Gleichzeitig werden wir einen Außenrand definieren, der für einen Abstand zwischen dem wrapper und dem body-Element sorgt, sodass dort das Hintergrundbild sichtbar wird.

#wrapper {
  background-color: #fdf8f2;
  color: black;
  margin: 30px 40px 30px 40px;
}

Die Regeln auf das div-Element wrapper angewendet

Abbildung: Die Regeln auf das div-Element wrapper angewendet.

Diese Abbilung zeigt das Ergebnis unserer Arbeit. Der Außenrand hat Platz geschaffen, sodass das Hintergrundbild durchscheinen kann, aber die Inhalte im Innern von wrapper stoßen an den Rand der altweißen Fläche. Wenn wir die Eigenschaft padding zu unserer #wrapper-Regel hinzufügen, können wir etwas Raum schaffen, wie die nächste Abbildung zeigt. Und hier kommt der Code dafür:

#wrapper {
  background-color: #fdf8f2;
  color: black;
  margin: 30px 40px 30px 40px;
  padding: 10px;
}

Mit padding Raum zwischen den Begrenzungen der Box und ihren Inhalten schaffen

Abbildung: Mit padding Raum zwischen den Begrenzungen der Box und ihren Inhalten schaffen.

  

  

<< 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