✔ Längliche Bilder in Tabelle nicht unter Bild

[picos]

Hallo Community.

Es geht um folgende Seite: http://anno1589.com/

Ich finde sie nicht gerade ansprechend. Demnach wurde ich beauftragt sie zu verbessern.
Deswegen will ich erstmal das Problem lösen, dass bei länglichen Bildern die Bildunterschrift trotzdem unter dem Bild erscheint und nicht rechts nebendran.

Ich weiß es nicht. Warum diese Verschiebung erfolgt. Könntet ihr nicht einmal einen Blick auf den Code werfen.

Aus Platzgründen habe ich ihn hier weggelassen. Ihr könnt ihn euch auf der besagten Seite selbst anschaun. Dabei will ich unbedingt das die Bildunterschrift auch unter dem Bild ist und nicht von dem länglichen Bild weggedrengt wird. Wie kann ich diese Verdrängung verhindern?

.img-shadow-pseudo {
  display: inline;
  background: url(images/shadowalpha.png) no-repeat bottom right !important;
  background: url(images/shadow.gif) no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
  }

.img-shadow-pseudo img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 8px;
  } 
.bothalign {
float: both;
margin-right: 10px;
margin-left: -5px;
}

Hier meine Ausgabe:

$image = '<div class="img-shadow-pseudo bothalign">';

Habe jetzt sowohl im Firefox als auch im Internet Explorer die Schatten, aber an der völlig falschen Stelle!


Mit

.bothalign {
float: both;
margin-right: -5px;
margin-left: -5px;
}

fehlen die Schatten vollständig, aber der Text ist auch bei länglichen Bildern unterhalb!
Ich bin am verzweifeln!

Ich bitte um Hilfe!

Danke!
-picos

 

[Maik]

Hi,

hierfür wirst du die Tabellenstruktur wohl umformatieren müssen, sodass die Zellen eine feste Höhe besitzen und der Inhalt mit valign="bottom" bzw. vertical-align:bottom am unteren Zellrand ausgerichtet wird.

So sitzen dann alle Bilder auf einer Höhe und der Text sitzt nicht in der vertikalen Mitte des benachbarten Bildes.