Webdesign 15 - CSS: Layer erzeugen & positionieren

15. CSS – Layer erzeugen & positionieren


Mit sogenannten Layern (engl. für Ebene/Schicht) werden die meisten CSS-Layouts erstellt.
Man verwendet dafür das Blockelement DIV (Abkürzung von "division", engl. für Bereich), welches ich euch bereits in Kapitel 12 vorgestellt habe.
DIVs sind eigenständige Ebenen, die entweder frei über der Webseite "schweben" oder sich darin anpassen. Sie können beliebig positioniert werden, was ein pixelgenaues Arbeiten möglich macht.
Dank JavaScript ist es möglich, die Layer nachträglich zu verändern, z.B. ein-/ausblenden, positionieren usw. Mal schaun, vielleicht erstelle ich dazu ein paar Mini-Tutorials


Der Aufbau eines DIVs kennt ihr schon aus Kapitel 13:

Code:

#name { eigenschaft: wert; }

Code:

<div id="name">dies ist ein Div</div>

Um aus einem normalen DIV ein Layer zu machen, ist folgende Eigenschaft von Nöten: position. Position bestimmt die Art der Positionierung. Die beiden meistverwendeten Werte sind absolute (für eine pixelgenaue Positionierung, unabhängig von allen anderen Elementen der Seite) und relative (für eine relative Positionierung, abhängig von den benachbarten Elementen). Ein weiterer Wert ist fixed (fixiert das DIV – es scrollt nicht mit), dieser wird aber vom Internet Explorer erst ab der Version 7 unterstützt und wird deshalb nicht empfohlen (immerhin hat ein großer Teil der Surfer noch den IE6).


Nachdem die Art der Positionierung eines Layers festgelegt wurde, muss die Position selber bestimmt werden. Dafür gibt es die Eigenschaften left, top, right und bottom.
Es werden maximal 2 dieser Angaben gemacht – der Abstand links oder rechts sowie der Abstand oben oder unten. Meist wird top und left
benutzt.

Hier ein Beispiel für einen absolut positionierten Layer:

Code:

#navi {
position: absolute;
top: 100px;
left: 300px;
}

Code:

<div id="navi">dies ist ein Div mit Navigation</div>

und hier eines für einen relativ positionierten Layer:

Code:

#navi {
position: relative;
top: 15%;
left: 10%;
}

Code:

<div id="navi">dies ist ein Div mit Navigation</div>

Als zusätzliche Eigenschaft gibt es die Layerreihenfolge: z-index. Mit dem z-index können Layer, die sich überlagern, angeordnet werden, ähnlich wie die Ebenen im Photoshop. Je höher der Wert (Ziffern von 0 bis 99, negative Zahlen sind auch möglich), umso weiter oben liegt der Layer.
Ich demonstriere das mal an einem Beispiel:

Code:

#txt1 {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
z-index: 1;
background-color: silver;
border: black solid 1px;
}

#txt2 {
position: absolute;
top: 140px;
left: 140px;
width: 200px;
z-index: 1;
background-color: beige;
border: black solid 1px;
}

Code:

<div id="txt1"> Das ist ein Text, um den z-index zu demonstrieren. </div>
<div id="txt2"> Das ist ein Text, um den z-index zu demonstrieren. </div>

Ein weiteres interessantes Attribut ist overflow – damit macht man eine DIV scrollbar und erzeugt einen iFrame-Effekt. Werte sind auto (scrollt bei bestimmter Textlänge), scroll (scrollt immer) und hidden (scrollt nicht und schneiden überschüssigen Text ab.


Desweiteren macht es Sinn, die Größe des DIVs mit den bekannten Attributen width und height anzugeben. Gerade bei Texten ist das width wichtig, da der Text sonst einfach über die gesamte Seite verläuft.






~~~
So, das war mein Webdesign-Kurs, in dem ich die Grundkenntnisse in HTML und CSS erkläre.
Sicherlich ist das alles etwas theoretisch und sobald das Wissen angewendet und das erste Layout umgesetzt werden soll, kommen viele Fragen auf (das war bei mir nicht anders, als ich angefangen habe).

Deshalb wird der Kurs indirekt fortgesetzt: an den nächsten Wochenenden werde ich euch "an die Hand nehmen" und zeigen, wie ich Schritt für Schritt vorgehe, wenn ich ein Layout umsetze. Ich denke dabei könnt ihr euer Wissen gut anwenden und festigen.

Jedes Wochenende werde ich eine "Layoutart" vorstellen:
DIVs mit absoluter/relativer Positionierung, DIVs mit float, iFrames, PopUps und Tabellen.
Natürlich stehe ich euch jederzeit für eventuelle Fragen zur Verfügung.