Positionierung mit CSS innerhalb einer Tabelle
Sandra Golda
- css
0 wahsaga0 Sandra Golda0 MudGuard
Hallo!
Ich hol mal etwas weiter aus: eigentlich wollte ich zwei Elemente (ein bild und einen iframe) mit dem CSS-Befehl {position:absolute; bottom: X px; left: Y px;} positionieren. Aber wenn ich das Browserfenster verkleinere, verschiebt sich der Inhalt nach oben raus und man kann nicht hinscrollen.
Und da hatte ich nun die Idee eine Tabelle zu machen und der untersten Zeile eine feste Größe geben, und dann innerhalb dieser Zeile mit
{position:absolute; top: X px; left: Y px;} zu positionieren. Nur weiß ich nicht, wie ich diese Zeile als Elternelement beschreibe.
<html><head>
<title>i know, you might roll your eyes of this</title>
<style type="text/css">
#bild { position:absolute; top:20px; left:10px; z-index:2; }
#iframe1 { position:absolute; top:200px; left:249px; z-index:1;}
</style>
</head>
<body topmargin="0" leftmargin="0">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr><td width="100%" height="20"> </td></tr>
<tr><td width="100%"> </td></tr>
<tr><td width="100%" height="500">
<div id="bild"><img src="bkg.gif" border=0 width="350" height="250"></div>
<div id="iframe1"><iframe src="nothing.htm" name="SELFHTML_in_a_box" width="350" height="250"></iframe></div>
</td></tr>
</table>
</body></html>
Alles Beste, Sandra.
hi,
Und da hatte ich nun die Idee eine Tabelle zu machen und der untersten Zeile eine feste Größe geben, und dann innerhalb dieser Zeile mit
{position:absolute; top: X px; left: Y px;} zu positionieren. Nur weiß ich nicht, wie ich diese Zeile als Elternelement beschreibe.
damit absolute positionierung bezug auf das elternelement nimmt, muss dieses elternelement eine von der default-positionierung static abweichende positionierung besitzen.
wenn du also deine tabellenzelle mit position:relative formatierst, bezieht sich absolute positionierung von kindelementen anschliessend auf die position dieser tabellenzelle.
gruss,
wahsaga
hallo nochmal.
wenn du also deine tabellenzelle mit position:relative formatierst, bezieht sich absolute positionierung von kindelementen anschliessend auf die position dieser tabellenzelle.
hmm, in der theorie funktioniert das vielleicht, in meiner praxis irgendwie nicht ; ) hab ich das richtig umgesetzt?
<html><head>
<title>i know, you might roll your eyes of this</title>
<style type="text/css">
#bild { position:absolute; top:20px; left:10px; z-index:2; }
#iframe1 { position:absolute; top:200px; left:249px; z-index:1;}
#tab {position:relative }
</style></head>
<body topmargin="0" leftmargin="0">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr><td width="100%" height="20" nbsp;</td></tr>
<tr><td width="100%"> </td></tr>
<tr><div id="tab"><td width="100%" height="500">
<div id="bild"><img src="bkg.gif" border=0 width="350" height="250"></div>
<div id="iframe1"><iframe src="nothing.htm" name="SELFHTML_in_a_box" width="350" height="250"></iframe></div>
</td></div>
</tr>
</table>
</body>
</html>
ab, sandra.
Hi,
<body topmargin="0" leftmargin="0">
body hat diese Attribute in HTML nicht.
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
table hat in HTML kein height-Attribut.
<tr><td width="100%" height="20" nbsp;</td></tr>
<tr><td width="100%"> </td></tr>
<tr><div id="tab"><td width="100%" height="500">
div hat in tr nichts verloren.
td hat in div nichts verloren.
cu,
Andreas