Grafik und Text formatieren

[Sebastian]

Hallo,

ich frage mich, wie kann ich zwei Grafiken und einen langen Text so nebeneinanderschreiben, daß die Grafiken nebeneinander sind und der Text rechts daneben und darunter nicht unten bei der letzten Grafik anfängt sondern oben. Die Grafiken bekomme ich mit einer Tabelle nebeneinander aber den Text kann ich ja nur in eine Tabellenzelle packen, wenn er oben anfangen soll. Er ist aber lang und muß darunter weitergehen. Er soll also rechts neben der Tabelle mit den Grafiken oben anfangen, nicht unten und soll den Platz rechts von der Tabelle ausfüllen mit den Zeilen die dahinpassen und dann den Resttext gleich darunterschreiben.

Wie geht das? Bisher konnte ich nur eines machen. Entweder alles darunter oder nur eine Zeile rechts und den Rest darunter oder ich könnte es wohl in eine weitere Tabellenzeile rechts einbauen aber den meisten Platz darunter verschwenden.

Grüße,
Sebastian

[Viennamade]

Hallo!

Grafiken (img-Elemente) sind inline-Elemente. Das bedeuetet, daß Du vorderhand gar nichts tun mußt, um sie nebeneinander zu halten.

Und dann möchtest Du noch, daß Text etwas anderes umfließt. Das steht hier erklärt: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float.

Beste Grüße
Viennamade

[Ingo Turski]

Hi,

Du beschreibst das Standardverhalten von gefloateten Elementen. Mit bzw. in verschiedenen Tabellenzellen geht das nicht.

freundliche Grüße
Ingo

[Tyrotris]

Hallo Sebastian!

Du brauchst nur die beiden Grafiken links ausrichten dann wird er Text automatisch nach dem 2. Bild angefügt und geht unter dem 1 Bild weiter wenn die höhe der Textzeilen die Basislinie der Fotos unterschreitet.

z.B.:

<table border="0">
  <tr>
    <td valign="top">
 <img src="bild_1.gif" width="150" height="45" align="left">
 <img src="bild_2.gif" width="100" height="45" align="left">
 Hier steht dann irgendeinen langer Text damit man ganz genau sehen kann wie dieser dann umbricht und ob die 2 Grafiken dann auch wirklich links stehen bleiben wie gewollt!
    </td>
  </tr>
</table>

Du mußt halt bei beiden Bildern align="left" einfügen damit es funktioniert!

Ciao, Tyrotris

[Sebastian]

Super. Damit klappts. Die Lösungen sind meistens einfach aber man muß sie erstmal kennen. :-)

danke,
Sebastian

[Jeena Paradies]

Hallo,

<table border="0">
  <tr>
    <td valign="top">
<img src="bild_1.gif" width="150" height="45" align="left">
<img src="bild_2.gif" width="100" height="45" align="left">
Hier steht dann irgendeinen langer Text damit man ganz genau sehen kann wie dieser dann umbricht und ob die 2 Grafiken dann auch wirklich links stehen bleiben wie gewollt!
    </td>
  </tr>
</table>

Ich weiß nicht, aber was soll denn dieser schreckliche Code? wozu diese Tabelle? Wozu das ganze (v)align Zeugs?

Ich mache das immer in etwa so:

CSS
img.fl { float: left; }

HTML

<p>
 <img src="bild1.png" alt="ein Pferd" class="fl" style="width: 100px; height: 50px;" />
 <img src="bild2.png" alt="eine alte Frau" class="fl" style="width: 100px; height: 50px;" />
 Hier steht dann irgendeinen langer Text damit man ganz genau sehen
 kann wie dieser dann umbricht und ob die 2 Grafiken dann auch wirklich
 links stehen bleiben wie gewollt!
</p>

Wobei ich der Meinung dass der Klassenname fl (also float left) mehr als unglücklich gewählt ist. Vielleicht kann mir einen einen Tipp geben, wie man das besser benennen könnte, um designtechnisch auch nach einem Redesign sinnvolle Klassennamen zu haben. fr währe dann das Gegenstück dazu.

Grüße
Jeena Paradies