GerardKhan: Div Positionierung mit CSS 0px vom Boden einer Tabelle?

Hi,

ich habe bereits einiges über CSS-Positionierungen gefunden und sowohl relatives als auch absolutes funktioniert so erstmal beim Üben ganz gut.

Was ich noch nicht herausgefunden habe, ist allerdings, ob man diese Positionierung auch nutzen kann, um bestimmte Dinge (Bilder, Divs...) am Boden einer Tabelle festzusetzen.

z.B. 2 Tabellen wie (jetzt mal stark vereinfacht):

<table id="1">
 <tr>
  <td colspan="2" align="left" valign="top">INHALT A1</td>
 </tr>
 <tr>
  <td width="50%" align="left" valign="top">
   <table id="2" width="100%">
    <tr>
     <td align="center" valign="middle">INHALT B</td>
    </tr>
   </table>
  </td>
  <td width="50%" align="left" valign="top">INHALT A2</td>
 </tr>
</table>

Sagen wir, durch die innere Tabelle wird die Höhe der äußeren auf 500px gestreckt oder sie ist durch die Inhalte A1/A2 so hoch.
Oder gar variable Höhen je nach Inhalt.

Wäre es dann möglich, mithilfe von CSS und Positionierung, ein Bild oder eine Div im Bereich von z.B. INHALT A2 (oder ganz unabhängig außerhalb) so zu setzen, dass es immer am Boden der äußeren Tabelle id=1 ist und rechtsbündig liegt?

Also salopp gesagt, eine Art "position: absolute", nur eben nicht aufs Browserfenster, sondern eine bestimmte Tabelle oder einen bestimmten Bereich im Browserfenster bezogen.

Über Antworten würde ich mich sehr freuen, vielen Dank schon mal im Voraus!

  1. Yerf!

    ich habe bereits einiges über CSS-Positionierungen gefunden und sowohl relatives als auch absolutes funktioniert so erstmal beim Üben ganz gut.

    Was ich noch nicht herausgefunden habe, ist allerdings, ob man diese Positionierung auch nutzen kann, um bestimmte Dinge (Bilder, Divs...) am Boden einer Tabelle festzusetzen.

    [...]

    Also salopp gesagt, eine Art "position: absolute", nur eben nicht aufs Browserfenster, sondern eine bestimmte Tabelle oder einen bestimmten Bereich im Browserfenster bezogen.

    Den Punkt, dass sich position:absolut auch relativ zu einem Elternelement verhalten kann hast du scheinbar noch nicht gefunden. Ist eigentlich ganz einfach: das Element, das den neuen Bezugspunkt setzen soll muss eine Positionierung ungleich static haben (z.B. position:relativ)

    Allerdings ist da noch ein Nachteil: Die Auswirkung von position!=static auf Tabellenelemente ist nicht definiert. Ein Grund mehr auf Tabellenlayouts zu verzichten und es gleich komplett "richtig" mittels semantischen Markup und CSS zu machen.

    Gruß,

    Harlequin

    --
    <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
    1. Hallo,

      ich habe folgendes Problem und muss deshalb mehr oder minder Tabellen nutzen.

      Es geht hier im ein Layout bzw. eine Template-Änderung an einem Burning Board von Woltlab (WBB2).

      Hierbei tritt das Problem auf, dass relative Positionierung leider nicht so ganz klappen möchte.

      Ich schicke noch mal den ganzen Quelltext hier mit.

      http://nolimitsstore.no.funpic.de/gk/quelltext.txt

      Unten darin findet sich ein "figur.gif".
      Dieses kann ich bis jetzt nur an den unteren Rand der "inneren" Tabelle (wo es gerade auch ist) packen.
      Ich würde es gerne am unteren Rand der äußeren Tabelle haben.

      Natürlich - es geht, wenn ich den img-Tag da hin kopiere.
      Allerdings möchte ich nicht, dass sich hierbei der Footer (ab <if($imprint_url != '')>) verschiebt.

      Kann man da irgendwie das Bild zwar an den unteren Rand der äußeren Tabelle legen, aber auf der anderen Seite das als eine Art "Layer" machen, sodass der Rest des Inhalts dadurch so stehen bleibt, als wäre das Bild nicht vorhanden?

      1. Yerf!

        Kann man da irgendwie das Bild zwar an den unteren Rand der äußeren Tabelle legen, aber auf der anderen Seite das als eine Art "Layer" machen, sodass der Rest des Inhalts dadurch so stehen bleibt, als wäre das Bild nicht vorhanden?

        Etwas unschön aber zumindest in etwa so wie du es haben willst:

        Lege um die Äußere Tabelle ein DIV mit position:relative und positioniere dann das Bild mit position:absolute und bottom:0

        Das sollte eigentlich zum gewünschten Ergebnis führen. (Ein position:relative an der Tabelle selbst wird wohl nur der IE interpretieren, da der nicht weiß, was Tabellen sind...)

        Gruß,

        Harlequin

        --
        <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
        1. Yerf!
          Lege um die Äußere Tabelle ein DIV mit position:relative und positioniere dann das Bild mit position:absolute und bottom:0

          Das sollte eigentlich zum gewünschten Ergebnis führen. (Ein position:relative an der Tabelle selbst wird wohl nur der IE interpretieren, da der nicht weiß, was Tabellen sind...)

          Gruß,

          Harlequin

          Hallo noch mal,

          das funktioniert so erstmal sehr gut.
          Allerdings kommt hiermit der IE nicht zurecht (Darstellungsfehler allerdings nur marginal, da zwischen unterem Rand der Tabelle und DIV ein paar Pixel Platz gelassen werden), der ja immer alles so macht, wie er will :/

          Aber gut, so funktioniert es auf jeden Fall überhaupt erst einmal und wer den IE nutzt, ist ja schließlich selbst schuld. ;)

          Vielen Dank für die Hilfen!

  2. Hi,

    Was ich noch nicht herausgefunden habe, ist allerdings, ob man diese Positionierung auch nutzen kann, um bestimmte Dinge (Bilder, Divs...) am Boden einer Tabelle festzusetzen.

    warum sollte man dies tun? Eine Tabellenzeile am Ende der Tabelle reicht doch völlig dazu.

    z.B. 2 Tabellen wie (jetzt mal stark vereinfacht):

    <table id="1">

    nicht nur vereinfacht, sondern auch falsch.

    <tr>
      <td colspan="2" align="left" valign="top">INHALT A1</td>
    </tr>

    das sieht sehr nach einer unschönen Layout-Tabelle aus. Warum nicht konsequent CSS hierfür nutzen?

    <td width="50%" align="left" valign="top">INHALT A2</td>

    Falls Du dennoch an der Tabelle hängst, könntest Du hierin ein relativ positioniertes DIV als Bezugspunkt für ein enthaltenes absolut positioniertes Element setzen.

    freundliche Grüße
    Ingo