|
|
|
|
|
|||||
|
|
|
|
|
|
|
|||||||||||||
|
|
||||||||||||
|
|
 |
Mit DIVs lassen sich interessante Effekte erzielen. Neben diesem einfachen Beispiel haben Sie noch die Möglichkeit, mehrere Ebenen übereinander zu positionieren. Die Reihenfolge wird über den "z-index" festgelegt: Die Ebene mit einem z-index-Wert von "2" liegt dann über dem DIV mit dem z-index "1". 
Das “Textfenster” wird durch die Größenangaben der Ebene bestimmt (der Text ist länger als die Ab- messung der Ebene).
Es befindet sich ein Bild in der vor- deren Ebene (was bei einem Textfeld nicht möglich wäre!) Außerdem wichtig: Das bei der Ebene der Wert für den “Über- lauf” (overflow) auf “auto” steht. Wenn man das Hintergrundbild wie in diesem Beispiel positioniert, so ent- steht der Eindruck, der Scrollbalken wäre losgelöst vom zu scrollenden Inhalt. Durch Verschachtelung von Ebenen können verschiedenste Effekte erzeugt werden. Ebenen gelten mittlerweile als wichtiges Design-Element, da sie pixelgenau positioniert werden können, sowie mit einer großen Anzahl von Ebenen gearbeitet wer- den kann, welche durch geschickte Positionierung und Angabe der Tiefenposition (z-index) große Ge- staltungsfreiheit gewährleistet.
Beispielcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Block-Element DIV (Ebene, Container)</title>
</head>
<body>
<div id="hg" style="z-index: 2; position: relative;
width: 274px; height: 18px; top: 47px">
<img src="../../img/stefan_vg.gif" width="274"
height="18" alt="">
</div>
<div style="z-index: 1; position: static; width:
230px; height: 228px; padding-left: 20px;
padding-right: 120px; overflow: auto; line-height:
14px">
<br><br>
Das “Textfenster” wird durch die Größenangaben
der Ebene bestimmt
<br>(der Text ist länger als die Ab- messung der
Ebene).
<br><br>
<div style="text-align: center">
<table style="width: 212px; height: 90px;
margin: auto; background-color: black"
border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="../../img/stefan.jpg"
width="85" height="90">
</td>
</tr>
</table>
</div>
<br>
Es befindet sich ein Bild in der vor- deren Ebene
(was bei einem Textfeld nicht möglich wäre!)
<br><br>
Außerdem wichtig: Das bei der Ebene der Wert für den
“Über-
<br>
lauf” (overflow) auf “auto” steht.
<br><br>
Wenn man das Hintergrundbild wie in diesem Beispiel
positioniert, so ent- steht der Eindruck, der
Scrollbalken wäre losgelöst vom zu scrollenden
Inhalt.
<br><br>
Durch Verschachtelung von Ebenen können
verschiedenste Effekte erzeugt werden.
<br><br>
Ebenen gelten mittlerweile als wichtiges
Design-Element, da sie pixelgenau positioniert
werden können,
sowie mit einer großen Anzahl von Ebenen gearbeitet
wer- den kann, welche durch geschickte
Positionierung und Angabe der Tiefenposition
(z-index) große Ge- staltungsfreiheit gewährleistet.
<br>
<img src="../../img/spacer.gif" width="1"
height="230">
</body>
</html>
|
 |
|
|
|||||||
|
|||||||||||||
