XML-Technologien / CSS / Anspruchsvolle Websites mit CSS / Layouts mit fixierter Breite / Layouts mit mehreren Spalten und fest vorgegebener Breite / Positionierte Spalten

Positionierte Spalten

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

Wenn wir eine zweite Spalte mit absoluter Positionierung in unser Layout einfügen wollen, müssen wir als Erstes die Inhalte bzw. den Text dieser Spalte oder Seitenleiste in einem eigenen div-Element in das Dokument einfügen. Dazu fügen wir unmittelbar nach dem schließenden </div>-Tag dieses neuen div-Elements ein weiteres div-Element mit dem Namen extras ein. Auf einer realen Seite könnte diese Seitenleiste Werbung oder auch zusätzliche Informationen zu den Spielen oder Begegnungsstätten enthalten, aber für unsere Zwecke hier genügt auch ein Blindtext.

Im normalen Textfluss des Dokuments wird dieser Text unterhalb der weißen Box angezeigt, wie Sie in der folgenden Abbildung sehen können.

div-Element der Seitenleiste im Rohzustand, bevor CSS-Regeln definiert wurden

Abbildung: Das div-Element der Seitenleiste im Rohzustand, bevor CSS-Regeln dafür definiert wurden.

Genau wie bei den dynamischen Layouts, die wir zuvor entwickelten, müssen wir diese Seitenleiste in zwei div-Elemente einbetten: Eines davon erzeugt den Positionierungskontext, während wir das andere div-Element dazu nutzen, den Platz für die Seitenleiste zu reservieren. Fügen Sie diese beiden div-Elemente genau so in Ihr Dokument ein wie im folgenden Code-Fragment: Im Element #content-wrapper ist das Element #content eingebettet, während das Element #main die Elemente #content-wrapper und #extras umschließt.

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

Jetzt können wir für diese div-Elemente Stilregeln definieren. Für #content-wrapper legen wir einen 200 Pixel breiten Innenrand auf der linken Seite fest, während das div-Element #main den Positionierungs-Kontext bereitstellt.

#content-wrapper {
  margin: 0 0 0 200px;
}
#main {
  position: relative;
}

Nachdem Sie die Seite in Ihrem Browser aktualisiert haben, sollten Sie sehen, dass für die Seitenleiste Platz geschaffen wurde. Im nächsten Schritt positionieren wir die Seitenleiste dort hinein. Fügen Sie dazu einfach die folgenden Regeln in das Stylesheet ein, wodurch die Seitenleiste links oben oder rechts oben im Bildschirmfenster positioniert wird.

#extras {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  background-color: white;
  border: 1px solid #f0f0f0;
}

Diese Regel positioniert die Seitenleiste und gibt ihr denselben weißen Hintergrund und Rahmen, den auch der Inhaltsbereich hat. Die folgende Abbildung zeigt das vollendete Werk.

Fertige Layout mit einer positionierten Seitenleiste

Abbildung: Das fertige Layout mit einer positionierten Seitenleiste.

<< zurück

vor >>

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

Printlayouts mit CSS & HTML

XML-Grundlagen

ePub

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