(X)HTML-Problem: <div>

DJ_Cyberdance

Here to stay

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

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

Legend

Registered: Apr 2000
Location: ärgsten Kaff
Posts: 2233

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

Here to stay

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

14.08.2004 - 11:47

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

manalishi

tl;dr

Registered: Feb 2001
Location: Feldkirch
Posts: 5977

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

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

14.08.2004 - 16:33

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

watchout

Legend
undead

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

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

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4532

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

Here to stay

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

15.08.2004 - 09:58

Hach, ich liebe einheitliche Standards...

Jehul

Big d00d

Registered: Nov 2000
Location: lnz
Posts: 295

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

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4532

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

DJ_Cyberdance Here to stay Registered: Jun 2002 Location: Vesterålen Posts: 1838	14.08.2004 - 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 Legend Registered: Apr 2000 Location: ärgsten Kaff Posts: 2233	14.08.2004 - 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 Here to stay Registered: Jun 2002 Location: Vesterålen Posts: 1838	14.08.2004 - 11:47 Klingt nicht blöd... Danke, werd i probieren. Hätt nur gedacht, es gäb vielleicht was mit center oder so...
manalishi tl;dr Registered: Feb 2001 Location: Feldkirch Posts: 5977	14.08.2004 - 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 OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	14.08.2004 - 16:33 ein 100x100% großes div aufspannen, text-align: center; vertical-align: middle und dann dort das kleine rein...
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	14.08.2004 - 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 Here to stay Registered: Dec 2002 Location: Inside Posts: 4532	15.08.2004 - 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 Here to stay Registered: Jun 2002 Location: Vesterålen Posts: 1838	15.08.2004 - 09:58 Hach, ich liebe einheitliche Standards...
Jehul Big d00d Registered: Nov 2000 Location: lnz Posts: 295	15.08.2004 - 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 Here to stay Registered: Dec 2002 Location: Inside Posts: 4532	15.08.2004 - 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 ...

(X)HTML-Problem: <div>

Forum Index > Software > Coding Stuff

DJ_Cyberdance

taz

DJ_Cyberdance

manalishi

tomstig

watchout

Rektal

DJ_Cyberdance

Jehul

Rektal