vertical-align: middle wird ignoriert!
Sebastian
- css
Hallo liebe Forum'ler,
bin gereade ein bisschen am Verzweifeln.
Ich möchte in einer Textbox, die ansonsten nur <p>'s enthält, ein paar kleine Bilder zeigen, die einen jeweils erklärenden Text (nur wenige Worte) rechts daneben stehen haben. Da die Bilder größer sind als der Text, möchte ich der schönen Ansicht wegen diese textpassagen mittig zum jeweiligen Bild anordnen.
Das soll dann so aussehen:
bbbbbbb
bbbbbbb tttttttttt
bbbbbbb tttttttttt
bbbbbbb
bbbbbbb
bbbbbbb tttttttttt
bbbbbbb
usw.
Zunächst hatte ich ganz normale Textabsätze gemacht, in die ich die Bilder mit float:left; integriert habe.
Ging nicht, weil die Texte untereinander standen und die Bilder auch, aber die Texte nicht mehr zuzuordnen waren:
bbbbbbb tttttttttt
bbbbbbb tttttttttt
bbbbbbb
bbbbbbb
tttttttttt
bbbbbbb
bbbbbbb
bbbbbbb
usw.
Dann habe ich aus jeder Text-Bild-Kombi ein <div> gemacht und habe vertical-align:middle; angegeben. Sa dann so aus:
<div style="height: auto; vertical-align: middle">
<img src="xyz.gif" style="float: left;">
Beispieltext
</div>
Jetzt sind die Texte zwar den Bildern zuzuordnen, aber es sieht immer noch so aus:
bbbbbbb tttttttttt
bbbbbbb tttttttttt
bbbbbbb
bbbbbbb
bbbbbbb tttttttttt
bbbbbbb
bbbbbbb
usw.
Warum wird das vertical-align: middle; ignoriert? Übrigens in IE, FF und OP?
Für sachdienliche Hinweise dankt:
Sebastian
Hi,
<div style="height: auto; vertical-align: middle">
Warum wird das vertical-align: middle; ignoriert? Übrigens in IE, FF und OP?
Das Element, auf das Du vertical-align anzuwenden versuchst, erfüllt nicht die dafür notwendigen Voraussetzungen.
cu,
Andreas
Hallo,
Das Element, auf das Du vertical-align anzuwenden versuchst, erfüllt nicht die dafür notwendigen Voraussetzungen.
Danke, soweit war ich auch schon. Aber wie zum Teufel kann denn dann das hier
realisiert werden?
Gruß -
Sebastian
Hallo Sebastian,
Danke, soweit war ich auch schon. Aber wie zum Teufel kann denn dann das hier
[ image:http://de.selfhtml.org/css/eigenschaften/ausrichtung.gif ]
realisiert werden?
Bis dann!
Marc Reichelt || http://www.marcreichelt.de/
Hallo Marc,
danke für den Link! Leider schließen sich offenbar die Angaben float und vertical-align gegenseitig aus.
Ich befürchte, dass ich für mein Problem nicht um eine Tabelle rumkomme.
Fürs Protokoll: Er versuchte sich zu weigern, musste jedoch irgendwann darauf zurückgreifen!
Gruß,
Sebastian
Moin!
Fürs Protokoll: Er versuchte sich zu weigern, musste jedoch irgendwann darauf zurückgreifen!
Das sähe ich nicht als so schrecklich an. HTML-Tabellen haben von Haus aus Eigenschaften, die allen anderen HTML-Elementen fehlen, insbesondere was die Textausrichtung angeht. Deshalb vertrete ich auch nicht die strenge Sicht, dass nur tabellarische Daten (wie Stundenpläne, Datenlisten etc.) als HTML-Tabelle ausgezeichnet werden dürfen, sondern dass es immer wieder notwendig sein kann, primär aus optischen Gründen auf Tabellen zurückzugreifen. Dein Anwendungsbeispiel ist so ein Fall.
Rein theoretisch könnte man sämtliche existierenden HTML-Tags auch nur mit <div> und den passenden CSS-Werten erzeugen und so wirklich komplett auf Tabellen verzichten (siehe das zweite SELFHTML-Beispiel zu display). Real existierende Browser haben damit aber noch so ihre Probleme, d.h. da werden Eigenschaften von Elementen teilweise noch nicht oder nicht vollständig über das Browser-CSS zugewiesen, sondern durch interne Browserprogrammierung. Deshalb ist es mindestens zur Zeit noch unmöglich, auf jegliche Art von Tabelle zu verzichten (und das oben angeführte Beispiel ist auch alles andere als semantisch, sondern entspricht genau der ebenso heftig kritisierten DIV-Suppe, die man ebenfalls vermeiden sollte).
Aber dass man nicht mehr fünf bis zehn Tabellen ineinander verschachteln muss, ist doch auch schon mal nett, oder? :)
hi,
Warum wird das vertical-align: middle; ignoriert? Übrigens in IE, FF und OP?
weil es das muss.
vertical-align:
Applies to: inline-level and 'table-cell' elements
gruß,
wahsaga
Hallo wahsaga,
vertical-align:
Applies to: inline-level and 'table-cell' elements
Aha. Und wie kann ich das Problem nun umsetzen? Ich wollte eben keine Tabelle nehmen von wegen pfui und so :-)
Gruß -
Sebastian
Grundlage für Zitat #241.