le1setreter: Text und Bild vertikal ausrichten?

Hallo liebe Leser und Lebensretter^^

Habe mal wieder ein Frage:
Ich möchte Text und Bild innerhalb eines DIVs unten ausrichten. Habe diesbezüglich schon gelesen dass die vertikale Ausrichtung nur mit CSS (also ohne Tabelle) schwierig bis unmöglich ist. Vielleicht gibt es aber in meinem Beispiel doch eine Möglichkeit auf ne Tabelle zu verzichten und ich seh sie nur nicht.

Weiß jemand eine Lösung? Vielen Dank schonmal!

Mein Beispiel funktioniert nur mit einzeiligem Text und da liegt leider der Hund begraben:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
 <title>....</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
 <div style="width:400px;height:100px;background:#FF00FF;">
  <p><img src="test.jpg" alt="" style="width:100px;height:100px;border: #FF0000 solid 1px;vertical-align:text-bottom;" />
  Testschrift sollte(muss) auch als Mehrzeiler funktionieren</p>
 </div>
</body>
</html>

  1. Hi,

    vertical-align:text-bottom;

    was soll das sein?

    freundliche Grüße
    Ingo

    1. Hallo Ingo,

      vertical-align:text-bottom;
      was soll das sein?

      Das habe ich aber auch schon gesehen! Meines Wissens kann man das in Dreamweaver sogar aus einer Klappliste auswählen:

      http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

      Gruß Gernot

    2. Hallo Ingo.

      vertical-align:text-bottom;
      was soll das sein?

      Ein gültiger Wert?

      Einen schönen Freitag noch.

      Gruß, Ashura

      --
      Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
      30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
      Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
      [Deshalb frei! - Argumente pro freie Software]
    3. Hi,

      vertical-align:text-bottom;
      was soll das sein?

      freundliche Grüße
      Ingo

      naja wie schon beschrieben hab ich die kiste aus dem selfhtml. nur funktioniert es so ja nunmal nicht so wie gewollt. hat keiner von euch einen lösungsvorschlag?

      TIA

      1. Hi,

        naja wie schon beschrieben hab ich die kiste aus dem selfhtml. nur funktioniert es so ja nunmal nicht so wie gewollt.

        weil es eben das Bild innerhalb _einer Textzeile_ ausrichtet.
        Was Du benötigst, ist absolute Positionierung:

        <div style="position:relative;width:400px;height:102px;background:#FF00FF;">  
           <img src="test.jpg" alt="" style="display:block;width:100px;height:100px;border:#FF0000 solid 1px;" />  
           <p style="position:absolute;left:110px;bottom:0;margin:0;">Testschrift sollte(muss) auch als Mehrzeiler funktionieren</p>  
        </div>
        

        freundliche Grüße
        Ingo

        1. Klasse! Danke!