nicht angemeldet
Probleme mit DIV Positionierung
Hi @all,
Habe erst angefangen mich mit HTML zu beschäftigen und habe mein erstes Problem mit sogenannten DIV Layern
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<BODY leftMargin=0 topMargin=0 marginwidth="0" marginheight="0" bgcolor="#000000">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><table width="800" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> <
<div id="Layer1" style="position:relative; width:200px; height:115px; z-index:1; left: 194px; top: 108px;"><font color="#FFFFFF">Feld1</font></div>
<div id="Layer2" style="position:relative; width:200px; height:115px; z-index:2; left: 786px; top: 487px;"><font color="#FFFFFF">Feld2</font></div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Warum verschieben sich beide Felder nicht, wenn man die Größe des Browserfesnters ändert. Wenn ich absolut positioniere, dann funktioniert gar nichts.
Danke für jede Hilfe !
-
Hallo Mike,
<BODY leftMargin=0 topMargin=0 marginwidth="0" marginheight="0" bgcolor="#000000">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><table width="800" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> ????????<???????????
<div id="Layer1" style="position:relative; width:200px; height:115px; z-index:1; left: 194px; top: 108px;"><font color="#FFFFFF">Feld1</font></div>
<div id="Layer2" style="position:relative; width:200px; height:115px; z-index:2; left: 786px; top: 487px;"><font color="#FFFFFF">Feld2</font></div></td>
</tr>
</table></td>
</tr>
</table>
</body>Warum verschieben sich beide Felder nicht, wenn man die Größe des Browserfesnters ändert. Wenn ich absolut positioniere, dann funktioniert gar nichts.
Warum sollten sie sich verschieben?
Du hast eine Tabelle mit einer einzigen Zelle, deren Größe sich zwar verändert, aber du hast die Divs ja mit absoluten Werten in der Zelle positioniert.
115px sind immer 115px, egal, wie groß das Fenster ist.
Arbeite mit relativen Werten.
btw, du solltest imho auch deine Formatierungen der Tabelle und der restlichen Seite per CSS vornehmen, dein Code ist invalide.
Table hatte noch nie ein height-Attribut in HTML.Gruß
Kurt
--
"Du kannst dich nicht auf deine Augen verlassen, wenn deine Vorstellungen unscharf sind." (Mark Twain; am. Schriftsteller; 1835-1910)
http://elektro-dunzinger.at
http://shop.elektro-dunzinger.at -
Warum verschieben sich beide Felder nicht, wenn man die Größe des Browserfesnters ändert.
Beim relativen Positionieren wird das Element eingebettet, ändert also seine Position mit dem Elternobjekt. Das ist bei dir die direkt darüberliegende Tabellenzelle.
Die Zelle steht in einer Tabelle mit width=800, daher bewegt sich die Zelle (und mit ihr Dein Layer) nur, wenn die Grösse des Browserfensters oberhalb 800 Pixeln geändert wird.
Versuch mal z.B. die DIVs direkt in den Body zu schreiben und die left- bzw. top-Attribute prozentual anzugeben:
<body leftMargin="0" topMargin="0" marginwidth="0" marginheight="0" bgcolor="#000000">
<div id="Layer1" style="position:relative; width:200px; height:115px; z-index:1; left: 10%; top:10%;"><font color="#FFFFFF">Feld1</font></div>
<div id="Layer2" style="position:relative; width:200px; height:115px; z-index:2; left: 10%; top:10%;"><font color="#FFFFFF">Feld2</font></div>
</body>Wenn ich absolut positioniere, dann funktioniert gar nichts.
Absolute Positionierung bedeutet wortwörtlich, dass sich nichts ändern darf.
Gruss,
Kolja