css Teil x

    So, ich hab schon wieder ein css Problem.
    Und zwar möchte ich ganz einfach 3 divs nebeneinander, die in einem übergeordneten div sind.

    Das Problem hierbei:
    - ich möchte keine feste Breite angeben, deshalb scheidet position: absolute aus
    - wenn ich floate geht der Übergeordnete div der eine Art Rand um die anderen divs bilden soll nicht um diese herum, sondern wird gar nicht angezeigt, da er ja auch keinen Inhalt hat (außer den 3 divs halt)
    - mit position: relative sind die divs untereinander
    - mit span werden die ersten 2 divs zwar bei mir nebeneinander angezeigt, allerdings rutscht der dritte span aus mir nicht erfindlichen Gründen unter die anderen 2.

    Irgendwie bekomme ich immer wieder das gefühl, dass die divs nicht richtig durchdacht sind. Mit ner Tabelle hätte ich überhaupt keine Probleme.

    EDIT: Noch eine weitere Verschärfung: der mittlere div soll so hoch sein wie der höhere der beiden anderen divs.

    Ich weiß ja wie man ein normales dreispaltiges Layout macht. Das ist nicht das Problem.

    Das Problem leigt darin, dass der mittlere div (grauer Trennbalken) so hoch sein soll wie der höhere der beiden anderen divs.

    hier der Link zur "Page"
    http://mitglied.lycos.de/sirtobiiv/braun/layout_strich.html

    Dieses Logo hier hat mich übrigens dazu inspiriert. Ein Frabverlauf von oben nach unten wäre also auch nicht schlecht.
    [Blockierte Grafik: http://www.osp-rhein-neckar.de/cms/images/image33232.jpg]

    Wenn du prozentuale Breiten nimmst, fällt mir da keine Lösung ein.
    Außer du vergibst beiden Divs einen identischen height-Wert. Hat dann aber Unflexibilität zur Folge.

    Bei festen Breiten kannst du nach dieser Anleitung verfahren: http://www.ohne-css.gehts-gar.net/0005.php

    Ursprünglich war ich ein Befürworter von flexiblem Layout. Seit ich jedoch einen 1440er Bildschirm habe, neige ich dazu, den Div's feste Breiten zu geben. Das Layout ist damit besser kalkulierbar und du kannst dir ein Bild machen, wie die Seite überall dargestellt wird. Unabhängig von der Auflösung. Da kann es seltsame Überraschungen geben, z.B. wenn bilder eingebunden sind.

    javascript muss nicht unbedingt sein

    hm die Faux Colums sind auch nicht unbedingt das, was ich suche. ne Hintergrundgrafik muss ja auch nicht unbedingt sein.

    Scheint wirklich schwieriger zu sein als ich dachte. Ich glaube ich werde jetzt einfach dem content nen Rahmen links verpassen und darauf achten, dass der Content immer die längere Spalte ist. Dann hab ich halt meine einrückung von oben des Trennstriches nicht mehr. :cry:

    Moin,

    Zitat von NyctalusNoctula

    javascript muss nicht unbedingt sein

    hm die Faux Colums sind auch nicht unbedingt das, was ich suche. ne Hintergrundgrafik muss ja auch nicht unbedingt sein.

    Scheint wirklich schwieriger zu sein als ich dachte. Ich glaube ich werde jetzt einfach dem content nen Rahmen links verpassen und darauf achten, dass der Content immer die längere Spalte ist. Dann hab ich halt meine einrückung von oben des Trennstriches nicht mehr. :cry:

    wenn eine kürzere Spalte genauso lang wie die längste sein soll ist "Faux Columns" die übliche verwendete Technik.

    Deine Aussage das sei nicht unbedingt das was suchst läßt entweder auf eine gewisse Beratungsresistenz schließen, oder du verstehst die "Faux Column-Technik" nicht richtig anzuwenden.

    Zitat

    Ich weiß ja wie man ein normales dreispaltiges Layout macht. Das ist nicht das Problem.

    Sorry aber weißt du offensichtlich nicht, oder warum hast du sonst so viele Fehler in deinem Dokument: W3C-Validatorergebnis


    koslowski

    Zitat von koslowski

    Moin,


    wenn eine kürzere Spalte genauso lang wie die längste sein soll ist "Faux Columns" die übliche verwendete Technik.

    Deine Aussage das sei nicht unbedingt das was suchst läßt entweder auf eine gewisse Beratungsresistenz schließen, oder du verstehst die "Faux Column-Technik" nicht richtig anzuwenden.

    Mal ganz abgesehen davon, dass ich deinen Post recht unfreundlich finde, habe ich das System schon verstanden, nur leider lässt sich das Faux Coulums System nicht auf Spalten mit variabler Breite anwenden.
    Ich bin außerdem kein Freund von Hintergrundgrafiken, da sie immer eine gewisse Größe (ich mein hier jetzt Dateigröße) haben. Ist inzwischen vermutlich egal, die Ablehnung kommt wohl noch aus meiner Modemzeit. :roll:

    Zitat

    Sorry aber weißt du offensichtlich nicht, oder warum hast du sonst so viele Fehler in deinem Dokument: W3C-Validatorergebnis
    koslowski

    Wenn du genau geschaut hättest, wäre dir bestimmt aufgefallen, dass diese Fehler alle in den google Adds bzw. in dem Javascript von Lycos vorkommen, das eigentlich ein Werbelayer einblenden soll, dies aber aufgrund des Fehlerhaften Codes nicht tut. Sprich lycos hat keine Ahnung davon von css und javascript. Über die Unfähigkeit von Lycos habe ich mich auch schon des öfteren aufgeregt, da mir der Fehlerhafte Code auch schon Layouts zerschossen hat.

    Hi,

    Zitat


    Mal ganz abgesehen davon, dass ich deinen Post recht unfreundlich finde, habe ich das System schon verstanden, nur leider lässt sich das Faux Coulums System nicht auf Spalten mit variabler Breite anwenden.
    Ich bin außerdem kein Freund von Hintergrundgrafiken, da sie immer eine gewisse Größe (ich mein hier jetzt Dateigröße) haben. Ist inzwischen vermutlich egal, die Ablehnung kommt wohl noch aus meiner Modemzeit. Rolling Eyes

    sorry wenn ich so unfreundlich rüberkomme. Bin manchmal etwas "krachert".
    Ist aber nicht böse gemeint. :)

    Eine etwas unschöne Lösung hätte ich anzubieten:

    Gib dem kürzeren Container soviel padding-bottom das es paßt.
    Das müßtest du dann aber evtl. für jede Unterseite anpassen je nachdem wieviel Text drin ist.

    clear:all gibt es übrigens nicht, nur left, right, both oder none.

    Bei prozentualen Breitenangaben für die Container hast du auch den Nachteil das dein Layout je nachdem in breiten oder normalen Viewports komisch ausschauen kann.

    koslowski

    Zitat

    Gib dem kürzeren Container soviel padding-bottom das es paßt.

    Das passt dann aber nur an dem Bildschirm wo die Seite entwickelt wird (und vergleichbaren anderen). Bei unterschiedlichen Auflösungen sind die prozentualen Div's unterschiedlich breit und damit unterschiedlich hoch.
    Außer der #wrapper hätte eine feste Breite. Aber dann ist auch der Prozentwert immer konstant.

    Ich seh schon, dass ich um ne feste Breite nicht drumrumkomm.
    Werde ich halt ne fest Breite machen. So schlimm ist das auch nicht.

    koslowski: keine Problem, wolltest ha nur helfen

    Danke übrigens für den Hinweis auf clear:all
    ich habs in both geändert, lustigerweise hab ich damit trotzdem den Effekt erreicht, den ich erreichen wollte. ;)

    Noch ne Frage: habe es noch mit heigth: 100% versucht, die Prozentuale Höhenangabe scheint sich aber auf die Fenstergröße zu beziehen und nicht auf das übergeordnete div. warum das denn?
    Ich hätte ja gerne noch nen Farbverlauf im Trennbalken. Wie könnte man das realisieren außer mit ner großen Hintergrundgrafik, die ich je nach Inhalt etwas strecke oder stauche. Kann man Hintergrundbilder dynamisch der sie umgebenden Divgröße anpassen?

    Hi,

    Zitat von sejuma

    Das passt dann aber nur an dem Bildschirm wo die Seite entwickelt wird (und vergleichbaren anderen). Bei unterschiedlichen Auflösungen sind die prozentualen Div's unterschiedlich breit und damit unterschiedlich hoch.
    Außer der #wrapper hätte eine feste Breite. Aber dann ist auch der Prozentwert immer konstant.

    ähem...., könnte es sein das wir etwas aneinander vorbeireden?

    height wird selbstverständlich nicht angegeben, weil die sich ja aus der Menge des Textes der Box und angegebenem vertikalen padding definiert.

    Wenn eine Box width in Prozent hat kann man doch padding-bottom in Pixel oder em angeben (ist ja vertikal und nicht horizonzal!).

    Das hätte ich vielleicht in meinem Posting näher erläutern sollen.
    So kam es wohl mißverständlich rüber.:wink:

    Imho ist das ein unschöner aber gangbarer Weg die Container gleichlang zu machen.

    NyctalusNoctula Hast du in allen wichtigen Browsern geprüft ob richtig gecleart
    wird?
    Der IE schließt die Container nämlich normal ohne clear fälschlicherweise mit
    ein.

    koslowski

    Klar kannst du das machen.
    Aber das Ergebnis ist bei unterschiedlichen Auflösungen nicht einheitlich:

    Nimm nen div mit 50% Breite.
    Bei ner 800er Auflösung ist er 400px breit.
    Bei ner 1440er Auflösung ist er 720px breit.

    Im zweiten Fall passt viel mehr Text rein, da der div breiter ist. Also ist die Höhe des Gesamttextes niedriger als im ersten Div.
    Optimierst du nun für den ersten Fall mit Padding, wird der Paddingwert bezogen auf den zweiten Fall zu niedrig sein.

    Habe die x jetzt nicht abgezählt, aber nur mal zur Verdeutlichung was ich damit meine:

    xxxxxxx xxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxx xxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxx
    xxxxxxx
    xxxxxxx

    Hi,

    oh mann.:oops:

    ja klar, du hast natürlich recht (Wer richtig nachdenken kann, ist immer im
    Vorteil :lol: )

    koslowski