HTML: Vertikale Ausrichtung

DJ_Cyberdance

Here to stay

Registered: Jun 2002
Location: Vesterålen
Posts: 1838

31.10.2004 - 13:16

Hallo!
Möchte diverse Objekte in einem Layer auch vertikal zentrieren. Die Inhalte der Layer sind dynamisch, dh. ich weiß nicht, wie hoch sie sind und kann daher keine absoluten Angaben verwenden. zB:

<div style='position: absolute; ....'>
<div style='vertical-align: middle;...'>
</div>
</div>

das gleiche beim Ausrichten von Bildern:
<div style='...>
<img style='... />
</div>

"vertical-align" wird scheinbar nur bei Tabellen richtig interpretiert, nicht aber bei Divs. Weiß jemand, wie man sowas richtig macht?

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4517

31.10.2004 - 13:59

Links:
http://www.student.oulu.fi/~laurirai/www/css/middle/
http://www.wpdfd.com/editorial/wpd0103.htm#toptip

Obs wirklich X-Browser funktioniert -> selbst testen.

Ist so ziemlich eins der problematischsten Dinge.

Am intuitivsten waere <div style="display: table-cell; vertical-align: middle;"> , geht aber im IE nicht, somit unbrauchbar.

Bei neuen erkenntnissen bitte mitteilen

HTH

DJ_Cyberdance

Here to stay

Registered: Jun 2002
Location: Vesterålen
Posts: 1838

31.10.2004 - 14:08

Zitat von Rektal
Ist so ziemlich eins der problematischsten Dinge.

Ich weiß, aber ich kann beim besten Willen nicht verstehen, warum. Vertikale Ausrichtung ist doch nicht viel schwerer zu implementieren als horizontale. Irgendwie hat man sich da beim Erarbeiten von Standards keine Gedanken gemacht.

Danke jedenfalls für Deine Hinweise, werd mich da mal umsehen!

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4517

31.10.2004 - 14:13

Ich hab mit "problematisch" die Brower-Implementierungen gemeint. vertical-align auf ein block/inline Element ist halt was anderes als in einem table-cell Element. Es geht nicht darum, dass es "schwerer" ist, sondern es macht was anderes.

Wie gesagt, wenn du einem beliebigen Element sagen koenntest, sein eine table-cell mit dem dislpay Attribut, dann ists nicht "schwer". Da duerfen wir uns bei den IE-Entwicklern bedanken, dass sich das nicht implementiert haben.

Eine TR (table-row) im IE z.B. ein block-Element. Das ist einfach nur krank, spec violating und unbrauchbar in der Praxis.

DJ_Cyberdance

Here to stay

Registered: Jun 2002
Location: Vesterålen
Posts: 1838

31.10.2004 - 16:03

Full ack. Hab das Problem jetzt gelöst, is aber irgendwie gepfuscht:

<table style='border-style: none;'>
<tr>
<td style='width: 80px; height: 80px; text-align: center; vertical-align: middle;'>
<img...>
</td>
</tr>
</table>

Das geht, weil ich weiß, daß die Bilder auf jeden Fall kleiner als 80 x 80px sind. So sind sie schön ausgerichtet. Aber extra eine Tabelle anlegen is schon ziemlich krank :bash:

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4517

31.10.2004 - 16:17

Hast du dir http://www.student.oulu.fi/~laurirai/www/css/middle/ angesehen, wuerde das nicht eh' vielleicht funktionieren?

Was ich mir schon ueberlegt habe: dass man fuern IE ein eigenes CSS nimmt, dass irgendwelche Hacks macht damits hinhaut, und die anderen Browser verwenden display: table-cell. Man muesste halt schauen, wie gut die dass koennen. Afaik Gecko & Opera -> kein Problem. Aber Safari & Mac IE.

Gute Infos gibts immer unter PKKs http://quirksmode.org/ -> http://www.quirksmode.org/css/display.html

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

31.10.2004 - 21:23

ah, jungs...
a: das thema gabs scho x-mal, einfach mal die forumssuche verwenden :rolleyes:

b: laut der css-spec (2.0 - Das was IE6 halbwegs kann) gibt es kein attribut vartical-align für block-level elemente...

DJ_Cyberdance Here to stay Registered: Jun 2002 Location: Vesterålen Posts: 1838	31.10.2004 - 13:16 Hallo! Möchte diverse Objekte in einem Layer auch vertikal zentrieren. Die Inhalte der Layer sind dynamisch, dh. ich weiß nicht, wie hoch sie sind und kann daher keine absoluten Angaben verwenden. zB: <div style='position: absolute; ....'> <div style='vertical-align: middle;...'> </div> </div> das gleiche beim Ausrichten von Bildern: <div style='...> <img style='... /> </div> "vertical-align" wird scheinbar nur bei Tabellen richtig interpretiert, nicht aber bei Divs. Weiß jemand, wie man sowas richtig macht?
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4517	31.10.2004 - 13:59 Links: http://www.student.oulu.fi/~laurirai/www/css/middle/ http://www.wpdfd.com/editorial/wpd0103.htm#toptip Obs wirklich X-Browser funktioniert -> selbst testen. Ist so ziemlich eins der problematischsten Dinge. Am intuitivsten waere <div style="display: table-cell; vertical-align: middle;"> , geht aber im IE nicht, somit unbrauchbar. Bei neuen erkenntnissen bitte mitteilen HTH
DJ_Cyberdance Here to stay Registered: Jun 2002 Location: Vesterålen Posts: 1838	31.10.2004 - 14:08 Zitat von Rektal Ist so ziemlich eins der problematischsten Dinge. Ich weiß, aber ich kann beim besten Willen nicht verstehen, warum. Vertikale Ausrichtung ist doch nicht viel schwerer zu implementieren als horizontale. Irgendwie hat man sich da beim Erarbeiten von Standards keine Gedanken gemacht. Danke jedenfalls für Deine Hinweise, werd mich da mal umsehen!
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4517	31.10.2004 - 14:13 Ich hab mit "problematisch" die Brower-Implementierungen gemeint. vertical-align auf ein block/inline Element ist halt was anderes als in einem table-cell Element. Es geht nicht darum, dass es "schwerer" ist, sondern es macht was anderes. Wie gesagt, wenn du einem beliebigen Element sagen koenntest, sein eine table-cell mit dem dislpay Attribut, dann ists nicht "schwer". Da duerfen wir uns bei den IE-Entwicklern bedanken, dass sich das nicht implementiert haben. Eine TR (table-row) im IE z.B. ein block-Element. Das ist einfach nur krank, spec violating und unbrauchbar in der Praxis.
DJ_Cyberdance Here to stay Registered: Jun 2002 Location: Vesterålen Posts: 1838	31.10.2004 - 16:03 Full ack. Hab das Problem jetzt gelöst, is aber irgendwie gepfuscht: <table style='border-style: none;'> <tr> <td style='width: 80px; height: 80px; text-align: center; vertical-align: middle;'> <img...> </td> </tr> </table> Das geht, weil ich weiß, daß die Bilder auf jeden Fall kleiner als 80 x 80px sind. So sind sie schön ausgerichtet. Aber extra eine Tabelle anlegen is schon ziemlich krank
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4517	31.10.2004 - 16:17 Hast du dir http://www.student.oulu.fi/~laurirai/www/css/middle/ angesehen, wuerde das nicht eh' vielleicht funktionieren? Was ich mir schon ueberlegt habe: dass man fuern IE ein eigenes CSS nimmt, dass irgendwelche Hacks macht damits hinhaut, und die anderen Browser verwenden display: table-cell. Man muesste halt schauen, wie gut die dass koennen. Afaik Gecko & Opera -> kein Problem. Aber Safari & Mac IE. Gute Infos gibts immer unter PKKs http://quirksmode.org/ -> http://www.quirksmode.org/css/display.html
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	31.10.2004 - 21:23 ah, jungs... a: das thema gabs scho x-mal, einfach mal die forumssuche verwenden b: laut der css-spec (2.0 - Das was IE6 halbwegs kann) gibt es kein attribut vartical-align für block-level elemente...

HTML: Vertikale Ausrichtung

Forum Index > Software > Coding Stuff

DJ_Cyberdance

Rektal

DJ_Cyberdance

Rektal

DJ_Cyberdance

Rektal

watchout