Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

17.3.1 HTML vorbereiten: das doppelte div

Das Box-Modell in CSS ist in seiner aktuellen Fassung auf die Arbeit mit festen Pixelbreiten oder zumindest mit einer durchgängig einheitlichen Einheit (px, % oder em) ausgerichtet. Sobald für ein HTMLElement die Angaben für Breite, Padding, Border oder Margin in verschiedenen Einheiten erfolgen, lässt sich die Gesamtbreite des Elements nicht mehr zuverlässig bestimmen:

  • Aufgabe: #navibereich soll eine Breite von 20% und ein Padding von 10px bekommen.
  • Frage: Wie breit muss der margin-left von #textbereich werden, damit der Navigationsbereich genau darein passt?
  • Antwort: Keine Ahnung. Das kann man nicht berechnen.

Damit flexible Layouts nun aber nicht zu einer Lotterie verkommen, gibt es den Trick mit dem doppelten div:

  • Direkt innerhalb von #navibereich wird ein zweites div erstellt, das zum Beispiel #navibereich_innen heißen könnte.
  • Das äußere Element #navibereich bekommt eine Breite zugewiesen, zum Beispiel width: 20%.
  • Das innere Element #navibereich_innen erhält eventuelle Angaben für padding oder border, zum Beispiel padding: 10px.

Auf diese Weise ist der Navigationsbereich immer 20% breit, egal wie viel padding und border (oder auch margin) das innere Element bekommt. Durch das doppelte div können die Spalten einerseits sehr flexibel gestaltet werden und haben andererseits trotzdem eine genau berechenbare Gesamtbreite.

Im folgenden ToDo bereiten Sie das HTML der drei Webseiten für den Einsatz in flexiblen Layouts vor.

ToDo: HTML – das doppelte div einbauen
  1. Kopieren Sie die Dateien aus dem Basisordner für diesen Abschnitt in einen Übungsordner.
  2. Öffnen Sie die drei HTML-Dateien in einem Editor. 
  3. Ergänzen Sie das innere div für den Navigationsbereich:

    <div id="navibereich">
    <div id="navibereich_innen">

    ...

    </div> <!-- Ende navibereich_innen -->
    </div> <!-- Ende navibereich -->

  4. Ergänzen Sie das innere div für den Textbereich:

    <div id="textbereich">
    <div id="textbereich_innen">

    ...

    </div> <!-- Ende textbereich_innen -->
    </div> <!-- Ende textbereich -->

  5. Speichern Sie die Webseiten und betrachten Sie sie im Browser.

Im Browser hat sich durch diese Maßnahme nichts sichtbar verändert.