Hallo zusammen,
ich habe ein Problem mit der Formatierung/Anordnung von DIV-Containern, zu dem ich auch noch Durchforsten mehrerer Foren keine Lösung gefunden habe.
Und zwar habe ich drei DIV-Container, die ich vertikal optimal bei verschiedenen Auflösungen ausrichten möchte. (Das horizontale ist egal, da wird bei größeren Auflösungen einfach ein leerer Raum rechts dran gebaut).
Die drei DIV-Container sollen übereinander stehen, das heißt die zwei oberen auf dem unteren aufbauen. Der untere soll in der Höhe variabel sein (je nach Auflösung) und an den zwei roten Fixpunkten (siehe Bilder unten) „befestigt“ sein. Ich hab das mal in zwei Bildern dargestellt (eins für hohe Auflösungen, eins für niedrige).
Bei einer kleinen Auflösung, soll die Höhe des Content-Divs sich so verringern, dass die beiden oberen Div-Blöcke nach unten rutschen und zwar nur soweit, dass noch ein paar Pixel zwischen Apfelmotiv und Motto-Div sind.
Bei einer großen Auflösung soll sich die Höhe des Content-Divs sich so vergrößern, dass die beiden oberen Div-Blöcke soweit nach oben rutschen, dass das Motto-DIV genau mittig zwischen oberen Apfelrand und oberen Seitenrand steht.
So soll es bei großen Auflösungen aussehen:
http://www.bilder-hochladen.net/files/big/4y4c-4.jpg
So soll es bei kleinen Auflösungen aussehen:
http://www.bilder-hochladen.net/files/big/4y4c-5.jpg
Mein Quelltext sieht momentan wie folgt aus:
#wrapper {
width: 100%;
}
#motto {
position: absolute;
top: 15px;
left: 25px;
border: 0px solid blue;
}
#content {
position: absolute;
bottom: 100px;
left: 580px;
width: 660px;
height: 460px;
padding: 10px;
padding-top:0px;
padding-bottom:0px;
overflow: auto;
border: 0px solid blue;
}
#menu {
position: absolute;
bottom: 600px;
width: 220px;
height: 80px;
left: 1030px;
border: 0px;
text-align: right;
}
HTML
Startseite
Programm
Anfahrt / Unterbringung
Anmeldung
Kontakt / Impressum
Inhalte
Vielleicht kann mir ja jemand von euch helfen.
Herzlichen Dank im voraus und ein schönes Wochenende.
Max