✔ Vertikale Ausrichtung in einer Tabelle?

[Suchfunktion]

Hi!

Ich habe eine Tabellenzelle, in der sich ein Text und ein DIV-Bereich befindet.
Sieht in etwa so aus:

<table>
  <tr>
    <td class="foo">
      test test test
      <div class="bar"><img src="test.jpg" /></div>
    </td>
  </tr>
</table>

.foo{
  height: 300px;
  vertical-align: top left;
}

Nun moechte ich, dass der Text in der Zelle oben steht, das Bild aber immer unten.

Im Endeffekt soll das ganze etwa so aussehen:

+-------------------------+
|test test test test test |
|test test test test test |
|...                      |
|                         |
|##################       |
|##################       |
|##################       |
|##################       |
|##################       |
|###### BILD ######       |
|##################       |
|##################       |
|##################       |
|##################       |
|##################       |
+-------------------------+

Die Zeilenanzahl beim Text ist variablel, dementsprechend muss ich das Bild unten links irgendwie 'fixieren'. Als Hintergrundgrafik kann ich es in der Tabellenzelle nicht verwenden, dort wird schon eins verwendet.
Das bild muss fixiert werden, da es auch passieren kann, dass garkein Text vorhanden ist, trotzdem muss das Bild unten links sein, auch wenn vor dem Bild kein Inhalt ist.

Hat jemand eine Idee?

Wie gesagt:
Text immer oben, Bild immer unten.
Danke

 

[Malaxo]

Was ist wen du deinem Div .bar auch noch eine align gibst die auch sagt das es links ist?

PS: bin CSS neuling nur so eine vermutung

 

[Quaese]

Hi,

passe das DIV in der Tabellenzelle an die Grösse der Zelle an und richte das Bild als Hintergrundgrafik
unten aus. Der Text ist dann ebenfalls im DIV enthalten.

.foo{ vertical-align: left;
      height: 300px;}
.bar{ height: 100%;
      background: url(test.jpg) 0 100% no-repeat;}

<table>
  <tr>
    <td class="foo">
      <div class="bar">Hallo, hallo, hallo</div>
    </td>
  </tr>
</table>

Ciao
Quaese

 

[Suchfunktion]

Hi!

Das mit dem Height:100% des DIV-Bereiches hatte nicht funktioniert (warum auch immer), das hatte ich vorher schon probiert..

Habe es jetzt so geloest, dass ich die Tabellenspalte aufgeteilt habe (Horizontal, also jetzt habe ich 2 Spalten uebereinander) und die Grafik als Hintergrundbild (background-position: BOTTOM LEFT eingebunden hab.

Also anstelle von einem DIV-Bereich habe ich die Zelle einfach in der Mitte aufgeteilt und das Bild unten rein.

Beispiel

<table>
  <tr>
    <td>
      test test test
    </td>
  </tr>
  <tr>
    <td class="foo">
      &nbsp;
    </td>
  </tr>
</table>

.foo{
  background-image: utl(images/foo.jpg);
  background-position: BOTTOM LEFT;
}

Problem geloest
Trotzdem noch einmal vielen Dank fer eure Hilfe!