Elemente beliebig anordnen
Nach obenUm was geht es?
Dies ist eine kurze Anleitung wie man Elemente beliebig innerhalb eines Bereichs anordnen kann. Oft kommt es auf Seiten zu Darstellungsfehlern bei verschiedenen Auflösungen, weil für einige Bereiche position nicht korrekt verwendet wurde.
Nach obenÜber die Eigenschaft "position"
Für eine punktgenaue Positionierung ist die Eigenschaft position gedacht. Dabei hat die Positionsart großen Einfluss auf die Anordnung im Textfluß:
Statische Positionierung
Die statische Positionierung entspricht der Standardeinstellung von Elementen, die sich im Textfluß bewegen. Die Angaben left, top, right, bottom sind unwirksam.
position:static;
Positionierungsangaben
Die Angaben top, left, right und bottom dienen als Eigenschaften für relative und absolute Positionierung, welche für für top und left Null als Standardwert besitzen.
Relative Positionierung
Das so positionierte Element verhält sich im Textfluß wie ein statisch positioniertes Element, mit der Besonderheit, dass man zusätzlich noch die Positionierungsangaben zur Verfügung hat.
position:relative;
Absolute Positionierung
Die absolute Position wird nur dann relativ zu den Rändern des Eltern-Elements ausgerichtet, wenn dieses relativ oder absolut positioniert ist. Falls dies nicht der Fall ist wird die Position relativ zum Bildschirm berechnet.
position:absolute;
Nach obenEin Bespiel: vertikale Zentrierung
Ein Bereich soll innerhalb eines anderen vertikal zentriert angeordnet werden. Hier der Beispielcode:
<div id="mutter">
<div id="tochter">
<h2>Blindtext</h2>
<p>Bevor Sie diesen Text lesen, sollten Sie unbedingt zwei Dinge tun. Erstens sollten Sie der Agentur noch einmal ausdrücklich versichern, dass Sie diese Anzeige für das Beste halten, was Sie je gesehen haben, und noch heute einen langfristigen Vertrag abschliessen möchten. Zweitens sollten Sie davon ausgehen, dass diese Anzeige über Nacht entstanden ist und deshalb noch stark verbessert werden kann. Am Layout wird noch ein bisschen gedreht, das Logo wird noch einen Tick grösser und der Text, der hier stehen soll, wird kein Tippfehler haben.</p>
</div>
</div>
Wie bereits oben erläutert wurde wählen wir für das auszurichtende Element die absolute Positionierungsart und für das Mutterelement relativ. Indem wir der Eigenschaft top 50% zuweisen und per negativen oberen Rand um die Hälfte der Höhe nach oben schieben, wird das Element relativ zum Mutterelement zentriert (vergleiche auch horizontale Zentrierung Teil 2. Hier die fertigen Formatierungen des Beispiels.
#mutter{
position: relative;
height: 100%;
width: 100%;
background: #e8e7e3;
}
#tochter{
position: absolute;
top: 50%;
left: 15%;
margin: -100px 0px;
width: 70%;
height: 200px;
border: 1px solid #000;
background: #f3f3f3;
}
#tochter p{
margin: 10px 20px;
}
#tochter h2{
margin: 10px 20px;
}
Damit sind nicht nur relative Positionen innerhalb eines Bereichs sondern auch pixelgenaue Anordnungen möglich.
Hier geht es zum Beispiel.
Kaito
Seite wird bei mir komplett verkrüppelt dargestellt, IE 6
curi
Welche Seite denn?
schade
Wollte was über Positionierung lesen und kann nicht. Rechter Teil der Seite ist nach links verrutscht und vom linken Teil zur Hälfte überdeckt. IE 6. So wie ich es verstehe müsst ihr das Beispielcode irgendwie auskommentieren, damit es nicht die Artikelseite entstellt.