Nicole: Positionierung

Hallo zusammen,

bin gerade am HTML etc. lernen und experimentiere mit CSS. Habe es nun endlich geschafft Text und Bild mit Hilfe CSS beliebig zu positionieren. Nun möchte ich das alles in eine Zelle einer Tabelle einbinden. Doch leider orientiert der Browser alles links oben bezüglich des Fensters und nicht bezüglich der Zelle innerhalb welcher ich meinen <Div id="...">..-Code schreibe. Könnte mir bitte jemand einen Tip geben?

Oder anders: kann man mittels CSS Text und Bild bezüglich einer einzelnen Tabellenzelle positionieren?

Danke & Gruß
Nicole

  1. Hi Nicole!

    Das absolute Positionieren bezieht sich eigentlich auf das Vaterelement. Du benutzt wahrscheinlich den Internet Explorer, der dies falsch interpretiert. Am besten, du zeigst uns mal ein konkretes Beispiel.

    Tschüss
      Wolfgang

    --
    "Vielleicht bin ich auch wirklich nur ein kleiner Quellenkorinthenkacker" Kästermann
    1. Hi,

      ok, hier ist der Code, aber nicht lachen :-) hab das noch nicht so drauf. Das über #ID1 definierte Stück Text soll in dem Abschnitt 'Notiz' drangehängt werden und nicht wie jetzt ganz unten stehen. Mit ner Tabelle will ich das aber nicht machen; das kann ich schon. Will nur das mit den CSS kapieren.

      Gruß Nicole

      <html>
      <head>
      <title>
      Test
      </title>
      <style type="Text/css">
      <!--
      #ID1 { position:absolute; top:427px; left:161px; width:245px; height:30px; overflow:visible }
      -->
      </style>
      </head>
      <body lang=DE bgcolor=d9e2e9 vlink=0 alink=0 hlink=#ff0000>

      <table width=100% border=3 frame="box" bordercolor=#0000ff>
      <tr>
      <td width=100%>
      <div>
      <div align=center>
      <table width=100% cellpadding=0 cellspacing=0>
      <tr>
      <td width=50% bgcolor=d9e2e9 colspan=2 align=center>
      <font color=ff0000 size=6 face="Ms Sans serif">
      <b>Testüberschrift</b>
      <hr>
      </td>
      </tr>
      <tr>
      <td width=50% bgcolor=d9e2e9 colspan=2 align=center>
      <font size=4 color=0000ff face="Ms Sans serif">Notiz<br>
      <font size=3 color=0 face="Ms Sans serif">
      Hier steht jetzt irgendein Text. In der Regel viel; aber ich schreib jetzt mal nicht so viel rein...
      <div align=left id="ID1">Das ist das pinngate-Logo:</div>
      <hr>
      </td>
      </tr>
      <tr>
      <td colspan=2 width=50% bgcolor=d9e2e9 align=left valign=top>
      <font size=4 color=0000ff face="Ms Sans serif"><div align=center>Weitere Links...</div><br>
      <font size=3 color=0 face="Ms Sans serif">
      </td>
      </tr>
      <font size=3 color=0 face="Ms Sans serif">
      </table>
      <br>
      </div>
      </div>
      <br>
      </td>
      </tr>
      </table>
      </body>
      </html>

      Hi Nicole!

      Das absolute Positionieren bezieht sich eigentlich auf das Vaterelement. Du benutzt wahrscheinlich den Internet Explorer, der dies falsch interpretiert. Am besten, du zeigst uns mal ein konkretes Beispiel.

      Tschüss
        Wolfgang

      1. Hi,

        ok, hier ist der Code, aber nicht lachen :-) hab das noch nicht so drauf. Das über #ID1 definierte Stück Text soll in dem Abschnitt 'Notiz' drangehängt werden und nicht wie jetzt ganz unten stehen. Mit ner Tabelle will ich das aber nicht machen; das kann ich schon. Will nur das mit den CSS kapieren.

        die <font>-tags solltest du auch irgendwo wieder schliessen.
        da du aber eh schon mit css arbeitest, schmeiss die <font>-tags gleich ganz raus, und regle die schriftformatierung auch über css.

        zu deinem postionierungs-problem:

        ich verstehe noch nicht ganz, was du überhaupt erreichen willst.

        entweder solltest du position:relative; verwenden, oder aber, wenn du ein element absolut _in bezug auf sein elternelement_ positionieren willst, diesem elternelement eine explizite positionierungsangabe verpassen, z.b. position:relative; (ohne weitere angaben zu top, left, bottom oder right), oder auch position:static;
        static ist der defaultwert, aber um absolute positionierung in bezug auf ein elternelement zu erreichen, musst du diesem elternelement wie gesagt explizit eine positionierung verpassen, position:static; ist dabei explizit.

  2. Hi Nicole,

    bin gerade am HTML etc. lernen und experimentiere mit CSS. Habe es nun endlich geschafft Text und Bild mit Hilfe CSS beliebig zu positionieren.

    Gratulation, du befindest dich auf einem guten Weg :-)

    Nun möchte ich das alles in eine Zelle einer Tabelle einbinden.

    Warum? Wenn es sich um eine Layout-Tabelle handelt, so widerspricht diese per se dem, was mit CSS erreicht werden soll: Die Trennung von Markup und Layout.

    Doch leider orientiert der Browser alles links oben bezüglich des Fensters und nicht bezüglich der Zelle innerhalb welcher ich meinen <Div id="...">..-Code schreibe.

    Das ist richtig. Absolute Positionierung entfernt so definierte Bereiche aus dem Fluss der Elemente. Speziell, wenn das Elternelement nicht positioniert wurde.

    Könnte mir bitte jemand einen Tip geben? Oder anders: kann man mittels CSS Text und Bild bezüglich einer einzelnen Tabellenzelle positionieren?

    Entweder du verwendest position:relative, um ein Element relativ zu seiner "normalen" Position zu verschieben, oder du wendest an der Zelle selbst einen Innenabstand (padding) bzw. am zu positionierenden Element einen Außenabstand (margin).

    http://www.w3.org/TR/CSS2/visuren.html#propdef-position

    Grüße,
     Roland

    --
    http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml
    http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm
    ss:| zu:} ls:} fo:} de:> va:} ch:| sh:) n4:& rl:| br:< js:{ ie:{ fl:{ mo:|