[CSS:] Inhalt in statisch positioniertem Container ausrichten

Dieses Thema im Forum "Web Page Design" wurde erstellt von maceis, 08.01.2006.

  1. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    MacUser seit:
    24.09.2003
    hallo zusammen,

    ich suche nach einer Möglichkeit, den Inhalt eines statisch positionierten div Containers am unteren Rand auszurichten.
    Geht das überhaupt?

    Konkret geht es um eine Tabelle in einem Footer, die als Ganzes am unteren Rand des Footers erscheinen sollte.
    "#footer {vertical-align: bottom;"} habe ich schon probiert, das klappt aber nicht wunschgemäß.
     
  2. danlo

    danlo MacUser Mitglied

    Beiträge:
    372
    Zustimmungen:
    0
    MacUser seit:
    03.09.2005
    statisch geht es nicht. positionier einfach die tabelle absolut mit bottom: 0px.
     
  3. dms

    dms Gast

    Irgendwie wiedersprichst Du Dir, danlo. :) Sofern das Div doch fest positioniert ist (relativ/absolut) lässt sich mit

    position:absolute;
    bottom:0;

    die Tabelle am unteren Rand des Div's festtackern.
     
  4. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    MacUser seit:
    24.09.2003
    Das geht leider nicht, da die Elternelemente nicht fest positioniert sind.
    Ich habe also keinen festen Bezugspunkt.

    Das hatte ich befürchtet.
    Werd ich dann wohl in HTML lösen: <td height=55px>
    Und in der Tabellendefinition: "vertical-align: bottom;"

    Trotzdem Danke für Eure Mühe ;).
     
  5. dms

    dms Gast

    Meinen Beitrag hast Du aber gelesen, oder?
    Ich führ das mal etwas genauer aus.

    Dem Elternelement gibst Du ein position:relative. Das tut Ihm und sonst keinem weh. Hat keinerlei Auswirkungen, bis auf dass alle absolut positionierten Kindelemente sich nicht mehr am Body, sondern am Elternelement ausrichten.

    Wenn ich Dich richtig verstanden habe ist das Deine Lösung:

    Code:
    #footer {
       position:relative;
    }
    #footer table {
       position:absolute;
       bottom:0;
    }
    Code:
    <div id="footer">
       <table>....</table>
    </div>
     
  6. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    MacUser seit:
    24.09.2003
    Ja, habe ich ;).
    Soweit ich das bisher beobachten konnte, hat das überhaupt keine Auswirkungen. Bei Deinem unten angebenen Code erhalte ich dasselbe Ergebnis wenn ich das "position:relative" weglasse.

    In beiden Fällen wird die Oberkannte der Tabelle an der Unterkante des Footers ausgerichtet.
    Ich müsste also bottom: -"höhe der tabelle" schreiben.
    Da die genau Höhe der Tabelle nicht sicher bekannt ist, funktioniert das aber auch nicht.
     
  7. dms

    dms Gast

    Das muss dann an irgendwelchen anderen Definitionen bei Dir liegen. Ich bau Dir nachher mal ein Beispiel zusammen, bin mir ziemlich sicher dass das so geht.
     
  8. dms

    dms Gast

    OK, wir haben beide recht. Theoretisch geht es so. ;) Praktisch auch, in allen von mir getesteten Browsern ausser Safari. Der stellt die Tabelle wie von Dir beschrieben unter dem Footer dar. Sogar der MacIE bekommt es besser hin. Ist also ein Bug in Safari wenn ich das richtig sehe.

    [DLMURL="http://tmp.schroeder-daniel.de/maceis_bottom_example.html"]Meine Testseite[/DLMURL].
     
  9. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    MacUser seit:
    24.09.2003
    Vielen Dank für die Mühe, die Du Dir gegeben hast.

    Sieht fast so aus als ob das wirklich eine Sache ist, die nur Safari betrifft.
    Wie auch immer - mit der HTML Lösung kann ich leben; ist ja nur eine Kleinigkeit in einer einzigen Datei.
     
  10. dms

    dms Gast

    Kein Ding. Man muss alles selbst mal ausprobiert haben um zu wissen was wirklich geht und was nicht. Ist also purer Eigennutz. ;) Und ich bin wieder eine Kleinigkeit schlauer.
     
Die Seite wird geladen...