Faux-Colums? Nein! Andere Lösungsmöglichkeiten?

[Dissolution]

Hallo zusammen liebe Community!

Schon immer habe ich mich gegen Tabellen für Layouts gewährt, habe mich bemüht auf .css und DIVs zu setzen, doch für ein neues Projekt treibt mich ein allzu bekannter Fehler in den Wahnsinn.

Für ein vBulletin 4 habe ich ein grafisches Layout erstellt und es sah ganz gut aus. Allerdings wirkt es auf verschiedenen Auflösungen anders und nunja, das Layout soll, so der Wunsch, überarbeitet werden. Die Hintergrundgrafik die den Inhalt umspannt soll in 3 verwandelt werden... .

Schnell war die Idee da ein 3 spaltiges Layout zu entwerfen und die Hintergrundgrafik aufzuteilen.

Also 3 Divs zu 20%,60% und wieder 20%.

Die beiden Äußeren sollten nur die Grafiken enthalten, die mittlere den eigentlichen Content. Damit wäre das ganze Layout "halbfluid" gewesen, viel flexibler was verschiedene Bildschirme angeht und doch immer sehr gut lesbar. (Ansonsten eben noch mit min/max-width - Werten)

Aber wie wir ja alle wissen und woran ich schmerzvoll erinnert wurde... Divs wachsen vertikal nicht miteinander. Eine fixierte Höhe ist aber durch den seeehr variablen Inhalt nicht möglich.

Stunde um Stunde habe ich gesucht, doch auch nach all den Jahren scheint dieses "Problem" nicht als solches erkannt oder schlichtweg nicht lösbar/gelöst zu sein.

Faux-Columns ist eben nicht Sinn der Sache... 1 Background-datei wurde versucht.

Gibt es irgendwelche Insider-Workarounds, oder muss ich wirklich auf Tabellen zurückgreifen? Ich habe Tabellen nämlich seit Jahren nicht benutzt und da das Ganze ein Hobby ist, habe ich sie verlernt Aber gut, das wäre sicherlich wieder erlernbar. Ich will aber erst dann darauf zurückgreifen wenn ich alles andere probiert habe.

Liebe Grüße,
Dissolution

 

[sokie]

AW: Faux-Colums? Nein! Andere Lösungsmöglichkeiten?

ein link zum beschriebenen Projekt würde die Sache doch sehr vereinfachen.

 

[Dissolution]

AW: Faux-Colums? Nein! Andere Lösungsmöglichkeiten?

ein link zum beschriebenen Projekt würde die Sache doch sehr vereinfachen.

Durchaus ja! Da das Projekt sich allerdings noch nicht online befindet gestaltet sich das als schwierig. Noch dazu wo vBulletin 4.0 erst im RC-Stadium angelangt ist.

Ich habe das Problem so gut es ging erklärt, aber wenn etwas nicht verständlich ist so bitte ich um Rückmeldung.

Es geht schlichtweg darum 3 DIVs nebeneinander zu haben wobei alle die selbe Höhe haben sollen, die durch variablen Inhalt im mittleren DIV definiert sei.

Leider war meine stundenlange Suche nicht erfolgreich (bin übrigens immer noch dabei)

 

[reinholdi]

AW: Faux-Colums? Nein! Andere Lösungsmöglichkeiten?

eine genauere Beschreibung wäre von Vorteil, dann bekommst du auch geholfen!

 

[wex_stallion]

AW: Faux-Colums? Nein! Andere Lösungsmöglichkeiten?

Und ist natürlich alles ganz dolle geheim und so …

Was mich aber dennoch interessieren würde: Warum soll die Höhe sich aus dem Content des mittleren DIV-Container ergeben?

Was, wenn im mittleren vier Zeilen sind, im linken aber nur eine. Dann würde doch links was fehlen.

 

[Dissolution]

AW: Faux-Colums? Nein! Andere Lösungsmöglichkeiten?

Und ist natürlich alles ganz dolle geheim und so …

Hmm, Sarkasmus im Internet wirkt nicht halb so toll wie von Angesicht zu Angesicht. Fakt ist, dass ich keinen Zugang geben kann, da kein Webspace und damit keine Möglichkeit das Ganze Online zu stellen gegeben ist.

Was mich aber dennoch interessieren würde: Warum soll die Höhe sich aus dem Content des mittleren DIV-Container ergeben?

Was, wenn im mittleren vier Zeilen sind, im linken aber nur eine. Dann würde doch links was fehlen.

Und genau das soll nicht sein! Ich frage ja nach einem Workaround.
Tabellen "wachsen" vertikal mit, DIVs tun das nicht.

Ziel ist es, dass 3 DIVs nebeneinander die selbe Höhe haben, unabhängig vom jeweiligen Inhalt.

In der Mitte ist der variable Content (News, Forenbeiträge etc. pp) und links und rechts davon sind jeweils Grafiken (Hintergründe) die sich vertikale solange wiederholen sollen bis der variable Inhalt ein Ende erreicht hat.

eine genauere Beschreibung wäre von Vorteil, dann bekommst du auch geholfen!

Dazu müsste ich wissen wo es harkt... ich habe es jetzt mehrfach erklärt und ich kenne keine anderen Worte dafür.
Wieso greift man auf Faux-Colums zurück? Weil man möchte, dass die einzelnen DIVs die selbe Höhe haben.

 

[Chrisnew]

AW: Faux-Colums? Nein! Andere Lösungsmöglichkeiten?

Dies sollte sich doch ganz einfach mit einem leeren .gif lösen lassen, so wie bei den Tabellen gewohnt, kann ja auch ein div Container an bzw. mit einem unsichtbaren Gif ausgerichtet werden, wenn Du das Ganze noch mit php verknüpfst kannst du ja das gif bzw. deren Werte entsprechend dem Inhalt ändern.

 

[wex_stallion]

AW: Faux-Colums? Nein! Andere Lösungsmöglichkeiten?

Du kannst eine feste Höhe benennen. Das können z.B. 600 Pixel sein oder 80% Viewport.

Dann hast du (einfach gesagt) drei nebeneinanderseiende Rechteecke gleicher Höhe.

DIV-Container funktionieren dummerweise (manche finden es auch gut) eben anders als Tabellen. Das kann man toll finden oder auch grottenscheiße … ändern kann man es kaum.

Ich würde eher zu einer relativen Viewportangabe tendieren. Das Hintergrundmuster in den Boxen kannst du ja entsprechend anlegen.

Aber es ist sinnfrei irgendeinem DIV die Höhenhoheit geben zu wollen, denn irgendwann macht immer "das falsche" zuviel Raum. Und sei es nur im billigen Internetcafé auf 800 x 600 Pixel-Monitoren.

 

[Dissolution]

AW: Faux-Colums? Nein! Andere Lösungsmöglichkeiten?

Du kannst eine feste Höhe benennen. Das können z.B. 600 Pixel sein oder 80% Viewport.

Wie bereits erwähnt geht das nicht, da der Content einmal 1000px hoch sein kann, dann wieder 10000px... .

DIV-Container funktionieren dummerweise (manche finden es auch gut) eben anders als Tabellen. Das kann man toll finden oder auch grottenscheiße ? ändern kann man es kaum.

In meiner Einleitung erwähnte ich, dass ich seit jeher auf DIVs und .css setze, mich nie mit Tabellen beschäftigt habe - nicht umgekehrt.

Demnach gibt es keine Lösung für das Faux-Columns "Problem", auch nach 4 Jahren nicht.

Schade, dann werde ich für diesen Teil des Design, zu meinem tiefsten Bedauern, auf Tabellen zurückgreifen müssen.

 

[wex_stallion]

AW: Faux-Colums? Nein! Andere Lösungsmöglichkeiten?

Wie bereits erwähnt geht das nicht, da der Content einmal 1000px hoch sein kann, dann wieder 10000px... .

Achso, der ganze Scheiß soll sich noch automatisch passend browserzoomen? 10.000 Pixel Höhe dürften selbst mit einem 30"-Bildschirm schwierig werden. Vielleicht suchst du dir mal ein stillgelegtes Autokino oder sowas in der Art ?

Auch mit Tabellen hättest du dann die "Content"-Tabelle halt gleich hoch, aber z.B. die Navigation wäre dann drei durchzuscheuernde Mouse-Pads entfernt.

 

[Chrisnew]

AW: Faux-Colums? Nein! Andere Lösungsmöglichkeiten?

Ich vermute mal, schlicht und einfach, deine dritte Spalte ist leer, deshalb wird sie auch ignoriert, einfach einen Platzhalter (&nbsp platzieren und dann sollte auch die dritte Spalte zu sehen sein???

 

[Chickenshooter]

AW: Faux-Colums? Nein! Andere Lösungsmöglichkeiten?

Moin

ein Workaround wäre vieleicht das hier:

-begrenze den mittleren DIV auf eine feste Breite.
-mit PHP begrenzt Du den Text, so das er immer in diese Breite passt
-dann wäre es möglich die Zeilen die sicherlich aus einem SQL-Statement kommen zu zählen und mal die Zeilenhöhe der Buchstaben zu nehmen die das ganze dann darstellen sollen. ( sprich eine Zeile hat 15px mal 20 Zeilen aus der DB) = 300px Höhe plus vielleicht noch ein bisschen Sicherheit von 20px
-dann die errechnete Höhe zur Laufzeit mit InlineTags den 3 Divs zuweisen.

hoffe ich konnte helfen!!!

MfG

 

[GrafiKman]

AW: Faux-Colums? Nein! Andere Lösungsmöglichkeiten?

hier mal ein Link der zum Thema passt.

 

[CrayTac]

AW: Faux-Colums? Nein! Andere Lösungsmöglichkeiten?

AUch ich bin in meiner jetzigen Arbeit über das Problem mit den in der Höhe mitwachsenden Spalten gestolpert. Bei mir gestaltete sich das ganz ähnlich.

Ich habe ein 2 Spalten Layout:
Links - Menu mit einer farbigen Hintergrundgrafik (zur Farbtreue)
Rechts - Inhalt mit variabler Länge

Zuerst habe ich mich ja über die Möglichkeit die "Faux-Columns" bietet gefreut da die LinkeSpalte so groß wurde wie der Inhalt der rechte Spalte. Leider musste ich dann feststellen das sich das nur auf den Viewport bezog. Wurde der Inhalt der rechten Spalte so groß das ein Scrollbalken von nöten wurde wuchs die linke Spalte leider nicht mit.

Aus diesem Grund habe ich diesen Beitrag hier mit Interesse verfolgt und hoffte auf ein paar Ideen die das ganze Problem bewätigen können. Nebenbei habe ich aber auch selber noch das Internet bemüht und mich durch x Foren geklickt bis ich auf folgende Seite gestossen bei der dieses Problem anscheinend kein Problem ist.

Die Lösung heißt hier "Equal Height Columns".
Ich habe das natürlich sofort ausprobiert und siehe da es funktioniert.
Es funktioniert sogar sogut das die linke Spalte auch bei dynamischer Veränderung des Inhaltes in der rechten Spalte mitwächst.

Erstmal der Link für alle Ungeduldigen:
Equal Height Columns

Was mich bei diesem Code ein wenig verwirrt sind die ganzen Browser-Fixes.
Ich bin ja recht fit in CSS nur leider ist mein englisch einigermaßen mies, vllt. findet sich ja wer der mir die ganzen Fixes auf deutsch erklären kann.
Grund und Wirkung wäre nett.

Hoffe das konnte helfen.
GL + HF