Etwas CSS und die beiden Bereiche werden nebeneinander angeordnet
Sie können mehrere Inhalte wie Text, Grafiken, Tabellen und andere Elemente in einen gemeinsamen Bereich einschließen. Dieses allgemeine Element bewirkt nichts weiter als eine neue Zeile im Fließtext. Ansonsten hat es keine Eigenschaften und keine spezielle Bedeutung. Es ist dazu gedacht, um mit Hilfe von CSS formatiert zu werden. In der Praxis wird es gerne zum Definieren von Layout-Bereichen verwendet.
<div style="width: 200px; float: left; margin-right: 20px;"> <nav> <ul> <li>HOME</li> <li>Blog</li> <li>Referenzen</li> <li>Impressum</li> </ul> </nav> </div> <div> <h1>HOME</h1> viel Inhalt </div>
Mit <div>…</div> markieren Sie einen allgemeinen Bereich (div = division = Bereich). Im obigen Beispiel sind zwei solche Bereiche notiert. Der erste davon enthält zu Demonstrationszwecken einige CSS-Angaben. Diese bewirken, dass der zweite Bereich neben dem ersten ausgerichtet wird.
Verwenden Sie das div-Element nur dann, wenn es kein Element gibt, das den einzuschließenden Bereich präziser auszeichnet. Wenn der eingeschlossene Bereich also etwa ein Header oder Footer ist, sollten Sie die entsprechenden Elemente (header bzw. footer) verwenden, und nicht das div-Element. Das div-Element ist hingegen die richtige Wahl, wenn ein Bereich, etwa eine Seitenleiste, alles mögliche enthält, also etwa ene Navigation, Werbung, Zusatzinfos, Volltextsuchfeld usw., oder wenn es sich um einen sogenannten Wrapper handelt — eine Technik, die beim Fixieren von Webseiten-Layouts häufig zum Einsatz kommt.
Mit CSS bzw. CSS-Eigenschaften können Sie Bereiche beliebig gestalten. Der Buchabschnitt über Webseiten-Layouts enthält praktische Beispiele, wie allgemeine Bereiche bei modernen Webseiten-Layouts verwendet werden (auch die Wrapper-Technik).
Normalerweise ist es günstiger, solche CSS-Layoutangaben in einem Stylesheet-Bereich oder in einer separaten CSS-Datei zentral zu notieren. Die Notation in einem style-Attribut wie im obigen Beispiel ist jedoch ebenfalls möglich und wurde hier der Einfachheit halber verwendet.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.