CSS: Höhe definieren

[MrSpock]

Das ist ein interessanter Beitrag, aber es ist wie Phoenix gesagt hat, nicht so einfach über das YAML Framework zu erledigen.

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

[BUG]

Hast du display: table und co. schon mal angeguckt? Vielleicht bekomst du es damit hingebastelt.


Edit: Alternativ dazu ... mal in die Doku gucken: Equal Heights Grids
Das wird vermutlich das sein, was am nächsten herankommt ... allerdings für ein Grid

[nuclearping]

Ich hab mit dem YAML-Framework noch nicht gearbeitet. Hab grad mal über deren Webseite gestöbert. Sieht interessant aus. Nutze bisher immer nur Bootstrap. Kenne das Problem aber auch aus meinen eigenen Web-Projekten. Daher sorry, wenn ich mit den Tipps vielleicht am Sinn vorbeischiesse.

Hilft dir das? http://www.ejeliot.com/blog/61

Ansonsten: Hast du eine Möglichkeit, jQuery zu nutzen? Da könntest du sowas wie das machen:

Code:

// HTML
<div class="ym-column">
  <div class="ym-col1 equalheight">...</div>
  <div class="ym-col2 equalheight">...</div>
  <div class="ym-col3 equalheight">...</div>
</div>

// jQuery
$(function() {

equalHeight = function(container){

    var currentTallest = 0, rowDivs = new Array(), $el, marginBottom = 0;
    
    $(container).each(function() {
        $el = $(this);        
        $($el).height('auto');
        var currentHeight = $el.height();
        if (currentHeight > currentTallest)
            currentTallest = currentHeight;
        rowDivs.push($el);
    });
    for(currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
        rowDivs[currentDiv].height(currentTallest + marginBottom);
    }
};

function setHeights() {
    equalHeight('div.ym-column > div.equalheight');
}

$(window).load(function() {
    setHeights();
});


$(window).resize(function(){
    setHeights();
});

});

[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.