arne: vertical-align funktioniert nicht in div's?

Hallo miteinander,

das Attribut vertical-align funktioniert in Tabellenzellen sehr gut. Wenn ich es in div's anwende zeigt es keine Wirkung:

<div style="vertical-align: bottom; background-color: #CECFCE; height: 50px; width: 300px;">
Wort
</div>

Der Text bleibt am oberen Rand (IE 5.5; Win 2000). Wie kann ich nun Text in div's ausrichten?

Danke im voraus!
arne

  1. Hi Arne,

    das Attribut vertical-align funktioniert in Tabellenzellen sehr gut. Wenn ich es in div's anwende zeigt es keine Wirkung:

    <div style="vertical-align: bottom; background-color: #CECFCE; height: 50px; width: 300px;">
    Wort
    </div>

    Der Text bleibt am oberen Rand (IE 5.5; Win 2000). Wie kann ich nun Text in div's ausrichten?

    Indem du nicht das DIV selbst, sondern den Text ausrichtest...? ;)

    LG Orlando

    --
    SELF-TREFFEN 2002
    http://www.rtbg.de/selftreffen/
    http://www.megpalffy.org/temp/penneninhh.html

    1. Hallo Orlando,

      Indem du nicht das DIV selbst, sondern den Text ausrichtest...? ;)

      LG Orlando

      hm, wenn ich das Attribut in ein td setze richte ich ja auch den Inhalt und nicht die Tabellenzelle aus. Ich habe jetzt - erfolglos - auch noch das probiert:

      <div style="vertical-align: bottom; background-color: #CECFCE; height: 50px; width: 300px;">
      <span style="vertical-align: bottom;">Wort</span>
      </div>

      Text bleibt trotzdem obem :o(

      arne

      1. Hi,

        Ich habe jetzt - erfolglos - auch noch das probiert:

        <div style="vertical-align: bottom; background-color: #CECFCE; height: 50px; width: 300px;">
        <span style="vertical-align: bottom;">Wort</span>
        </div>

        sieh dir mal http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#vertical_align und das zugehörige Beispiel an.

        LG Orlando

        --
        SELF-TREFFEN 2002
        http://www.rtbg.de/selftreffen/
        http://www.megpalffy.org/temp/penneninhh.html

        1. sieh dir mal http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#vertical_align und das zugehörige Beispiel an.

          Hi Orlando,

          das Beispiel bezieht sich auf Tabellenzellen. Das vertical-align dort klappt, habe ich ja schon geschrieben.

          arne

      2. Hi arne,

        hm, wenn ich das Attribut in ein td setze richte ich ja auch den Inhalt und nicht die Tabellenzelle aus. Ich habe jetzt - erfolglos - auch noch das probiert:

        <div style="vertical-align: bottom; background-color: #CECFCE; height: 50px; width: 300px;">
        <span style="vertical-align: bottom;">Wort</span>
        </div>

        Zur not könnte man den Text auch so setzen:

        <div style="background-color: #CECFCE; height: 50px; width: 300px;">
           <span style="position:relative; top:32px;left:0px">Wort</span>
        </div>

        (Ist aber wirklich nur ne Notloesung, da man dann immer wenn sich die Schriftgrösse ändert,
        auch die 'top' und 'left' Werte geändert werden müssen)

        Gruss
        Axel :)

  2. Tag auch

    Mit
    <div style="position:absolute; background:#CECFCE; height:50px; width:300px;">
    <p style="position:absolute; bottom:0px; margin:0px">Wort</p>
    </div>
    klebt der Text am unteren Rand - zumindest mit Mozilla.
    Opera stellt das nur dar, wenn der <p> eine Höhenangabe hat.

    Das Problem bei dieser Konstruktion ist, daß sie nur funktionieren dürfte, wenn der Div positioniert ist.
    Soll der Div Teil des "normalen Elementflusses" sein, mußt Du halt position:relative verwenden.

    Das solltest Du aber wirklich nur als Notlösung betrachten. Eine Schwierigkeit wird z.B. sein, die richtige Höhe des Absatzes zu finden.
    Denn font-size:12px ergibt eben nicht zwangsläufig eine Absatz mit 12 px Höhe. Der Zeichensatz umfaßt eben auch Sonderzeichen mit Ober- bzw. Unterlängen.
    Manche Browser rechnen diese mit ein, andere nicht. Mozilla und Opera handhaben das komplett verschieden.

  3. Hallo nochmal,

    meine Experimente mit der Textausrichtung in Div-"Boxen" hatten den Hintergrund, eine Alternative zum Layout mit Tabellen auszuprobieren. Aber so einfach ist das offenbar nicht. Nach wie vor scheinen Tabellen die einfachste und beste Möglichkeit zu sein, Grafik und Text auf einer Seite zu verteilen.

    Wie sind euere Erfahrungen, wer nutzt noch Tabellen zum Layout und wer kann darauf verzichten?

    Freundliche Grüße
    arne

    1. Hallo nochmal,

      moin

      meine Experimente mit der Textausrichtung in Div-"Boxen" hatten den Hintergrund, eine Alternative zum Layout mit Tabellen auszuprobieren. Aber so einfach ist das offenbar nicht. Nach wie vor scheinen Tabellen die einfachste und beste Möglichkeit zu sein, Grafik und Text auf einer Seite zu verteilen.

      also ich verwende absolte positionierung per css, ist erstens kleiner, zweitens übersichtlicher und drittens kann ich das so besser mit php-includes füllen ;-)

      Wie sind euere Erfahrungen, wer nutzt noch Tabellen zum Layout und wer kann darauf verzichten?

      siehe oben, ich lasse es, denn css-divs und co. kann ich alles per hand machen, bei tabellen geh'ste dabei kaputt...

      Freundliche Grüße
      arne

      Fabian

      ps: ich habe mit mir selbst reinen tidsch gemacht, und ignoriere den ns 4.x, wenn er die css net will...

    2. Hallo nochmal,

      dito

      Wie sind euere Erfahrungen, wer nutzt noch Tabellen zum Layout...

      Nur in absoluten Ausnahmefällen.

      Btw. wieso brauchst Du unbedingt unten ausgerichteten Text in divs? Wenn Du Dein Anliegen etwas ausführlicher formulieren würdest, bekommst Du bestimmt einige Alternativen genannt.

      Thomas J.

    3. Moin!

      meine Experimente mit der Textausrichtung in Div-"Boxen" hatten den Hintergrund, eine Alternative zum Layout mit Tabellen auszuprobieren. Aber so einfach ist das offenbar nicht. Nach wie vor scheinen Tabellen die einfachste und beste Möglichkeit zu sein, Grafik und Text auf einer Seite zu verteilen.

      Die _einfachste_ und beste Möglichkeit, etwas auf einer Seite zu _verteilen_, sind absolut positionierte <div>-Layer. Tabellen sind viel zu unflexibel, wenn tatsächlich noch Änderungen anstehen - damit macht man sich tot!

      Wie sind euere Erfahrungen, wer nutzt noch Tabellen zum Layout und wer kann darauf verzichten?

      Tabellen machen dann Sinn, wenn die darzustellenden Informationen Tabellendaten sind. Stundenpläne z.B. sind Tabellendaten. Ansonsten kann man ohne Tabellen wesentlich besser arbeiten und erhält sogar noch die zusätzliche Freiheit, mit einem speziellen Druck-CSS die Druckausgabe druckerfreundlich(er) zu gestalten. Das geht in der Kombination Tabelle+CSS zwar auch irgendwie, aber längst nicht so gut, weil die grundlegende Struktur der Tabelle nicht überwunden werden kann.

      Wenn dein einziges Problem mit Layern ist, daß du nicht vertikal zentrieren kannst - dann hast du das vertikale Ausrichten noch nicht richtig verstanden.

      Vertical-align bezieht sich immer auf die einzelne Zeile, in der das auszurichtende Element steht. Du kannst also, wie auch im SelfHTML-Beispiel sichtbar, ein Bild an einem Wort ausrichten, und hast dazu gewisse Möglichkeiten.

      http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align

      Außerdem wird in den W3C-Specs deutlich darauf hingewiesen, daß die Ausrichtungswerte eine _andere_ Bedeutung haben, wenn sie auf Tabellenzellen angewandt werden. Ich hab' ein wenig herumprobiert: Anscheinend gibts, außer natürlich der Möglichkeit zur absoluten Positionierung mit relativen Werten wie Prozent, keine Möglichkeit, ein Element _ohne_ Tabellen vertikal mittig zu positionieren.

      Ich habe allerdings dieses Verlangen auch noch nie gehabt. Man kann zum einen natürlich Tabellen einsetzen (wie dort die Positionierung gehandhabt wird, steht in http://www.w3.org/TR/REC-CSS2/tables.html#height-layout), zum anderen gibts durch Positionierung von Elementen von links, rechts, oben oder unten aus gesehen reichlich Möglichkeiten, die Aufgabe möglicherweise auch anders zu lösen.

      - Sven Rautenberg

      1. Moin!

        Mahlzeit ;o)

        Die _einfachste_ und beste Möglichkeit, etwas auf einer Seite zu _verteilen_, sind absolut positionierte <div>-Layer. Tabellen sind viel zu unflexibel, wenn tatsächlich noch Änderungen anstehen - damit macht man sich tot!

        Ich weiß nicht, alle Elemente absolut und pixelgenau zu positionieren erscheint mir nicht gerade einfach. Und bei Änderungen muß man doch auch überprüfen, ob die Position zu allen anderen Elementen noch stimmt und diese gegebenenfalls noch ändern, oder?

        Ich hab' ein wenig herumprobiert: Anscheinend gibts, außer natürlich der Möglichkeit zur absoluten Positionierung mit relativen Werten wie Prozent, keine Möglichkeit, ein Element _ohne_ Tabellen vertikal mittig zu positionieren.

        Ich habe allerdings dieses Verlangen auch noch nie gehabt.

        Das Verlangen entstand bei dem Versuch, Texteingabefelder und deren Beschriftung jeweils nebeneinander und an ihrer Mittelachse (zentriert) auszurichten. Das sieht einfach besser aus und ist auch ein gewohnter Anblick im Web.

        Ansonsten war dies eine willkürlich selbstgestellte Aufgabe, diese Konstellation mal ohne Tabellen nachzubauen. Und plums bin ich schon an dieser einfachen Sache gescheitert...

        Ich werde aber nicht aufgeben, weil ich die Gründe für tabellenfreies Layout (Trennung von Inhalt und Gestaltung sowie Screenreader) einsehe.

        Besten Dank
        arne

      2. Hi,

        Anscheinend gibts, außer natürlich der Möglichkeit zur absoluten Positionierung mit relativen Werten wie Prozent, keine Möglichkeit, ein Element _ohne_ Tabellen vertikal mittig zu positionieren.

        Wenn man z.B mehrere unterschiedliche große Bilder in einen Div hat, kann man die Bilder alle vertikal ausrichten. Das funktioniert.

        Gruss,
        Henning

        1. Wenn man z.B mehrere unterschiedliche große Bilder in einen Div hat, kann man die Bilder alle vertikal ausrichten. Das funktioniert.

          Hallo,

          wie machst du das genau?

          Gruß
          arne

          1. hi,

            wie machst du das genau?

            <div class="inhalt">
              <p>
              <img class="vmitte" src="" width="" height="" alt="" />
              <img class="vmitte" src="" width="" height="" alt="" />
              <img class="vmitte" src="" width="" height="" alt="" />
              </p>
            </div>

            Wobei dann vmitte ein vertical-align:middle ist.

            Gruss,
            Henning