CSS: Höhe definieren

[MrSpock]

Hallo,

ich habe ein CSS Problem.

Ich benutze das YAML Framework und habe ein div Element ym-column. Dieses hat 3 Kinder (Spalten) ym_col1 bis ym-col3. Ich möchte erreichen, dass alle 3 Spalten immer die gleiche Höhe haben. Deshalb habe ich height auf inherit gesetzt. Die Mutter ym-column nimmt korrekterweise immer die Höhe der größten Spalte an, da ihre Höhe auf auto steht. Schaue ich mir die "errechnete" Höhe von ym-column an und setze diese Höhe manuell z.B auf 600px; folgen alle Spalten mit der Höhe.

Ich habe den Eindruck, dass inherit hier nicht den tatsächlichen Wert der Mutter-Höhe vererbt, sondern den "Wert der Eigenschaft" also "auto". Damit werden die Spalten aber nur so groß wie ihre Inhalte. Wie bekomme ich es hin, dass die Höhe der Kinder den Wert der Höhe der Mutter übernehmen. :gruebel:

[Sir Rufo]

Hilft dir das hier weiter?
http://matthewjamestaylor.com/blog/e...r-css-no-hacks

[Phoenix]

Vermutlich nicht. Das hintereinanderschieben der floatenden Div's dürfte mit YAML als layout container nahezu nicht machbar sein.

[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. :thumb: 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. :mrgreen:

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:

Zitat von MrSpock (Beitrag 1271362)

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. :shock:

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. :stupid:

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. :thumb:

[Valle]

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

Keine schöne Lösung! :(

[BUG]

Zitat:

Zitat von MrSpock (Beitrag 1271461)

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. :stupid:

Layer ... Wir brauchen mehr Layer!!! :mrgreen:

Zitat:

Zitat von Valle (Beitrag 1271482)

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 :wink:

[nuclearping]

Zitat:

Zitat von MrSpock (Beitrag 1271470)

Klappt wie die wilde Wutz. :thumb:

Freut mich. :thumb:

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:

Zitat von Valle (Beitrag 1271482)

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

Keine schöne Lösung! :(

Wer macht denn sowas. :stupid:

[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

[nuclearping]

Ja, wie Jumpy schon angemerkt hat:

Code:

window.onload

wird nach

Code:

document.ready

ausgeführt.

[Valle]

Zitat:

Zitat von nuclearping (Beitrag 1271498)

Wer macht denn sowas. :stupid:

Zitat:

Zitat von BUG (Beitrag 1271489)

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 :wink:

Ist eben eine Frage der Zielgruppe. ;-)

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