Container
Container sind div-Boxen die ausserhalb des Codeflusses positioniert und sogar zum Fliegen gebracht werden. Die Grundposition erfolgt mit CSS, die dynamische Manipulation durch Javascript.
Div
<span></span> <div></div> <p><p/>
Das <div></div>-Tag ist ein HTML Element ohne eigene Bedeutung. Ein div beginnt eine neue Zeile (wie ein p), aber es schiebt keinen Abstand vor sich ein (im Unterschied zu einem p). Jedes Element wird normalerweise dort hingestellt, wo es im HTML-Code notiert wurde, eines nach dem anderen.
Ein span class="boxes"Ein p class="boxes"
Container positionieren
position: absolute, relative, fixed, static
Die relative Position wird immer im Bezug zur Mutter gemessen. Die Mutter ist der Container, in dem ich mich befinde (nicht der über mir, der um mich herum).
Die absolute Position wird zum Body gemessen oder zur absoluten Mutter (egal worin ich sonst noch stecke).
Das div-Element bezeichnet man als Container, weil es aus dem Code-Fluss herausgelöst werden kann.
Dazu wird es mit einem id-Style eindeutig identifiziert und mit Positionsangaben versehen. Die Angaben können absolut zum Body-Element (bzw. zum übergeordneten Element, welches mit absolute, fixed oder relative positioniert wurde) angegeben werden oder relativ zur eigentlichen Position, oder an der Scheibe fixiert oder static wieder im Codefluss. Absolut positionierte <div>Tags können irgendwo, z.B. am Seitenende, notiert werden.
Falls mehrere sich gleichende Container je Seite platziert werden, kann in einem class-Style Hintergrundfarbe, Ramen und Padding festgelegt werden; jeder Container wird dann gleich klassifiziert. Falls jeder Container völlig einzigartig sein soll, können diese Angaben im id-Style stehen. Die Grössen-Angaben können je nach bedarf im id- oder class- Style stehen.
Also, jede Box muss eine unterschiedliche ID haben (es kann keine zwei Container mit der selben Id geben) aber alle können der selben Klasse angehören (müssen aber nicht).
Relative Container
CSS:
.boxes {background-color:#CFEBFF; border:solid 1px #87CEFA; padding: 8px;}
#container1 {position: relative; top: 0px; left: 100px; width: 750px; height: auto; z-index: 100; visibility: visible;}
HTML:
<div id="container1" class="boxes">...</div>
Ohne Positionsangabe folgen sich Container linear in der Reihenfolge in der sie im Code stehen. Mit Positionsangabe beziehe ich mich aber nicht mehr auf das über mir liegende (vorherige) Element, welches eine Zeile weiter oben notiert wurde, sondern auf das übergeordnete (mich umgebende) Element.
Absolute Container
Schwierige Relationen
Der absolute Container steht nicht in Bezug zum anderen Fensterinhalt (ausser er steckt in einem ebenfalls absolut positionierten Container).
Der fortlaufende Fensterinhalt könnte, weil er je nach Browser, grösser oder kleiner dargestellt wird,
unter oder über den absoluten Container rutschen.
Ein absolut positionierter Container kann ausserhalb des Browserfensters platziert werden
und veranlasst den Brauser nicht dazu, einen Scrollbalken bereitzustellen.
Ein relativer Container kann nicht ausserhalb seiner Grenzen platziert werden,
er erzeugt den originalen Platzbedarf dennoch, wie am Seitenende zu sehen ist
(wo das Element #Ebene4 relativ mit top:-150px; positioniert, den umgebenden div dennoch aufspreizen).
Es ist ein Design zu entwerfen, in dem keine genau festgelegte Relation von den darüberliegenden Container zum Inhalt erzwungen werden muss.
Je nach Browser kommt das Quadrat mit dem rotgepunkteten Rahmen über anderen Inhalt zu stehen (es kann nichts darunterliegendes einrahmen).
Sollen irgendeine Kongruenz oder Parallelen erzielt werden, müsste sämtlicher Inhalt der Seite in Container getan werden.
Container haben das Seiten-Layout mittels 'Tabellenstruktur' verdrängt.
CSS:
#container2 { position: absolute; top: 900px; left: 180px; width: 400px; height: 400px;
z-index: 20; visibility: visible; border: 1px dotted red; }
HTML:
<div id="container2"></div>
Fixed Container
position:fixed
Durch den Befehl (position:fixed) bleibt ein Container an seinem Platz kleben, auch wenn der Rest gescrollt wird.
Überlappend
z-index:
Boxen können sich gegenseitig überlappen. Die Box mit dem höheren 'z-index' liegt innerhalb ihres Stapelkontextes oben.
Nur durch position: relative, absolute oder fixed positionierte Boxen können einen z-index haben.
z-index: 100;
Zur relativen Positionsangabe eines Containers dient seine linke obere Ecke, die Koordinaten werden meistens von oben und links bemessen genau so gut können aber auch Abstände von rechts und unten (right bottom) angegeben werden.
Floating Box
float:
Durch den Befehl float:right oder left wird ein Container an den inneren Rand des Mutter-Containers gelegt.
Er floatet immer in Bezug zu den folgenden Elementen. Auch wenn ich rechts floaten will,
muss ich den floatenden Container vor den Abschnitt schreiben, der dann links von mir zu liegen kommt.
Der float Befehl gilt für alle folgenden Abschnitte, bis der floatende Text fertig ist.
Durch clear:both (oder clear:left oder clear:right) in einem Abschnitt, hebe ich den Floatbefehl auf,
dieser und alle kommenden Abschnitte machen auf der Entsprechenden Seite keinen Platz mehr sondern kommen nach dem floatenden Abschnitt zu liegen.
Ineinander verschachtelt
<div id="EbeneAussen">
<div id="EbeneInnen"> </div></div>
Übereinander liegend
Hier liegen 3 Boxes übereinander, die wurden absolut so positioniert und in der Grösse so aufeinander abgestimmt, dass ein Rahmen- und ein Padding- Effekt entsteht.
Das ist falsch: border und padding sind dafür zuständig!
Nein es ist ein work around, dieses Konstrukt wird von den neuen und von den quirkmode Browsern gleich gross dargestellt, weil es nur Aussenmasse hat. IE fasst die Masse als Aussenmasse auf und zählt das padding und die margins weg, NS zählt das padding und die margins zu den Massen noch dazu. Das Fehlverhalten von IE kann ausgetrickst werden mit dem:
Quirksmode
Siehe auch Boxmodel
Scrollbox
overflow:auto
Zur Grössenangabe: minwidth, minheight und maxwidth, maxheight
Zum Überfüllen: overflow:auto oder scroll oder hidden bzw. visible
Wenn der Container zu wenig Platz für seinen Inhalt bietet, kann man automatisch eine Scrollbar zur Verfügung stellen, oder oder erzwingen (auch für die Breite) oder den Inhalt abschneiden oder den Container strecken. auto macht wohl am meisten Sinn!
Interaktivitäten
visibility:visible oder hidden
Der super Clou an den Containern ergibt sich aber erst in der Kombination mit JavaScripts; welche die Container mit visibility oder position durch Mous-Aktionen ein- und ausblenden oder verschieben lassen!
Somit betreten wir das dynamische Zeitalter von DHTML !
Check den Code.