CSS - Ebenen oder Tabellen Tabellen sind starre Objekte, ihre Position kann kaum beeinflusst werden. Mit den Ebenen von HTML 4.0 gibt es einen gutes Gegenstück zu den Tabellen.

Im Gegensatz zu Tabellen kann man Ebenen frei positionieren. Eine Ebene kann die andere überlappen. Ein solcher optischer Effekt lässt sich mit Tabellen nur unter Umständen erreichen.







Eine Ebene ist schnell realisiert, eine Mischung aus HTML mit CSS verfeinert.

<div style="position : absolute; width : 89px; height : 35px; top : 440px; left : 242px; background-color: #000099; border: none"></div>

Hier sehen Sie bereits eine komplette Definition. Der Inhalt der Ebene wird von <div> Tags umschlossen, sie bildet eine Einheit, die sich mit CSS frei formatieren lässt. Die eigentliche Definition der Ebene befindet sich jedoch im Style-Attribut des <div> Tags. Mit position : absolute; wird der Ebene die Eigenschaft gegeben, das sie sich an kein Element bindet. Im Gegensatz dazu bindet sich ein Text, an eine Tabellenzelle, in welcher er steht.

Nach dieser Angabe erfolgt die Größenfestlegung. In unserem Beispiel ist die Ebene 89 Pixel breit und 35 Pixel hoch. Die darauf folgende Angabe dient der Positionierung, sie ist mit zwei Angaben definiert. Die erste ist die Angabe der Entfernung in der Horizontalen (Links oder Rechts), die zweite Angabe ist die Position in der Vertikalen (oben oder unten). Weitere Angaben dienen lediglich der Festlegung des "Aussehens" der Ebene.

Es gibt weitere Typen von Ebenen, speziell in Bezug auf die Positionierung. Definiert man die Position als absolute, dann hat sie keinen Bezugspunkt in der Seite, man kann die Ebene einfach überall positionieren.
Wird als Positionstyp jedoch relative angegeben, dann bezieht sich die Position immer auf das nächstgelegenste Element. Ist das Element bereits in einer Tabellenzelle am Ende der Seite, dann beziehen sich alle Angaben in der Ebene auf diese Tabellenzelle.

<div style="position : relative; width : 89px; height : 35px; top : 440px; left : 242px; background-color: #000099; border: none"></div>

Gibt man jetzt eine Position an, dann bezieht sich die Ebene auf die Position der Zelle, und sieht diese als "Startpunk". Wird beispielsweise bei einem Absoluten Element die top: 110; gesetzt, dann ist die Ebene 110 px von oben entfernt, bei einer relativen Ebene ist diese 110px vom Element, auf welches es sich bezieht, entfernt.

<div style="position : fixed; width : 89px; height : 35px; top : 440px; left : 242px; background-color: #000099; border: none"></div>

Wenn Sie als Position fixed wählen, verhält sich die Ebene wie bei relative, nur das diese beim Scrollen an ihrer Position stehen bleibt. Diese Eigenschaft wird aber bisher von keinem Browser unterstützt.

<div style="static : fixed; width : 89px; height : 35px;background-color: #000099; border: none"></div>

static ist hierbei der Standardwert. Der Ebene wird keine Position gegeben. Sie fügt sich in den Kontext ein.

Wie Sie im oberen Beispiel schon gesehen haben, können Sie Ebenen auch ineinander verschachteln. Mit der CSS Eigenschaft z-index können Sie die Lage der Ebene in der Gruppe bestimmen. Je höher der z-index ist, desto weiter oben liegt das Element.
Das Beispiel von oben:

<div style="position : absolute; width : 91px; height : 36px; top : 430px; left : 227px; border: none; background-color: #003366; z-index: 3; visibility: visible"></div>
<div style="position : absolute; width : 92px; height : 35px; top : 425px; left : 277px; border: none; background-color: #0099FF; visibility: visible; z-index: 2"></div>
<div style="position : absolute; width : 89px; height : 35px; top : 440px; left : 259px; background-color: #000099; layer-background-color: #000099; border: none; visibility: visible; z-index: 1"></div>


Eine weitere Eigenschaft, die hier in dem Beispiel auch verwendet wurde, ist die visibility Eigenschaft, welch die Sichtbarkeit einer Ebene definiert.

visibility: visible

Die Ebene ist sichtbar

visibility: hidden

Die Ebene ist nicht sichtbar

Ebenen machen jedoch immer noch Schwierigkeiten, da diese in den Browsern oftmals anders dargestellt werden. Vorerst werden Tabellen die einizigen, wirklichen Layoutelmente bleiben.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: