CSS: vertical-align: bottom

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS: vertical-align: bottom

    So!
    An alle "Tabellen-sind-Out"-Vertreter. Wie mache ich folgendes in CSS?

    Ich habe ein DIV mit einer festen Breite und Höhe.
    Darin steckt 1. ein unsichtbares weiteres DIV, das später via Scripaculous nach links ausgefahren wird, und 2. ein h1-Element.
    Das h1-Element soll nun am unteren Rand des DIVs kleben statt am oberen.
    Es kann 2-Zeilig werden, das Arbeiten mit padding-top ist also ausgeschlossen.
    Vertical-align: bottom funktioniert wie immer nicht.

    Wie mache ich das, ohne auf eine Tabelle zurückzugreifen?

  • #2
    Vertical-align: bottom funktioniert wie immer nicht. Wie mache ich das, ohne auf eine Tabelle zurückzugreifen?
    position:absolute/relative (habs grad nicht aufm Schirm) mit bottom:0?

    Kommentar


    • #3
      Vertical-align: bottom funktioniert wie immer nicht.
      vertical-align gilt auch nur für inline-elemente. und was ist eine überschrift? mal daran gedacht, beim unsichtbaren div mit visibility zu arbeiten? dann wird der platz reserviert und du kannst bei besagten div mit margin-bottom arbeiten.

      peter
      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
      Meine Seite

      Kommentar


      • #4
        Original geschrieben von TobiaZ
        position:absolute/relative (habs grad nicht aufm Schirm) mit bottom:0?
        Das ginge nur, wenn das Element selbst absolute positioniert wäre, das darf in dem Kontext nicht sein.

        Kommentar


        • #5
          Original geschrieben von Kropff
          vertical-align gilt auch nur für inline-elemente. und was ist eine überschrift? mal daran gedacht, beim unsichtbaren div mit visibility zu arbeiten? dann wird der platz reserviert und du kannst bei besagten div mit margin-bottom arbeiten.

          peter
          Das unsichtbare DIV ist glaube ich nicht das Problem, nur die Positionierung des h1. Da dieses bei mehreren Knöpfen unterschiedlich hoch sein kann (1-2zeilig), kann ich es nicht fest positionieren.
          Der Firefox 3 ignoriert das vertical-align, auch wenn ich das h1 als display:inline setze!
          Was mache ich falsch?

          Kommentar


          • #6
            Was mache ich falsch?
            dich wie jhaustein zu benehmen?

            poste mal code oder noch besser ein online-beispiel. ich muss das sehen, um es beurteieln zu können.

            peter
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              Meiner Meinung funktioniert das vertikale Ausrichtung ohne Tabellen zu gut wie gar nicht. Das ist eines der größten Schwachstellen von CSS-basierten Layouts.

              Einigermaßen korrekt funktioniert die CSS-Eigenschaft vertical-align sowieso nur bei Tabellenzellen.

              Der einzigste Workauround ist, das äußere DIV mit einem "display:table-cell" zu versehen. Dann versteht zumindest der Firefox 3 das vertical-align korrekt.

              IE7 packt es aber nicht, Firefox < 2 habe ich nicht getestet.
              Zuletzt geändert von eintrachtemil; 29.08.2008, 16:08.
              Simploo CMS - das einfache Webseiten-Bearbeitungsprogramm

              Kommentar


              • #8
                Original geschrieben von Kropff
                dich wie jhaustein zu benehmen?
                Autsch

                Kommentar


                • #9
                  poste mal code oder noch besser ein online-beispiel. ich muss das sehen, um es beurteieln zu können.
                  So schwer ist das doch nicht vorzustellen.

                  Online-BEispiel

                  @eintrachtemil: Danke für die detaillierte Info! Mit display:table-cell hab ichs aber nicht mal im Firefox 3 zum Laufen bekommen. Hmmm.
                  Zuletzt geändert von pekka; 29.08.2008, 20:51.

                  Kommentar


                  • #10
                    *push*
                    Na, keiner eine Idee?

                    Kommentar


                    • #11
                      Überelement: position:relative;
                      Das unten hinzuklebende Element: position:absolute; bottom:0px;
                      [FONT="Helvetica"]twitter.com/unset[/FONT]

                      Shitstorm Podcast – Wöchentliches Auskotzen

                      Kommentar


                      • #12
                        Original geschrieben von unset
                        Überelement: position:relative;
                        Das unten hinzuklebende Element: position:absolute; bottom:0px;
                        Das klingt gut, werde ich morgen mal ausprobieren!

                        Kommentar


                        • #13
                          Schon im anderen Thread gesagt, klappt wunderbar, vielen Dank!

                          Kommentar

                          Lädt...
                          X