nicht angemeldet
DIVs: Mischung von absoluten und %-Angaben
Hallo,
ich möchte ein Grundgerüst zusammenbauen das wie folgt aussieht:
-------------------------------------------------------------
|Logo |Header Höhe: 30px Breite: flexibel |
|Höhe: 80px |--------------------------------------------|
|Breite: 240px |Content |
|--------------|Höhe: flexibel |
|Navigation |Breite: flexibel |
|Höhe: flexibel| |
|Breite: 240px | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
|-----------------------------------------------------------|
| Footer Höhe: 20px Breite: flexibel |
|---|
Es soll also darauf hinauslaufen, dass sich bei einer Veränderunger der Breite des Browsers Header, Content und Footer anpassen, bei einer Veränderung der Höhe Navigation und Content.
Mein Problem liegt jetzt daran, dass ich nicht weiß wie ich die flexiblen Höhen- und Breitenangaben der DIVs vornehmen soll. (Ob das Ganze absolut oder relativ und verschachtelt sein soll ist noch einmal eine andere Sache ...) Wie sag ich z.B.: dem Content wie hoch er sein soll? Rein mathematisch ist Höhe: 100%-50px und Breite 100%-240px aber das akzeptiert CSS natürlich nicht. Ganz unsauber wäre es natürlich die entsprechenden Werte per Javascript zu berechnen und zuzuweisen, aber das möchte ich überhaupt nicht.
Kann mir jemand einen Schubser in die richtige Richtung geben?
Besten Dank
Tommy
-
Ich würd's als Javascript-Aufgabe sehen.
Stichwort: onResizeInfos dazu gibt's auch hier:
http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htmGruß,
Semaphor-
Ich würd's als Javascript-Aufgabe sehen. [...]
ZUSATZ:
ups ... hab übersehen, daß du javascript als unsauber ansiehst. O-)
Sicher nicht das gelbste vom Ei, aber soweit ich mich erinnern kann,
hat auch Stefan Münz in seinem Buch "Professionelle Websites" ein
ähnliches Problem geschildert und eine solche Lösung angeboten.-
Ich würd's als Javascript-Aufgabe sehen. [...]
ZUSATZ:
ups ... hab übersehen, daß du javascript als unsauber ansiehst. O-)
Sicher nicht das gelbste vom Ei, aber soweit ich mich erinnern kann,
hat auch Stefan Münz in seinem Buch "Professionelle Websites" ein
ähnliches Problem geschildert und eine solche Lösung angeboten.naja, dass das Ganze mit JavaScript und onresize() geht ist schon klar (Danke für den Link, so sauber hätte ich es selber wahrscheinlich nicht gemacht) aber ich hab auf eine Lösung ohne Javascript gehofft.
Meine Traumvorstellung war: zuerst die Elemente mit fixer Größe Aufbauen und dann Elemente Aufbauen denen man sagt: "du füllst den restlichen Platz". Aber so etwas scheint es leider nicht zu geben ...
anke für die Hilfe und lg
Tommy
-
-
-
Yerf!
Kann mir jemand einen Schubser in die richtige Richtung geben?
Die flexible Breite entsteht automatisch über den Defaultwert von width (auto). Diese bewirkt, dass die zur verfügung stehende Breite voll genutzt wird. Bei der Höh funktioniert dies allerding nicht, da hier das Defaultverhalten eine möglichst minimale Höhe bewirkt. Die Ansätze für einen Footer wie im Beispiel laufen meist unter dem Stichwort 'faux Columns', da sollte sich hier im Forum einiges finden lassen.
Gruß,
Harlequin
-
Yerf!
Kann mir jemand einen Schubser in die richtige Richtung geben?
Die flexible Breite entsteht automatisch über den Defaultwert von width (auto). Diese bewirkt, dass die zur verfügung stehende Breite voll genutzt wird. Bei der Höh funktioniert dies allerding nicht, da hier das Defaultverhalten eine möglichst minimale Höhe bewirkt. Die Ansätze für einen Footer wie im Beispiel laufen meist unter dem Stichwort 'faux Columns', da sollte sich hier im Forum einiges finden lassen.
Das mit der automatischen Breite funktioniert gut und auch faux-columns ist ein sehr guter Ansatz. Zwei Probleme stellen sich hierbei jedoch noch:
-
Das Logo links oben ist nicht gleich hoch wie der Header rechts oben, weshalb Navigation und Content nicht auf der selben Höhe beginnen was "float" unmöglich macht. Aber das sollte gelöst werden können indem einfach das Logo ein bisschen kleiner und der Header größer gemacht werden sodass sie die selbe Höhe aufweisen.
-
Der Footer soll immer ganz unten am Ende der Seite aufscheinen. Lässt sich über Position: absolute und bottom: 0px schön lösen. Aber wenn nun der Contentbereich so groß wird, dass man Scrollen muss, verschwindet die Schrollbar hinter dem Footer. Kann ich Content und Navigation also irgendwie sagen, dass sie nicht ganz bis ans Ende des Bildschirms gehen dürfen sondern 20px vorher aufhören müssen?
Danke für deine Hilfe
lg
TommyGruß,
Harlequin
-
Yerf!
- Das Logo links oben ist nicht gleich hoch wie der Header rechts oben, weshalb Navigation und Content nicht auf der selben Höhe beginnen was "float" unmöglich macht. Aber das sollte gelöst werden können indem einfach das Logo ein bisschen kleiner und der Header größer gemacht werden sodass sie die selbe Höhe aufweisen.
Hier hilft evtl. eine zusätzliche Schachtelung. Einfach Logo und Menü in einem Links gefloateten Div zusammenfassen und dann Überschrift und Text in einem 2. Div zusammen.
- Der Footer soll immer ganz unten am Ende der Seite aufscheinen. Lässt sich über Position: absolute und bottom: 0px schön lösen. Aber wenn nun der Contentbereich so groß wird, dass man Scrollen muss, verschwindet die Schrollbar hinter dem Footer. Kann ich Content und Navigation also irgendwie sagen, dass sie nicht ganz bis ans Ende des Bildschirms gehen dürfen sondern 20px vorher aufhören müssen?
Hier könnte ein Padding-Bottom am Content-Container helfen.
Gruß,
Harlequin
-
-