Äusserer Layer wird durch inneren Layer nicht "gedehnt"

[Jörn]

Hi,

Ich habe auf meiner Seite viele veschachtelte Layer (div). Allerdings muss ich irgendwie überall bei der Höhenangabe eine absolute Zahl angeben weil sich der äussere Layer nicht entsprechend dem Inhalt aus dem inneren Layer ausdehnt.

Beispiel :

Layer 1 hat "static" als Position und 3 sublayer und ansonsten keine Höhenangabe. Seine Unterlayer sind Layer A+B.

Layer 2 hat auch "static" als Position keine sublayer und eine Höhenangabe von 100px.

Wenn der Unterlayer A gezwungen durch seinen Inhalt sich auf, sagen wir mal, 500px ausdehnt dann würde ich vermuten dass Layer 2 sich nun 500px vom oberen Bildschirmrand befinden würde, da der ausgedehnte Layer A in meiner Anschauung auch Layer 1 auf diese Grösse ausdehnen sollte und Layer 2 nun demententsprechend darunter auf dieser Höhe sein sollte.

Anscheinend missversteh ich da allerdings was, da Layer 2 sich dann viel lieber unter einem dünnen Streifen (der wohl Layer 1 sein soll)vom oberen Bildschirmrand befindet).

Ich hoffe die Angaben reichen da ich gerad' nicht den Nerv hatte vernünftige Code-Stückchen rauszuschneiden. Entschuldigung deswegen.

[Orlando]

Hi, Jörn

...

Ich hoffe die Angaben reichen da ich gerad' nicht den Nerv hatte vernünftige Code-Stückchen rauszuschneiden. Entschuldigung deswegen.

Ohne Code ist es relativ schwierig, dazu etwas zu sagen, ohne auf die Glaskugel zurückgreifen zu müssen. Eine Besichtigung wäre allerdings nett. Die Seite ist nicht zufällig online?

LG Orlando

[Jörn]

Da es sich bei der ganzen Sache um einen Wettbewerbsbeitrag handelt kann ich die Seite noch nicht veröffentlichen. Ich versuch die Situation mal zu konstruieren.

CSS :

.middlelayer {
 position: static;
 background-color: #FFFFFF;
 width: 100%;
}

.topborderlayer {
 background-color: #CCCCCC;
 width: 100%;
 position: static;
 height: 100px;
}

.bottomborder {
 background-color: #CCCCCC;
 width: 100%;
 position: static;
 height: 100px;
}

.sublayer (EXEMPLARISCH) {
 background-color: #AAAAAA;
 width: 30px;
 position: absolute;
 height: 100px;
 left: 15px;
 top: 20px;
}

HTML :

<div class="topborderlayer>
</div>
<div class="middlelayer>
 <div class="sublayer>blahblahblah</div>
 <div class="sublayer>blahblahblah</div>
 <div class="sublayer>blahblahblah</div>
</div>
<div class="bottomborderlayer>
</div>

So.. was ich möchte ist dass sich nun z.B. der mittlere Layer entsprechend den BLAHS in seinen sublayern ausdehnt... So dass dann der bottomborder-Layer erst DANN beginnt wenn auch wirklich die blahs ein Ende haben. Ich hoffe das hilft weiter.

[Orlando]

Hi, Jörn

.middlelayer {
position: static;

static ist default, muss daher nicht unbedingt angegeben werden.

background-color: #FFFFFF;
width: 100%;
}

.topborderlayer {
background-color: #CCCCCC;
width: 100%;
position: static;
height: 100px;
}

.bottomborder {
background-color: #CCCCCC;
width: 100%;
position: static;
height: 100px;
}

.sublayer (EXEMPLARISCH) {
background-color: #AAAAAA;
width: 30px;
position: absolute;

Warum absolute Positionierung? Damit bekommst du es nie hin, wenn der Inhalt der darüber angeordneten DIVs variabel ist. Lass' es einfach weg - damit müsste es bereits klappen. Zur Not kannst du noch per relativer Positionierung verschieben.

height: 100px;
left: 15px;
top: 20px;
}

<div class="topborderlayer>
</div>
<div class="middlelayer>
<div class="sublayer>blahblahblah</div>
<div class="sublayer>blahblahblah</div>
<div class="sublayer>blahblahblah</div>
</div>
<div class="bottomborderlayer>
</div>

Ich nehme an, die fehlenden " am Ende der Klassenzuweisungen sind kein Bestandteil deiner Seite ;-)

LG Orlando

[Jörn]

Vielen vielen Dank für deine Hilfe soweit. Es hat sich schon gebessert aber ist noch nicht ganz richtig . Ich hol mal noch weiter aus :).

Also mein Mittellayer hat 3 sublayer :
Links (NAV), Mitte (TEXT), Rechts (Sekundäre NAV)

Der Mittellayer und der rechte Layer sind variabel. Der linke Layer bleibt so. Wenn ich das jetzt mit relativ mache wie du gesagt hast, ist schon mal das Problem gelöst, dass der Fusslayer sich auch wirklich unter dem Inhalt der Sublayer des Mittellayers befindet. Allerdings habe ich jetzt das Problem dass z.B. der rechte Layer je nachdem wieviel Text in der Mitte steht ja weniger oder mehr weiter "unten" ist und ich dementsprechend stark "gegensteuern" muss mit unterschiedlichen top-Werten (-50px, -100px...etc.). Das war glaube ich auch der Grund warum ich gleich absolute genommen habe. Was kann ich da jetzt machen?