yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Layer mittig ausrichten



Zuersteinmal, definieren wir in einer CSS Datei oder im Header im CSS-Teil des HTML Dokuments einen Layer. Dies kann z.B. so aussehen:

Layer definieren:
#layer {
position: absolute;
visibility: visible;
left: 50%;
top: 50%;
width: 500px;
height: 100px;
}


Nun zur Bedeutung des Codes:
das Attribut position sagt dem Browser, wo genau der Layer sich befindet. Die Position wird (mit den Attributen left, right, top und bottom) relativ zum Bildschirmrand angegeben - in dem Fall also 50% von Links und 50% von oben.
Mit den Parametern width und height geben wir die größe des Layers an.
Würde man sich nun diesen Layer im Browser ansehen, würde man feststellen, dass der Layer garnicht genau in der Mitte dargestellt wird! Also müssen wir CSS-Attribute dem #layer hinzufügen:

neue Attribute:
margin-left: -250px;
margin-top: -50px;


Das Attribut margin definiert den Ausenabstand. Wenn wir diesen nun um die Hälfte der Weite des Layers nach Links verlegen (also -250px) und um die Hälfte der Höhe nach oben (also 50px), so wird der Layer richtig dargestellt.

Die vollständige Definition des Layers sieht also so aus:
Layer definieren:
#layer {
position: absolute;
visibility: visible;
left: 50%;
top: 50%;
width: 500px;
height: 100px;
margin-left: -250px;
margin-top: -50px;
}


So einen Layer sichtbar, macht man wie folgt:
Layer sichtbar machen:
<div id="layer"></div>

in den Div-Tag kann nun ein Text geschrieben werden, der genau in der Mitte des Bildschirms bzw. des Browserfensters zu sehen ist.

Geschrieben von michi am 06.07.2004 (10543x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren

Die Idee ist nicht ganz dumm ... mal testen!
Geschrieben von René
Mhmmm, funzt nicht wirklich, woran kann das liegen?

Ciao
Oli
Geschrieben von d30li