CSS Boxmania * Einstieg in CSS * Galileo Press * Elisabeth Wetsch * eliZZZa * XHTML und CSS » boxmodell http://www.cssboxmania.com Bewegen Sie sich in Ihren Stylesheets wie ein Fisch im Wasser... Wed, 26 Nov 2008 04:53:11 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 Division – das div-Element http://www.cssboxmania.com/2008/11/26/division-div-element/ http://www.cssboxmania.com/2008/11/26/division-div-element/#comments Wed, 26 Nov 2008 03:16:56 +0000 eliZZZa http://www.cssboxmania.com/?p=105 Eines der wichtigsten Elemente ist das "Division"-Element, welches verwendet wird, um Seiten in verschiedene Bereiche zu unterteilen. Es ersetzt heute die in HTML üblichen "Layout-Tabellen", die im Sinne der Barrierefreiheit nicht optimal interpretiert werden konnten.

 

Eine typische, sehr einfache, Seitenstruktur mit div-Elementen könnte etwa wie folgt aussehen. Dabei werden sämtliche div-Elemente mit einer ID (identification) versehen, damit man jedes "von außen" adressieren (also ansprechen) kann.
(Beim nachfolgenden Code sind html- und head-Bereich weggelassen.)

<body>
<div id="header">Inhalte Header</div>
<div id="nav">Navigationsleiste</div>
<div id="content">Inhalte Texte / Bilder</div>
<div id="footer">Inhalte Fußzeile</div>
</body>

Das div-Element hat per se keine Eigenschaften und keine Funktion. Erst durch die Zuweisung von Eigenschaften in einem Stylesheet erhält es sein Aussehen.

Das div-Element ist ein sogenanntes Block-(Level)-Element. Damit ist folgendes Verhalten vorgegeben:

  1. Nimmt die gesamte Breite seines Elternelements ein
  2. Beginnt immer eine neue Zeile
  3. Folgt den Regeln des Boxmodells und kann daher u.a. die Eigenschaften width, height, padding, border, margin annehmen.
]]> http://www.cssboxmania.com/2008/11/26/division-div-element/feed/ 0