Layout mit CSS (#div) und rechtsbündiger Spalte

[jemand2]

Hallo,

Ich möchte mit CSS gerne ein Layout definieren. Es soll wie folgt aussehen:

╔═════════════════════════╗
║                         ║
║            1            ║
║                         ║
╠════════════╦════════════╣
║            ║            ║
║            ║            ║
║     2      ║            ║
║            ║            ║
║            ║            ║
║            ║            ║
╠════════════╣     4      ║
║            ║            ║
║            ║            ║
║     3      ║            ║
║            ║            ║
║            ║            ║
║            ║            ║
╚════════════╩════════════╝

1, 2, 3 und 4, das sind die einzelnen Bereiche. Problem macht Bereich 4, denn der wird teilweise weiter unten angezeigt, als er eigentlich sein sollte. Das ist mein Code (Ausschnitt):

#oben {height:100px;padding:0px; background-color:#FFDDDD;}
#mittelinks {width:80%; float:left; padding:0px; background-color:#FF0F00;}
#rechts {width:20%; height: 80%; float:right;padding:0px; background-color:#1F7F0F;}
#untenlinks{width:80%; padding:0px; background-color:#707FF0; position: absolute; top: 300px; left: 4px;

Also, hat einer einen Verbesserungsvorschlag für mich?

[Beat]

1, 2, 3 und 4, das sind die einzelnen Bereiche. Problem macht Bereich 4, denn der wird teilweise weiter unten angezeigt, als er eigentlich sein sollte. Das ist mein Code (Ausschnitt):

#oben {height:100px;padding:0px; background-color:#FFDDDD;}
#mittelinks {width:80%; float:left; padding:0px; background-color:#FF0F00;}
#rechts {width:20%; height: 80%; float:right;padding:0px; background-color:#1F7F0F;}
#untenlinks{width:80%; padding:0px; background-color:#707FF0; position: absolute; top: 300px; left: 4px;

Also, hat einer einen Verbesserungsvorschlag für mich?

Mir fällt auf, dass Bereich 3 absolut positioniert ist bezüglich einem unbekannten Element.
Ferner vestehe ich "denn der wird teilweise weiter unten angezeigt, als er eigentlich sein sollte." nicht ausreichend, um irgend etwas vorzuschlagen.
Ferner bietet es sich an, dass du deine Aufgabe vereinfachst. Bereich 2 und 3 bilden eine gemeinsame Spalte. (Gut es kann Gründe geben, das anders zu handhaben.)

mfg Beat

[jemand2]

Mir fällt auf, dass Bereich 3 absolut positioniert ist bezüglich einem unbekannten Element.

Wie kann ich den Bereich 3 bezüglich Bereich 2 positionieren?

[Beat]

Mir fällt auf, dass Bereich 3 absolut positioniert ist bezüglich einem unbekannten Element.
Wie kann ich den Bereich 3 bezüglich Bereich 2 positionieren?

Indem du dem Bereich 2 die Eigenschaft position:relative gibst, wobei Bereich 3 ein Childelement von Bereich 2 sein muss.

mfg Beat

[jemand2]

Indem du dem Bereich 2 die Eigenschaft position:relative gibst, wobei Bereich 3 ein Childelement von Bereich 2 sein muss.

Das funktioniert bei mir nicht. Meine CSS-File sieht nun so aus:

#1 {height:20%;padding:0px; background-color:#FFDDDD;}
#2 {width:80%; height: 80%; float:left; padding:0px; background-color:#4FDFDF;}
#3 {position: relative; left: 0px; top: 0px}
#4 {width:20%; height: 80%; float:right;padding:0px; background-color:#9FF0D5;}

Später, in der HTML-Datei, binde ich die Div's wie folgt ein:

<div id="1"></div>
<div id="2">
<div id="3" style="position: relative; left: 0px; top: 0px">
</div></div>
<div id="4"></div>

Aber das Ergebnis ist nicht wie gewünscht. Das bedeutet, der Bereich 3 ist immer an einer anderen Position, je nachdem, was für ein Inhalt in Bereich 2 ist. Weiß jemand weiter?

Danke.

[Beat]

Indem du dem Bereich 2 die Eigenschaft position:relative gibst, wobei Bereich 3 ein Childelement von Bereich 2 sein muss.

Das funktioniert bei mir nicht. Meine CSS-File sieht nun so aus:

also anders wie ich beschrieben habe:
2 sei relative und parent von 3
3 sei (wie zuvor) absolut positioniert

#1 {height:20%;padding:0px; background-color:#FFDDDD;}
#2 {width:80%; height: 80%; float:left; padding:0px; background-color:#4FDFDF;}
#3 {position: relative; left: 0px; top: 0px}
#4 {width:20%; height: 80%; float:right;padding:0px; background-color:#9FF0D5;}

Später, in der HTML-Datei, binde ich die Div's wie folgt ein:

<div id="1"></div>
<div id="2">
<div id="3" style="position: relative; left: 0px; top: 0px">
</div></div>
<div id="4"></div>

'id=4' ist keine valide id. Eine id darf nicht mit einer Zahl beginnen.

Aber das Ergebnis ist nicht wie gewünscht. Das bedeutet, der Bereich 3 ist immer an einer anderen Position, je nachdem, was für ein Inhalt in Bereich 2 ist. Weiß jemand weiter?

mfg Beat

[jemand2]

2 sei relative und parent von 3
3 sei (wie zuvor) absolut positioniert

OK, jetzt funktioniert es! Danke!

Aber eine Sache noch: Bei mir macht es komischerweise einen Unterschied, ob ich den style in der CSS-File definiere oder ob ich es in der HTML-Datei mache. Wenn ich in der CSS-File folgendes schreibe, geht es NICHT:

#divname {position: absolute; left: 8px; top: 370px; width:78%;}

Es geht nur, wenn ich es in der HTML-File so reinschreibe:

<div id="divname" style="position: absolute; left: 8px; top: 370px; width:78%;">

Woran könnte denn das liegen? Das ist doch total komisch... ?

[Harlequin]

Yerf!

Woran könnte denn das liegen? Das ist doch total komisch... ?

Entweder benutzt du wie in den vorherigen Beispielen ungültige IDs (die z.B. mit einer Ziffer beginnen) oder du hast einen Fehler in deinem externen CSS-File (reste von HTML-Code die da nicht hineingehören z.B.)

Gruß,

Harlequin