DIV-Container Problem DIVs übereinander stapeln

Computer: Software & Programmierung HTML & CSS
#1

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

#2

Hallo Maexmaex,

um zu erreichen, dass sich die Auflösung nur im oberen leeren Bereich „abspielt“, braucht der haupt-container (#wrapper) eine feste Höhe und Positionierung zum unteren Rand.
Z.B.:


#wrapper {
position:absolute; 
bottom:0px;
width: 100%; 
height:700px;
}

Für die darin enthaltenen Elemente kein position:absolute mehr verwenden. Ausrichtung z.B. über float.

h♥rzlichen Gruß
Nitya

#3

Danke für den Tipp.

Soweit ich gelesen habe, gibts bei float aber nur die Angaben „left“ und „right“. Was ich bräuchte wäre doch „top“ und „bottom“ oder?
Wie kann ich das lösen?

#4

Hallo,

„top“ ergibt sich ja durch den normalen Fluß.
#motto als 1. Blockelement in #wrapper steht oben
#menu mit float:right steht dann unter #motto und am rechten Rand von #wrapper
#content mit einem clear:right und float:right steht dann unter #menu und am rechten Rand von #wrapper


#motto {
width:70%;height:80px;
}

#menu {
float:right;
width: 220px;
height: 80px;
text-align: right;
}

#content {
width: 660px; height: 460px;
clear:right;
float:right;
}

h♥rzlichen Gruß
Nitya

#5

Danke, das funktioniert gut.

Was muss ich denn an deinem Vorschlag ändern, damit bei viel Inhalt im Content-Div der Scrollbalken im Content-Div erscheint und nicht im Wrapper?

#6

für #content overflow:auto setzen

#7

Danke Nitya.

Jetzt hab ich nur noch eine letzte Frage: Der Content-Div soll nicht 480px hoch sein, sondern einfach die restliche Höhe des Bildschirms einnehmen. Also bei kleinen Auflösungen nicht ganz so groß sein und bei größeren Auflösungen dementsprechend höher. Wie mache ich sowas?

Besten Dank!
Gruß
Max

#8

Hallo Max,

entweder alle Elemente im #wrapper relativ in % angeben
oder den Rest an px-Höhe ausrechnen.
Und margin und padding beim Rechnen nicht vergessen!!

h♥rzlichen Gruß
Nitya

#9

Moin!

Nur mal ein paar Punkte zum Klarstellen, quasi zur vervollständigung Deines Hintergrundwissens (was sehr wichtig ist, um viele verschiedene Fragen zu beantworten):

Und zwar habe ich drei DIV-Container, die ich vertikal optimal
bei verschiedenen Auflösungen ausrichten möchte.

Die Auflösung ist für Websites irrelevant.
Das merkst Du auch daran, dass die Layout-Sprache CSS die Auflösung nicht kennt und Du keine Möglichkeit hast, Elemente in Relation zur Auflösung zu setzen.

Relevant ist nur der Viewport. Das ist ein Teil des Browserfensters (der selbst bei gleich großen Browserfenstern auch unterschiedlich groß sein kann und meistens auch ist!) und das Browserfenster muss auch nicht maximiert sein, ist also auch nicht so groß wie das, was die Auflösung vielleicht hergibt.
Grundsätzlich kann man aber sagen, dass man NIE genauso viel Platz für die Website hat, wie die Auflösung hergibt, fast immer ist das deutlich weniger.

hab das mal in zwei Bildern dargestellt (eins für hohe
Auflösungen, eins für niedrige).

Es gibt da - außer vielleicht mit SVG - keine optimale Lösung, aber verschiedene Dinge, insbesondere Images, für verschiedene Auflösungen zu machen, ist in der Regel nicht sinnvoll, insbesondere, weil ja die Auflösung nicht relevant ist. Woran willst Du Dich also orientieren? Es gibt Viewports mit 772x960px Größe, welche mit 799x378px oder auch 200x320px und quasi unendlich viele mehr.

Mein Quelltext sieht momentan wie folgt aus:

Der hat mit HTML nicht viel gemeinsam, außer der Syntax (und die ist nichtmal durchgehend in Ordnung).
Die Semantik fehlt leider völlig.
Und absolute Positionierung ist auch nichts wirklich empfehlenswertes, wenn es nur dazu benutzt wird, Layout zu machen. Denn absolute Positionierung orientiert sich ja nicht an der Größe des Viewports - und das willst Du ja letztlich erreichen.

Vielleicht kann mir ja jemand von euch helfen.

Vielleicht hat Dir meine Zusatzinfo ja sogar was gebracht, wenn was unklar ist, einfach nachfragen, ich verdeutliche das gerne, wenn Interesse besteht (das sollte es). Mehr habe ich jetzt nicht geschrieben, weil ich ja nicht weiß, ob Du dafür im Moment aufnahmebereit bist.

Liebe Grüße,
-Efchen