(X)HTML-Problem: <div>

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/xhtml-problem_ltdivgt_121918/page_1 - zur Vollversion wechseln!

DJ_Cyberdance schrieb am 14.08.2004 um 11:18

Gibts eine Möglichkeit, einen mittels <div> erstellten Layer am Fenster zu zentrieren? Sowohl vertikal als auch horizontal?

Soll heißen: Ich hab einen Layer mit Bild drin. Dieses Bild soll immer genau in Fenstermitte sein. Mit

<div style='position:absolute; top:YYpx; left:XXpx;'>

kann ich das ja fix festlegen, wo der Layer erscheinen soll, aber wie tun, daß er eben vertikal bzw. horizontal zentriert ist, unabhängig von der vom User verwendeten Bildschirmauflösung bzw. Fenstergröße? Geht das _ohne_ Javascript?

taz schrieb am 14.08.2004 um 11:23

wenn das div ne fixe größe hat dann kannst du ihn absolut positionieren und dann mit einem negativen margin zurechtrücken.

also du positionierst zb top:50% und left:50% und dann bei margin-left:-50%derbreitedesdivs und margin-top:-50%derhöhedesdivs

vielleicht gibts ne elegantere lösung .. ?

DJ_Cyberdance schrieb am 14.08.2004 um 11:47

Klingt nicht blöd... Danke, werd i probieren. Hätt nur gedacht, es gäb vielleicht was mit center oder so...

manalishi schrieb am 14.08.2004 um 12:01

vertikal in die mitte setzen ist aber relativ heikel. wenn der div mal höher ist als der 2d bereich vom browser dann wirds schwer

ich würde einfach mal das div in ein anderes div hineinlegen, das 100% der breite des fensters einnimmt. alternativ könntest du auch mit dem padding des größten div's arbeiten.

tomstig schrieb am 14.08.2004 um 16:33

ein 100x100% großes div aufspannen, text-align: center; vertical-align: middle und dann dort das kleine rein...

watchout schrieb am 14.08.2004 um 19:20

Zitat von tomstig
ein 100x100% großes div aufspannen, text-align: center; vertical-align: middle und dann dort das kleine rein...

nur dass das nicht funkt, da es für ein div kein vertical-align gibt, grüsse.

Rektal schrieb am 15.08.2004 um 09:56

vertical-align gilt nur fuer inline und table-cell Elemente -> http://www.w3.org/TR/CSS21/visudet....vertical-align.

Die Hacks, dass man sagt, das DIV soll sich verhalten wie eine table-cell (mit display-Property) geht wieder im IE nicht.

DJ_Cyberdance schrieb am 15.08.2004 um 09:58

Hach, ich liebe einheitliche Standards...

Jehul schrieb am 15.08.2004 um 11:30

wie wärs, mit dem div 100% hoch und 100% breit zu machen und 2 verschachtelte tabelle reinzugeben?

Code:

textvordiv
<div style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;">
<table width="100%" height="100%">
<tr><td align="center" valign="middle">
  <table width="100" height="100" border="1">
  <tr><td align="center" valign="middle">
    asdfjkl
  </td></tr>
  </table>
</td></tr>
</table>
</div>
textnachdiv

mfg.

Rektal schrieb am 15.08.2004 um 16:51

Funktioniert nur wenn du keinen DOCTYPE verwendest. Sobald du einen gueltigen reinknallst wirds im IE6 nicht mehr gehen.

Wenn du den weglaesst, dann brauchst aber das DIV auch nicht, ist nur Ballast. Der innere Table ist auch ueberfluessig ...