 Position bestimmen
Wintersport
Hier überlagert ein Bild den eigentlichen Seiteninhalt. Ein Text (keine transparente Grafik) wiederum das Bild. Eine Technik die angebracht ist, wenn man wechselde Texte über ein Foto legen möchte.
Hier steht zur Demo ein normaler Text innerhalb der Seite. Hier steht zur Demo ein normaler Text innerhalb der Seite. Hier steht zur Demo ein normaler Text innerhalb der Seite. Hier steht zur Demo ein normaler Text innerhalb der Seite. Hier steht zur Demo ein normaler Text innerhalb der Seite. Hier steht zur Demo ein normaler Text innerhalb der Seite.
Positionierung durch CSS
Mit CSS kann man Seitenelemente punktgenau positionieren. Wie sie sehen, können sich solche Elemente auch überlagern. Hier wurden 2 Elemente mittels CSS-Angaben horizontal und vertikal positioniert. Außerdem wird die Anzeige hintereinander (aus Sicht des Betrachters) durch Indexangaben festgelegt.
Der absolute X-/Y-Positionsbezug für die beiden Elemente ist die linke obere Ecke der Seite (innerhalb dieses Frames). Diesen Punkt habe ich hier gekennzeichnet durch einen winzigen roten Block. Die Angaben in der Maßeinheit Pixel beziehen sich auf diesen Punkt.
Positionsbestimmung (Text) mit den Koordinatenangaben top:240px und left:170px
Positionsbestimmung (Bild) mit den Koordinatenangaben top:220px und left:270px
Die Rangordnung für die Anzeige, welches Elemet vor oder hinter dem anderen angezeigt wird, bestimmt der 'z-index'. Die Elemente mit der höheren Indexzahl stehen aus Sicht des Betrachters ganz vorne. Alle anderen in der Folge der Zahlen dahinter.
|
|
CSS im Head-Bereich
In der Notierung der CSS-Definitionen steht für die spätere Zuordnung der Elemente hier für den Text der Identifikator #text, für das Bild der Identifikator #bild
<style type="text/css">
<!--
#text {
position: absolute;
z-index: 2;
top:240px;
left:170px;
}
#bild {
position: absolute;
z-index: 1;
top:220px;
left:270px;
}
-->
</style>
Notierung der Elemente im Body-Bereich
Unabhänging vom eigentlichen Seiteninhalt werden die beiden Seitenelemente für Text und Bild notiert. Der Ort für Notierung innerhalb der HTML-Anweisungen ist dabei unabhängig vom Ort der späteren Anzeige innerhalb der Seite.
Die darzustellenden Elemente werden innerhalb von <div>-Angaben notiert. Dem <div>-Bereich wird ein Identifikator zugeordnet, mit dem der Bezug zu den CSS-Notierungen hergestellt wird. Hier für den Text id="text", für das Bild id="bild"
<div id="text">
<span style="color:#7F7F7F;font-size:24px;">Wintersport</span>
</div>
<div id="bild">
<img src="foto.jpg" width="150" height="112" border="0" alt="">
</div>
Diese beiden DIV-Elemente könnten also im HTML-Code der Seite gleich hinter dem BODY-Tag oder auch ganz unten unter den eigentlichen Seiteninhalten notiert werden.
Durch CSS erhält man so schöne Darstellungen und kann manchmal auf Grafik verzichten. Das erhöht die Ladegeschwindigkeit der Datei.
|
HOME
BEISPIEL
ZURÜCK 