✔ Nur mit JavaScript möglich?

[Atmosphinx]

Hi

Auch wenn das Thema erst kürzlich wieder augegriffen worden ist, möchte ich es nochmals anschneiden, weil es sich um ein zentrales, verbreitetes Problem zu handeln scheint und meines Wissens noch nirgends befriedigend gelöst wurde: Welche Möglichkeiten gibt es ein CSS-basiertes dreispaltiges Layout einzurichten, dass sich die Höhe der Elemente nach der längsten richten?

Die drei höhenvariablen (d.h. dynamischen) "Spalten" sollen dabei in einem (Haupt)-Element platziert werden (vgl. die Illustration im Anhang). Eine Lösung scheint JavaScript zu sein. Könnte mir vielleicht jemand den Trick hierbei erklären? Ich kenne mich mit JavaScript nicht allzu gut aus (und wohl nicht nur ich), weshalb eine verständliche Antwort sehr hilfreich wäre ...

Auf der anderen Seite muss es doch auch eine CSS-interne Lösung geben, die innen platzierten Elemente an der Höhe des sie umgebenden auszurichten. "Height: 100%" beziehen Firefox & Co. ja leider auf das Anzeigefenster. Wer hat eine Idee?

Ich bin um jede Hilfe froh
Atmosphinx

 

[nice2kn0w]

4 <divs>
1 mit height 100%
die anderen 3 <divs> relativ setzen
und float verwenden

 

[Atmosphinx]

Die Darstellung des dreispaltigen Layouts ist an sich kein Problem und muss logischerweise mit floating und div's realisiert werden. Nur ist es leider (zumindest für mich) ein Problem, alle Elemente gleich lang auszurichten. Was die Deklaration position:relative in diesem Zusammenhang soll, ist mir schleierhaft. Die Basisinterpretation static belässt die Elemente auch im normalen Textfluss.

Hat jemand eine andere Idee?

 

[c2uk]

Du könntest es grafisch lösen, aber nur wenn Du eine feste Breite verwendest und Du keinen zu aufwendigen Hintergrund eh schon verwenden willst, und dann wäre es auch nur eine "optische Täuschung".

 

[hela]

Hallo Atmosphinx,

... Nur ist es leider (zumindest für mich) ein Problem, alle Elemente gleich lang auszurichten...

Nicht nur für dich. Mit dem Problem haben sich schon viele befasst und nach meinen Kenntnissen ist es noch niemandem gelungen, da es in CSS derzeit wohl keine Möglichkeit gibt, die Höhe eines Elements an die Höhe eines anderen anzugleichen. Die Eigenschaft "height:100%;" ist ungeeignet, da sie sich immer auf die vorgegebene diskrete (absolute oder relative) Höhe eines Elternelementes bezieht. Aber gerade das willst du ja nicht.

Es gibt aber Möglichkeiten ein solches Verhalten vorzutäuschen: Entweder über eine entsprechendes Hintergrundgrafik, die im umschließenden Block angebracht und in y-Richtung wiederholt wird (z.B. http://www.positioniseverything.net/thr.col.stretch.html) oder man realisiert das über sehr breite farbige Ränder, die den Hintergrund der benachbarten Spaltenblöcke bilden (z.B. http://www.stunicholls.myby.co.uk/layouts/3cols.html) oder es lassen sich bestimmt noch andere Tricks finden.
Ein Workaround mit JScript über den expression-Ausdruck in den Stylesheets ist IE-proprietär und die Verwendung von JavaScript würde bedeuten, dass die Werte beim laden der Datei gesetzt und nach Änderung der Fenstergröße aktualisiert werden müssten. Und falls JavaScript im Browser deaktiviert ist, dann war eh alles vergeblich.

Wahrscheinlich ist es das beste, wenn du dir mal eine von den o.g. Möglichkeiten ohne die Verwendung von JScript bzw. JavaScript ansiehst.

 

[Atmosphinx]

Die Breite sollte variabel sein (ca. 750-950px), da man ja auf die "Exoten" mit einer 800x600er Auflösung Rücksicht nehmen muss. Trotzdem möchte ich einen Hintergrund, wie im Anhang ein "Baustein" davon zu sehen ist. Der weisse Bereich soll sich dabei der Fensterbreite (im erwähnten Rahmen) anpassen.

Meine Idee, war es, den Randelementen (#main-left und #main-right) je die Hälfte des Farbverlaufs als Hintergrund zuzuweisen. Das mittlere Element (#main-center) sollte dabei weiss bleiben. Dadurch kann genau der gewünschte Effekt mit dem scheinbar breitenvariablen Weiss in der Mitte erzielt werden. Es gelingt mir nur nicht, die Randelemente über die ganze Höhe des umschliessenden Elements (#main) bzw. des höhenbestimmenden Elements (#main-center) nach unten zu ziehen.

Vielleicht kommt ja nun einer auf eine Idee, wie man die Randelemente auch über height: 100% (ganze sichtbare Fensterhöhe) strecken kann. Sonst muss ich wohl die Hoffnung auf ein breitendynamisches Layout aufgeben.

Atmosphinx

 

[hela]

Wenn du die Spaltenblöcke #main-left und #main-right mit einer Hintergrundgrafik belegen willst, sollten sie dann eine feste absolute Breite oder eine feste relative Breite (wie im vorhergehenden Thread) mit Einschränkung durch min-width haben?

 

[Atmosphinx]

Die Blöcke #main-left und #main-right haben eine feste relative Breite (width: 24%) und eine indirekte Mindest- bzw. Maximalbreite, da #main mit min-width: 750px bzw. max-width: 950px definiert ist.

Im Anhang seht ihr ein Beispiel, wie ich mir die drei Main-Blöcke so ungefähr vorstelle, jedoch ohne eine explizit definierte Höhe von #main. Ich habe die Elemente mit border: 2px dotted black umgeben, damit man sie voneinander unterscheiden kann.

Ich hoffe, Ihr könnt Euch etwas darunter vorstellen.
Atmosphinx

 

[Quaese]

Hi,

wenn der mittlere Container immer die Höhe vorgibt, hätte ich eventuell einen Lösungsansatz.

Zunächst ein alles umschliessendes DIV mit relativer Positionierung. Damit können enthaltene,
absolut positionierte Elemente relativ zu ihm ausgerichtet werden.

Der mittlere Container erhält eine minimale Höhe von 1%, die sich dynamisch an den Inhalt anpasst.
In Abhängigkeit dieses Containers ändert sich auch die vertikale Ausdehnung des umschliessenden
DIVs.

Die linke und rechte Spalte werden absolut zum umschliessenden Element angegeben. Über
top und bottom erhält das Elemente in Non-IE-Browsern seine Höhe, in IEs durch einen CSS-Filter
über height:100%.

In den gängigen Browsern (IE5.0, IE 5.5, IE6, Firefox 1.0, Netscape 7.1 und Opera 7.54) unter
Windows waren alle Tests erfolgreich.

Ich habe dir das entsprechende Dokument mit kommentierten CSS und zusätzlichen Informationen
in den Anhang gepackt.

Ciao
Quaese

 

[Atmosphinx]

Hi Quaese

Vielen Dank für deine Antwort und das Dokument. Der Vorschlag klingt gut und ist auch weit mehr als nur ein "Lösungsansatz". Ich werde ihn mir erst im Detail anschauen müssen und dich danach je nach dem nochmals mit dem einen oder anderen sich ergebenden Problemchen belästigen müssen.

Ciao
Atmosphinx