CSS: Höhe definieren

[jobo]

Zitat von MrSpock:

Hätte ehrlich gesagt gedacht, dass es in HTML / CSS einfacher wäre, drei gleich hohe Spalten zu erzeugen.

Hab vor 5 oder 8 Jahren mal damit eine kleine Seite gebastelt, erinnere mich noch daran, dass man verschiedene Grundlayouts "fertig" bekommt und einfach adaptieren kann.
Damals habe ich zum ersten Mal mitbekommen, dass man hier verschiedene Konzepte verfolgen kann, die dann eben in den Grundlayouts teilweise umgesetzt waren.

Ich hab davon nicht viel Plan, aber den Verdacht, dass Du da vielleicht etwas umsetzen willst, was nicht in das verwendete Basis-Layoutkonzept gehört bzw gegenläufig ist.

Hier ein Link: http://www.yaml.de/docs/index.html#yaml-layouts
Abschnitt "Equal Height Column Rulers" klingt vielleicht interessant.

[MrSpock]

Die Sache ist noch etwas komplizierter.

Ich nutze typo3, um ein CMS aufzusetzen. Dabei benutze ich ein CSS Gerüst, welches ich über thinkintags.com definiert habe, welches wiederum auf das YAML Framework setzt.

In thinkintags habe ich nicht mit YAML Grids gearbeitet, sondern mit ym-wbox und ym-columns, so dass die Equal Height Grids jetzt nur schwer umsetzbar sind. Der Ansatz von nuclearping mit JQuery könnte aber klappen. Und über jQuery arbeitet auch SyncHeight aus dem YAML Framework. das werde ich mir jetzt beides nochmal anschauen.

[MrSpock]

Danke hat super geklappt mit jquery. Habe j3query über den extentionmanager installiert. Dann nur jcore als zu ladende lib angeklickt. Dann über

Code:

includeJS.file1 = fileadmin/yaml/add-ons/syncheight/jquery.syncheight.js

den JS Code geladen und in diese Datei noch den Code:

Code:

$(document).ready(function(){
  $('.ym-col1, .ym-col2, .ym-col3').syncHeight({ updateOnResize: true });
});

eingefügt, damit alle 3 Spaltenhöhen synchronisiert werden.

Klappt wie die wilde Wutz.

[Valle]

Und damit ist das Layout für alle, die JS deaktiviert haben, kaputt.

Keine schöne Lösung!

[BUG]

Zitat von MrSpock:

Ich nutze typo3, um ein CMS aufzusetzen. Dabei benutze ich ein CSS Gerüst, welches ich über thinkintags.com definiert habe, welches wiederum auf das YAML Framework setzt.

Layer ... Wir brauchen mehr Layer!!!

Zitat von Valle:

Und damit ist das Layout für alle, die JS deaktiviert haben, kaputt.

Das sind wenige; und es ist nicht gerade so, als ob die dadurch unbedienbar würde (wie bei manchen Menüs).
Die Alternativen bei diesem Problem sind auch nicht gerade schön

[Valle]

Zitat von nuclearping:

Wer macht denn sowas.

Zitat von BUG:

Das sind wenige; und es ist nicht gerade so, als ob die dadurch unbedienbar würde (wie bei manchen Menüs).
Die Alternativen bei diesem Problem sind auch nicht gerade schön

Ist eben eine Frage der Zielgruppe.

Wollte nur mal auf das Problem aufmerksam machen, falls noch mehr Leute planen das so zu machen.

[nuclearping]

Zitat von MrSpock:

Klappt wie die wilde Wutz.

Freut mich.

Das ist meiner Erfahrung nach bisher auch die einzige Lösung, die zuverlässig und auch Crossbrowser funktioniert. Schade, dass wir mit HTML5 oft immernoch solche "von hinten durch die Brust ins Auge"-Lösungen basteln müssen.

Zitat von Valle:

Und damit ist das Layout für alle, die JS deaktiviert haben, kaputt.

Keine schöne Lösung!

Wer macht denn sowas.

[MrSpock]

Ich finde es akzeptabel, dass das Layout leicht verändert ist, wenn jemand JS ausschaltet.

Eine Unschönheit habe ich ncoh. Ich nutze in meinem CMS das News Plug-In und das Gästebuch. Bei beiden wird offensichtlich ein Teil der Seite erst mit Verzögerung dargestellt, weil noch auf die Datenbank zugegriffen werden muss, um die News, bzw. die Beiträge im Gästebuh zu laden. Die Höhe der mittleren Spalte wird dabei offensichtlich zunächst korrekt ermittelt. Die Beiträge im Gästebuch erscheinen dann aber erst unterhalb der ermittelten mittleren Spalte. Ich nutze ja document.ready als Auslöser zur Angleichung der Spalte. Gibt es noch ein Event, welches später ausgelöst wird, also wenn alle Inhalte der Seite dargestellt sind?

Als "Notlösung" habe ich auf diesen beiden Seiten den Code deaktiviert.

[Jumpy]

Hilft das?

http://stackoverflow.com/questions/3...document-ready