Bilder linksbündig, rechts daneben Text... aber wie?
Andrea
- html
Hallo, ich hab leider ein (hoffentlich kleines) Problem bei meiner neuen Homepage:
Ich möchte fünf Zeichnungen von mir (gleicher Breite) untereinander (linksbündig) auf meine Seite stellen und zu jedem Bild rechts daneben einen kleinen Text schreiben, was man darauf eigentlich sehen sollte! ;-)
Irgendwie mag das aber nicht funktionieren bei mir... kann mir vielleicht jemand sagen, was ich da falsch mache?
<p>
<a href="Kunst/ue_ei.jpg"><img src="Kunst/ue_ei_ll.jpg" align="left" border="0"></a>
Dieser Test ist nur zum Test da, obs funktioniert! ^^
</p>
<p>
<a href="Kunst/Pilze.jpg"><img src="Kunst/Pilze_ll.jpg" align="left" border="0"></a>
Und nochmal ein kleiner Test!
</p>
<p>
<a href="Kunst/vanitas.jpg"><img src="Kunst/vanitas_ll.jpg" align="left" border="0"></a>
Und hie schon wieder ein Test!
</p>
Warum funktioniert das nicht?
Bei mir erscheinen da alle drei Bilder nebeneinander... aber nicht mal in einer Zeile, sondern verschoben... und dazwischen wird der Text noch eingequetscht! :-(
Ich hoffe, mir kann jemand helfen! ;-)
LG, Andrea
Hallo,
mach ne Tabelle mit 2 Spalten.
mfg NAG
du solltest besser ne tabelle dazu benutzen. dann dürfte auch die formatierung problemlos funktionieren.
hier siehst du wie:
Moin!
Die schöne Lösung mir CSS heißt "float"!
Die Tabellen-Lösung könnte aber die unproblematischere sein!
Gruß
Der Hans
Hallo,
Du solltest Dir angewöhnen nach Elementen keine Leerzeile zu schreiben, da diese als Leerzeichen interpretiert wird, auch solltest Du immer ein alt="" setzen, damit auch Blinde mit Deinen Bildern zurecht kommen. Am Ende von alleinestehenden, also nichtschließenden Elementen wie img immer einen Schrägstrich. daher so:
<p><a href="Kunst/ue_ei.jpg"><img src="Kunst/ue_ei_ll.jpg" align="left" border="0" alt="ALTERNATIVTEXT" /></a>Dieser Test ist nur zum Test da, obs funktioniert!</p>
Das löst aber Dein Problem nicht. Eine Tabellenlösung ist Pfusch! Mache es mit CSS und float und formatiere das Bild außerhalb des <p>:
<a href="Kunst/ue_ei.jpg"><img src="Kunst/ue_ei_ll.jpg" align="left" border="0" alt="Alternativtext" style="float:left;" /></a>
<p style="clear:left;">Dieser Test ist nur zum Test da, obs funktioniert!</p>
Jetzt sollte es klappen. Das clear im p gibt an, dass nur dieser p-Absatz um das Bild fließt, nachfolgende nicht.
Du solltest in Grafiken immer auch width und height angeben, damit Browser die Seiten schon rendern können, wenn sie noch nicht ganz geladen sind, statt des Bildes also einen Platzhalter in richtiger Größe einfügen können.
Heiner
Hallo,
Das löst aber Dein Problem nicht. Eine Tabellenlösung ist Pfusch!
Diese Äußerung ist ein bisschen sehr überspitzt.
Du hast recht. Es gibt Dinge, die nicht in eine Tabelle gehören. Bei Andreas Problem handelt es sich aber eindeutig um einen tabellarischen Inhalt. Natürlich kannst du es auch mit CSS lösen, aber die Tabellenlösung als "Pfusch" zu bezeichnen ist hier nicht angebracht.
mfg NAG
Hallo, ich hab leider ein (hoffentlich kleines) Problem bei meiner neuen Homepage:
Ich möchte fünf Zeichnungen von mir (gleicher Breite) untereinander (linksbündig) auf meine Seite stellen und zu jedem Bild rechts daneben einen kleinen Text schreiben, was man darauf eigentlich sehen sollte! ;-)
Irgendwie mag das aber nicht funktionieren bei mir... kann mir vielleicht jemand sagen, was ich da falsch mache?
<p>
<a href="Kunst/ue_ei.jpg"><img src="Kunst/ue_ei_ll.jpg" align="left" border="0"></a>
Dieser Test ist nur zum Test da, obs funktioniert! ^^
</p>
<p>
<a href="Kunst/Pilze.jpg"><img src="Kunst/Pilze_ll.jpg" align="left" border="0"></a>
Und nochmal ein kleiner Test!
</p>
<p>
<a href="Kunst/vanitas.jpg"><img src="Kunst/vanitas_ll.jpg" align="left" border="0"></a>
Und hie schon wieder ein Test!
</p>Warum funktioniert das nicht?
Bei mir erscheinen da alle drei Bilder nebeneinander... aber nicht mal in einer Zeile, sondern verschoben... und dazwischen wird der Text noch eingequetscht! :-(Ich hoffe, mir kann jemand helfen! ;-)
LG, Andrea
Hallo Andrea,
ich mag die Absatzschaltung mit <p> ........</p> überhaupt nicht.
Ich benutze lieber den Zeilenumbrcu <BR>
Und damit kannst Du vielleicht Dein Problem lösen.
mfg Fred
Hier ein Beispiel-Script
<a href="Kunst/ue_ei.jpg"><img src="xxxxx.gif" BORDER="0" ALIGN="left" HEIGHT="60" WIDTH="156" ALT="Banner"></a>
Dieser Test ist nur zum Test da, obs funktioniert! Dieser Test ist nur zum Test da, obs funktioniert!
Dieser Test ist nur zum Test da, obs funktioniert! Dieser Test ist nur zum Test da, obs funktioniert!
Dieser Test ist nur zum Test da, obs funktioniert! Dieser Test ist nur zum Test da, obs funktioniert!
Dieser Test ist nur zum Test da, obs funktioniert! Dieser Test ist nur zum Test da, obs funktioniert!
Dieser Test ist nur zum Test da, obs funktioniert! Dieser Test ist nur zum Test da, obs funktioniert!
Dieser Test ist nur zum Test da, obs funktioniert! Dieser Test ist nur zum Test da, obs funktioniert!
Dieser Test ist nur zum Test da, obs funktioniert! Dieser Test ist nur zum Test da, obs funktioniert!
Dieser Test ist nur zum Test da, obs funktioniert! Dieser Test ist nur zum Test da, obs funktioniert!
<BR><BR>
<a href="Kunst/ue_ei.jpg"><img src="yyyyy.gif" BORDER="0" ALIGN="left" HEIGHT="60" WIDTH="156" ALT="Banner"></a>
Und nochmal ein kleiner Test! Und nochmal ein kleiner Test! Und nochmal ein kleiner Test!
Und nochmal ein kleiner Test! Und nochmal ein kleiner Test! Und nochmal ein kleiner Test!
<BR><BR><BR><BR><BR>
<a href="Kunst/ue_ei.jpg"><img src="zzzzz.gif" BORDER="0" ALIGN="left" HEIGHT="60" WIDTH="156" ALT="Banner"></a>
Und hie schon wieder ein Test!
<BR><BR><BR><BR><BR>
Moin, Fred! Und moin auch an Kalle!
Lest ihr auch noch das Ausgangsposting?
Andrea möchte möchte links Bilder und _daneben_ erläuternden Text haben!
Darüber hinaus sind Lösungen mit massig <br> zum Absätze bilden (warum eigentlich?)
ebenso unnötig, hässlich und ärgerlich wie Lösungen (Gruß an Kalle), die Tabellen
in Textabsätze hinein schreiben (das ist dann auch noch gleich wirklich falsch!).
Gruß
Der Hans
Ich habe dauernd das gleiche Problem.
Wenn du Text um ein Bild herumfließen läßt, wird auch das nächste Bild um das erste "herumfließen", sofern der vorherige Text zu kurz ist. Das kaskadiert sich beliebig, deshalb die versetzten Bilder.
Stelle jedes Bild mit SEINEM Text in ein Tabellenfeld:
<table><tr><td>
<p>
<a href="Kunst/ue_ei.jpg"><img src="Kunst/ue_ei_ll.jpg" align="left" border="0"></a>
Dieser Test ist nur zum Test da, obs funktioniert! ^^
</p>
</td></tr></table>
ODER das <p> auf die Tabelle angewendet (so mache ich es wegen der Ränder links und rechts):
<p><table><tr><td>
<a href="Kunst/Pilze.jpg"><img src="Kunst/Pilze_ll.jpg" align="left" border="0"></a>
Und nochmal ein kleiner Test!
</td></tr></table></p>
Den Abstand zwischen Bild und Text stellst du ein mit
<img ... hspace=10 vspace=10>
horizontal / vertical space = 10 Pixel
Gruß, Kalle