nicht angemeldet
Hallo Manuel,
Ich möchte folgendes Ergebnis:
+---+ +------------------+
I 1 I I I
+---+ I I
I 3 I
+---+ I I
I 2 I I I
+---+ +------------------+1 + 2 sollen die Breite 190px und höhe jeweils 50% haben, 3 soll die restliche breite und 100% der Höhe des Bildschirms ausfüllen. Bei einer 1280er wären also 1090px in der breits frei die er ausnutzen könnte.
na, so schwer ist das doch nicht. Zuerst machst du dir Gedanken, in welcher Reihenfolge die Layer definiert werden. Für unsere Zwecke würde sich 1 - 3 - 2 (also von links nach rechts, oben nach unten) anbieten. Soweit alles klar?
OK, für 1 soll gelten:
width:190px; height:50%;
und das folgende Element soll anschließen. Also float:left. Bis hier alles ok?
Für 3 soll gelten:
height:100%; und ein linker Rand von 190 Pixel.
Also margin-left:190px; Das war es auch schon für 3.
2 wird etwas komplizierter.
height:50%; width:190px; sind dir klar? Wir müssen es jetzt nur noch unterhalb von 1 positionieren. Das geht nur absolut.
Also: position:absolute;
Jetzt fehlt nur noch eine Angabe zu top. 50% könnte an dieser Stelle passend sein.
Vermutlich musst du noch margin und padding für <body> und <div> auf 0 setzen, damit 50% + 50% auch wirklich 100% sind. Möglicherweise musst du dann auch noch die Höhe von body und html auf 100% setzen.
Aber nun darfst du wieder alleine weitermachen.
Viel Spaß,
Jochen