Text um Bild

LoiK · 01.10.2003, 13:07

Hallo zusammen,

ich habe mir schon bei SELFHTML die Augen
fransig gelesen. Es geht um folgendes:

Ich habe ein kleines Bild und ein kurzen Text
in einer Tabelle. Das Bild liegt links vom Text (align left)
und ist so klein, daß der Text am Ende des Bildes links
umfließt. Wie ist es möglich, daß der Text bündig zur
rechten Kante des Bildes weitergeht?

Also:

XXXXX Hier ist mein Beispielstext
XPICX und der Text soll weiterhin
XXXXX gradlinig (buendig) zum
          Bild weiterlaufen, ohne das ich
          irgendwas extra einbauen muss.
          Capische? ;-)

Danke für alle Antworten.
Grüße
LoiK

prefix · 01.10.2003, 13:09

ganz einfach: setz in die zelle 2 container (div) rein! links für das bild, rechts für den text

den bildcontainer lässt du links floaten - damit bleibt das bild links und der container für den text fließt bündig (immer gleich) vorbei!

LoiK · 01.10.2003, 13:20

<td valign="top" bgcolor="#EEEEEE">
<div style="float:left;"><img src="/pictures/test.gif" width="50" height="55"></div>
<div align="left"><b>Hans Mauser</b><br>
Tel.: 031 - 13 43 21 41<br>
Mecklenburg-Vorpommern,<br>
Niedersachsen, <br>
Nordrhein-Westfalen,Schweiz,Nordbayern<br></div></td>

Aber der Textinhalt wird jetzt nach Rechtsbündig und das will ich nicht. Er soll bündig zur rechten Seite des Bildes sein, aber
der Text selber muss natürlich linksbündig sein.
Hmm oder hab ich was falsch gemacht?

Danke !

prefix · 01.10.2003, 13:21

mom., da passt einiges nicht - ich mach mal ein beispiel

prefix · 01.10.2003, 13:31

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#bild {
	float: left;
	margin-right: 10px;
}
#text {
	text-align: left;
	border-left: 1px solid black;
	margin-left: 110px;
}
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%">
		<div id="bild"><img src="testbild.jpg" alt="testbild" /></div>
		<div id="text">text<br />
		  text
            <br />
      text<br />
      text<br />
      text<br />
      text	  </div>
	</td>
    <td width="50%">&nbsp;</td>
  </tr>
  <tr>
    <td width="50%">&nbsp;</td>
    <td width="50%">&nbsp;</td>
  </tr>
  <tr>
    <td width="50%">&nbsp;</td>
    <td width="50%">&nbsp;</td>
  </tr>
  <tr>
    <td width="50%">&nbsp;</td>
    <td width="50%">&nbsp;</td>
  </tr>
</table>
</body>
</html>

die sache funktioniert - im ie6 allerdings tritt der 3-pixel-bug auf - das ist halt so

hier ein beispiel dieser lösung

LoiK · 01.10.2003, 13:48

Danke Prefix,

hmm, dann werde ich wohl erstmal mit Tabellen das
Problem lösen. Ärgerlich. Trotzdem danke!

Grüße
LoiK