Text und Bild vertikal ausrichten?
le1setreter
- css
0 Ingo Turski0
Gernot Back
0 Ashura0 le1setreter
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>
Hi,
vertical-align:text-bottom;
was soll das sein?
freundliche Grüße
Ingo
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
Hallo Ingo.
vertical-align:text-bottom;
was soll das sein?
Ein gültiger Wert?
Einen schönen Freitag noch.
Gruß, Ashura
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
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
Klasse! Danke!