Div's &Tricks

Bevor wir mit unserem ersten CSS-Layout loslegen, benötigt es nun doch noch ein wenig Theorie zum Verständnis:

Div's, Container und Boxen

Im Folgenden wird häufig von Div's, Containern oder Boxen die Rede sein. Im Prinzip handelt es sich dabei immer um das Gleiche.
"div" bedeutet "division", oder übersetzt etwa "Bereich". Wenn künftig von einem "div" die Rede ist, bedeutet dies also, dass wir von einem bestimmten, begrenzten Bereich auf der Homepage sprechen. Unter Container oder Boxen versteht man letztlich das Gleiche, sozusagen ein "Behältnis" wo was rein kommt.

Div's sind "Blockelemente" und bilden rechteckige Blöcke. Man kann ihnen deshalb bestimmte Breiten und Höhen zuordnen. Sie erzeugen einen eigenen Absatz im Textfluss und können weitere Elemente beinhalten.
Sofern nicht speziell definiert, nehmen Div's die gesamte Breite des ihnen zur Verfügung stehenden Raumes ein.
Ihre Höhe richtet sich nach ihrem Inhalt.

Im Gegensatz dazu erzeugen "Inline-Elemente" keinen eigenen Absatz im Textfluss. Sie können i.d.R. weitere Inline-Elemente beinhalten, jedoch keine Blockelemente.
Zur Vertiefung und Einteilung der einzelnen Elemente siehe hier.

Div's werden im HTML-Teil mit <div> geöffnet und mit </div> geschlossen. Achtet also darauf, dass ihr jeden geöffneten Div auch wieder schließt. Am besten gewöhnt ihr euch an, bei jedem Öffnen eines Div's diesen auch gleich wieder zu schließen und ihn erst danach mit Inhalt zu füllen. Dabei ist euch z.B. der Editor "Phase 5" behilflich.

Merke:
Auf einer Seite können mehrere unterschiedliche Div's vorkommen (z.B. für Header, Navi und Content).

Da wir unsere Container für verschiedene Zwecke (z.B. Header, Navi, Content) benutzen wollen, ist es sinnvoll, sie mit "Identitäten" zu bezeichnen. Geben wir unserem späteren Header also die Bezeichnung "header".

Im HTML-Teil wird der "header" dann so aufgerufen <div id="header"> und mit </div> geschlossen.

"id" bedeutet übrigens "identifier", übersetzen wir es einfach mit "Erkennungsmerkmal". Man spricht deshalb auch von "ID-Selektoren".

Merke:
Ein "ID" darf je Seite nur einmal verwendet werden.

Tipp:
Da man Div's auch sehr oft ineinander verschachtelt indem man in einen Div mehrere weitere Div's reinpackt, erkennt man durch die ID zwar welchen Div man wo geöffnet hat, aber nicht unbedingt an welcher Stelle er geschlossen wird. Hier ist die Kommentierungsauszeichnung von HTML ein nützlicher Helfer:

Unseren Header-Div könnten wir damit so schließen:

</div> <!--Ende header-->

Gewöhnt euch das vielleicht gleich mal an. Es wird vor allem später bei komplexeren Seiten noch hilfreich sein.

Formatiert wird dieser Container in der "style.css" unter der Überschrift #header

Merke:
Div-Elemente, die auf jeder Seite nur einmal vorkommen dürfen (ID-Selektoren), werden im CSS-Teil durch Voranstellung einer Raute  #  aufgerufen. Dagegen werden die "Elementselektoren" wie body, a, h, p, li oder ul ohne vorangestellte Raute in der CSS-Datei deklariert.

Nur kurz vorgestellt: Das CSS-Boxmodell.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: