 zentrierte Hintergrundgrafik bei Ebenen
Auf dieser Seite möchte ich Möglichkeiten aufzeigen, wie Sie über einander angeordnete Ebeneninhalte (Layer) zentrieren / ausrichten können. Schauen Sie dazu bitte auch einmal in den Quelltext der Beispiele.
|
|
Ebeneninhalte positionierenn / zentrieren
Die Positionierung einer Seiten-Hintergrundgrafik heute mit CSS-Anweisungen recht einfach! Lesen Sie dazu die Beispielseite  Seiten-Hintergrundbild positionieren
Zwei Darstellungsebenen
Es werden Ebenen festgelegt die für den Betrachter hintereinander liegen. Stellen Sie sich das vor wie Glasscheiben die übereinander liegen. Auf der hinteren Ebene liegt das Hintergrundbild, auf der vorderen der Seiteninhalt.
|
|
Beispiel
- Auf der Hintergrundebene soll die Grafik dargestellt werden
- Auf der Vordergrundebene soll der Seiteninhalt dargestellt werden
Innerhalb der BODY-Bereichs werden die Ebenen mittels DIV-Tags definiert. Zuerst die Hintergrundebene, danach die Vordergrundebene. Wenn Sie keine weiteren Angaben machen, bestimmt die Reihenfolge der Definition die Ebenenordnung: Die zuerst definierte Ebene staht ganz hinten, die zweite Eben davor, usw ...
Besser Sie legen die Ebenenordnug mit 'z-index' fest!
Ebenenordnug festlegen
Sie können die Reihenfolge der Anzeige von Ebenen auch festlegen, indem Sie Index-Nummern vergeben. Ebenen mit höherer Index-Nummer überdecken Ebenen mit niedrigerer Index-Nummer. Dann spielt die Reihenfolge der Notierung keine Rolle!
z-index="2"
Vordergrund
z-index="1"
Hintergrund
Falls Sie mehrere Inhalte in verschiedenen Ebenen darstellen möchten, experimentieren Sie doch einmal mit der Rangfolge für die Ebenen. Wie die genauen Anweisungen zur Definiton der Ebenen aussehen, lesen Sie weiter unten.
Überlegungen zur horizontalen Ausrichtung
 Inhalt der Hintergrundebene zentrieren
nach der alt-hergebrachten Weise
Der Inhalt der Hintergrundebene wird innerhalb einer 100% großen Tabelle plaziert. Die Tabelle hat eine einzige Tabellenzelle die entsprechend 100% der Breite und Höhe der Seite ausfüllt. Die Inhalte der Tabellenzelle (hier die Hintergrundgrafik) sind vertikal und horizontal zentriert. In diese Tabellenzelle notiere ich das Hintergrundbild. Fertig!
siehe auch  MENÜ DIVERSES - Inhalte zentrieren
Inhalt der Hintergrundebene zentrieren
mit style-Angaben
Den Inhalt der Hintergrundebene können Sie beispielsweise auch in einen Absatz schreiben (<p>). Diesen Absatz kann man dann mittels CSS-Angaben horizontal zentrieren.
Code für die Hintergrundebene
Ich zeige hier lediglich 2 Möglichkeiten auf, eine Grafik (oder was auch immer) auf der Hintergrundebene zu zentrieren. Analog zu den Überlegungen oben einmal mit Hilfe einer 100% breiten Tabelle und außerdem mit entsprechenden CSS-Anweisungen.
Die Tabellentechnik mag ihnen hinterher überflüssig erscheinen, kommt aber möglicherweise dann zum Einsatz, wenn neben der Grafik andrere Elemente auf der Hintergrundebene angezeigt werden sollen. Alternativ kann man natürlich auch mit weiteren Ebenen arbeiten (siehe Beispiel-2 und Beispiel-3)
1 Code für die Hintergrundebene in einer 100% breiten Tabelle
<div id="back">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="middle" align="center">
<img src="grafik.gif" width="350" height="350" border="0" alt="">
</td></tr>
</table>
</div>
dazu gehören diese CSS-Anweisungen:
#back
{
z-index:1;
position:absolute;
left:0px;
top:200px;
height:350px;
}
2 Code für die Hintergrundebene - Ausrichtung mit CSS-Anweisungen
<div id="hinten">
<img src="grafik.gif" width="350" height="350" border="0" alt="">
</div>
dazu gehören diese CSS-Anweisungen:
#hinten
{
z-index:1;
position:absolute;
left:0px;
top:200px;
height:350px;
width:100%;
text-align:center;
}
Code für die Vordergrundebene (Seiteninhalt)
Den eigentlichen Inhalt des HTML-Dokuments lege ich ich in einer zweiten Ebene darüber.
<div id="vorne" style="position:absolute; left:0px; top:220px;">
Hier hinein den Seiteninhalt
</div>
dazu gehören diese CSS-Anweisungen:
#vorne
{
z-index:2;
position:absolute;
left:0px;
top:220px;
height:400px;
border:1px solid #00AFFF;
width:100%;
}
| 
Home • Bilder • CSS • Hintergrund zentriert
BEISPIEL-1