hamlet: Grafik über Text legen?

Hallo,

ich habe folgendes Problem:

Ich hab eine Tabelle zentriert und möchte nun abhängig vom linken Rand (und oberen Rand) der Tabelle ein transparentes *.gif über den Text legen.

Mein code sieht grad so aus:

<div style="position:absolute; left:200px; top:30px><img src="bild.gif"></div>
<table width="80%" align="center">
 <tr>
   <td>blablabla</td>
   ...
 </tr>
</table>

die 200px sind jetzt aber vom linken rand des bildschirms und nicht von der tabelle...

würd mich freuen, wenn ihr mir weiterhelfen könntet ...
danke

  1. hallo hamlet,

    na position:absolute positioniert doch absolute, also am body oder html element? mit position:relative kommst du der sache vermutlich näher.

    <div>
    <img position:relative />
    <table>
    </table>
    </div>

    könnte es vielleicht bringen?

    gruß, Frankx

    1. jein,

      jetzt ist es zwar von dem rechten Rand aus, aber es liegt nicht "drüber", also über der Tabelle, sondern macht die Grafik fertig und dann erst kommt die Tabelle.

      Das hatte ich auch schonmal probiert ...

    2. hi,

      na position:absolute positioniert doch absolute, also am body oder html element?

      Gut, dass du ein Fragezeichen dahinter gesetzt hast - weil dem natürlich nicht so sein muss.

      mit position:relative kommst du der sache vermutlich näher.

      <div>
      <img position:relative />

      Aber nicht mit relative für das _Bild_.

      Ihr solltet beide mal nachlesen, was selfhtml bzgl. absoluter Positionierung zu sagen hat:
      http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }
      1. hmm,

        ich will aber eigentlich kein Element absolut definieren um dann relativ davon wegzugehen.
        Und wenn ich von body weggehe, dann passt das bei verschiedenen Auflösungen nicht)

        Kann man nicht sagen geh von dem Tabellenrand so-und-so-viel nach rechts? Ohne dass die Tabelle ja absolut positioniert werden soll (is ja auf align=center)

        Danke für die Hilfe

        hamlet

      2. Hallo wahsaga,

        wenn ich das recht verstehe, ist eben das body-Element das Elternelement an dem sich "absolute" ausrichtet, solange nicht ein anderes Elternelement mit "absolute" "fixed" oder "relative" existiert.

        Warum aber kann ich das _Bild_ nicht relativ ausrichten?

        Dank und Gruß,

        Frankx

    3. Moin!

      hallo hamlet,

      na position:absolute positioniert doch absolute, also am body oder html element? mit position:relative kommst du der sache vermutlich näher.

      Relative Positionierung wird zu unrecht verdrängt, hat aber andere Aufgaben.

      Beim relativen Positionieren wird der Platz, den das Element eigentlich benutzt, weiterhin reserviert, die Darstellung davon ausgehend allerdings verschoben. Das ist in den meisten Fällen nicht das, was optisch gewünscht ist.

      Allerdings bilden Elemente, die relativ positioniert wurden (auch wenn sie um keinen Pixel verschoben wurden), einen wunderbaren Rahmen für Elemente darin, die dann absolut positioniert werden können - und deren Position sich dann immer an der Position des relativen Elternelements orientiert.

      Denn die Koordinaten der absoluten Positionierung richten sich nach dem sie umgebenden Elternelement, dessen Positionierung von "static" abweicht - und erst hilfsweise dann nach dem Browserfenster.

      Konkret hier wäre es also ratsam, die Tabelle relativ und unverschoben zu positionieren und darin dann das Bild absolut zu positionieren. Wobei es dafür keines extra DIV bedarf.

      - Sven Rautenberg

      --
      My sssignature, my preciousssss!
  2. ahhhh! Jetzt hab ichs:

    <table>
    <tr>
      <td>
    <div style="position:absolute;"><img src="bild.gif" border="0" style="position:absolute; left:200px"></div>
    </td>
    </tr>
    </table>

    tsss ... ein wenig kompliziert ...aber es geht... :)

    Danke

    hamlet

    1. Moin!

      ahhhh! Jetzt hab ichs:

      Das glaube ich nicht.

      <table>
      <tr>
        <td>
      <div style="position:absolute;"><img src="bild.gif" border="0" style="position:absolute; left:200px"></div>
      </td>
      </tr>
      </table>

      tsss ... ein wenig kompliziert ...aber es geht... :)

      Dann ändere mal die Größe, insbesondere die BREITE, deines Browserfensters.

      - Sven Rautenberg

      --
      My sssignature, my preciousssss!
      1. Dann ändere mal die Größe, insbesondere die BREITE, deines Browserfensters.

        • Sven Rautenberg

        nö. das geht jetzt. Das Bild ist jetzt immer fix da an der Stelle in der Tabelle wo es auch sein soll. Bei dir nicht?