css layout

[yakuzza]

hallo,

ich bin gerade dabei ein erstelltes layout vollkommen in css umzusetzen, d.h. ohne tabellen etc..

Nun habe ich aber ein Problem.

Mein aüsserstes div-tag ist für die seitengröße zuständig ist also das elternelement aller anderen verschachtelten div tags. Wie kann ich es erreichen, dass diese layer sich dem inhalt der verschachtelten divs anpasst. Momentan ist es leider so, dass die div tags für die navi und den inhalt sobald sie größer sind als das haupt div dieses einfach überlappen.

Mein Haupt-Div

#container {
    left:100px;
    top: 200px;
    position:absolute;
    width:1000px;

    background-color:#CCFF00;

} 

Die DIVs Innerhalb des oberen DIVs

#box01 {
    position:absolute;
    left:500px;
    top:50px;
    background-color:#00CC66;
    height:400px;
    width: 80px;

}
#box02 {
    position:absolute;
    left:100px;
    top:50px;
    background-color:#0088CC;
    height:400px;
    width: 400px;
} 

Wie gesagt ist das mein erstes CSS Layout und es ist teilweise verwirrend obgleich sehr simpel..

Ich hoffe ihr könnt mir helfen

[plastikbaum]

Gar nicht. Absolut positionierte Layer passen sich ihren "Elternelementen" nicht an. Du kannst höchstens einen weiteren Layer definieren, dessen z-index sich unterhalb des des Elternelementes, aber oberhalb des des "eigentlichen" Elementes befindet. Das klappt manchmal. Manchmal auch nicht (ich habe die Abhängigkeit leider noch nicht herausgefunden). Und ob das auch "normkonform" ist, kann ich auch nicht sagen.

Wenn du die absolute Positionierung vermeiden kannst, würde ich die relative bevorzugen. Damit lässt sich im Prinzip alles erreichen, was man will. Von der Zentrierung der gesamten Seite abgesehen, sofern sie eine feste Breite besitzt und zentriert werden soll - was aber auch bei absoluter Positionierung nicht geht.

[wahsaga]

Re: css layout

dass elemente die größe ihrerer vorfahrenelemente nicht mehr beeinflussen ist nun mal so, wenn du sie aus dem elementfluss nimmst - und genau das macht absolute positionierung.
absolute positionierung nutzt man in einigen sonderfällen (und auch dann nur, wenn man weiß was man tut), aber nicht um das komplette layout darauf aufzubauen.

für den einstieg würde ich dir http://de.selfhtml.org/css/layouts/ ans herz legen wollen.

[yakuzza]

da war ich schon Und dort steht auch folgendes:


"absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat. Scrollt mit."

Mit anderen Worten das mit absolute ausgezeichnete DIV richtet sich am nächsthöheren Elternelement aus, also meinem #containter DIV, oder nicht?

und auch hier:
http://www.barrierefreies-webdesign....ign/layout.php
http://www.andreas-kalt.de/webdesign...yout-erstellen

Es muss doch was geben dass sich meine #containter Ebene dem Inhalt der Kinder anpasst..

[plastikbaum]

Das bezieht sich auf die Position (heißt ja position:absolute und nicht width:absolute . Sprich, wenn du z. B.

div1 { position:absolute;top:30px;left:40px; }

hast und darin

div2 { position:absolute;top:30px;left;40px; }

setzt, dann ist div2 30 Pixel vom oberen Rand von div1 und 40 Pixel vom linken Rand von div1 entfernt, während div1 30 Pixel vom oberen Rand seines Elternelementes (in diesem Fall BODY) und 40 Pixel vom linken Rand entfernt.

Sieht dann z. B. so aus:

|-------------------|
| D1    3           |
|       0           |
|       p           |
|       x           |
|     |----------|  |
|40px | D2       |  |
|     |          |  |
|     |          |  |
|     |          |  |
|     |----------|  |
|-------------------|

[yakuzza]

ja, so dachte ich mir das ja auch Aber mein Problem ist ja nicht die Positionierung sondern dass ich nicht weiß wie ich die DIV1 der DIV2 anpasse (dein Bsp.), so dass div1 sich dem inhalt von div2 anpasst.

[derHund]

verzichte auf die absolute positionierung, dann ergibt sich dein problem nicht. suie ist, wie schon gesagt, nur in ausnahmefällen anwendbar, weil u.a. mit einigen nachteilen behaftet (wie du ja auch festgestellt hast).

schau dir die links an, ich denke , dort findest du mittel und wege, dein design umzusetzen.

[prego]

kleiner Tip. Position relative (also normal) und margin könnten dir helfen.

Das DIV#container kännte man durch aus absolut positionieren, aber auch hier hilf in den meisten fällen margin. Du weißt ja sowieso nicht wie breit das Browserfenster des betrachters ist.

[wahsaga]

Original geschrieben von yakuzza
"absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat. Scrollt mit."

Mit anderen Worten das mit absolute ausgezeichnete DIV richtet sich am nächsthöheren Elternelement aus, also meinem #containter DIV, oder nicht?

ja. und? steht da irgendwo, dass deshalb das kindelement die maße des vorfahrenelementes beeinflusst?
nein, steht da nicht. wäre ja auch unfug, weil dem nun mal nicht so ist. wie ich ja auch bereits sagte.

[yakuzza]

Original geschrieben von wahsaga
ja. und? steht da irgendwo, dass deshalb das kindelement die maße des vorfahrenelementes beeinflusst?
nein, steht da nicht. wäre ja auch unfug, weil dem nun mal nicht so ist. wie ich ja auch bereits sagte.

Darauf bezog sich dieser Post auch nicht. Hierbei ging es um die Ausrichtung. Aber jetzt weiß ich auch auf was du es bezogen hast .

[yakuzza]

Am Schluss wird die #container Layer in der Bildschirmmitte zentriert, dies geschieht über Margins. Aus diesem Grund sollen alle anderen Seitenelemente (divs). Ebenfalls mit positioniert werden.

Je nach Inhalt soll die Hintergrundlayer sich anpassen.. ich werd das mit dem relativ nochmal probieren, aber dabei hatte ich das problem dass ich die elemente vom seitenrand (browserrand) ausgehend positionieren muss, so also eine automatische platzierung wegfällt.. sehe ich das richtig?

[prego]

ein DIV#content zB mit margin: 0px auto; sitzt in der Mitte, zumindest wenn der DocType im IE richtig gesetzt ist. FF und Mozzi könnens so. Alles was sich innerhalb von #content abspielt sollte sich also auch an diesem ausrichten.

http://www.quirksmode.org/css/centering.html