SELFHTML Forum Doku Wiki Blog

Forumsarchiv 2002, Juni
vertical-align funktioniert nicht in div's?

archivierte Beiträge lesen

  1. CSS vertical-align funktioniert nicht in div's? arne 19. 06. 2002, 11:05

vertical-align funktioniert nicht in div's?

arne 19. 06. 2002, 11:05

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

vertical-align funktioniert nicht in div's?

Orlando 19. 06. 2002, 11:13

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

vertical-align funktioniert nicht in div's?

arne 19. 06. 2002, 11:18

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

vertical-align funktioniert nicht in div's?

Orlando 19. 06. 2002, 11:30

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

vertical-align funktioniert nicht in div's?

arne 19. 06. 2002, 12:32

> 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

vertical-align funktioniert nicht in div's?

Axel 19. 06. 2002, 11:50

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

vertical-align funktioniert nicht in div's?

Thomas J. 19. 06. 2002, 12:08

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.

Also weiterhin Tabellen zum Layout nutzen?

arne 19. 06. 2002, 12:41

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

Also weiterhin Tabellen zum Layout nutzen?

Fabian Transchel 19. 06. 2002, 13:08

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

Also weiterhin Tabellen zum Layout nutzen?

Thomas J. 19. 06. 2002, 13:30

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

Also weiterhin Tabellen zum Layout nutzen?

Sven Rautenberg 19. 06. 2002, 14:07

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

Also weiterhin Tabellen zum Layout nutzen?

arne 19. 06. 2002, 15:34

> 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

Also weiterhin Tabellen zum Layout nutzen?

Henning 19. 06. 2002, 15:51

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

Also weiterhin Tabellen zum Layout nutzen?

arne 19. 06. 2002, 15:56

> 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

Also weiterhin Tabellen zum Layout nutzen?

Henning 20. 06. 2002, 01:02

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

© 1998-2014 SELFHTMLImpressumSoftware: Classic Forum 3.4