Sandra Golda: Positionierung mit CSS innerhalb einer Tabelle

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.

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

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

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

        --
        Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
        http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/