img align=left / style=float:right

[heinetz]

Hallo Forum,

um ein Bild mit Text umfliessen zu lassen, lässt sich das ja am besten
über:

<img align="right" src=""> oder
<img style="float:right" src="">

... definieren -> Der Text umfliesst das Bild sauber.

Nun kam gerade die Anfrage, wie das denn mit einer Bildunterschrift sei
und ich kann mich erinnern, dass ich schonmal vor dem Problem stand,
wie man das hinbekommt, ohne den Text um das Bild (samt Unterschrift)
z.b. mit einer Tabelle "herumzukontruieren". Deshalb gehe ich jetzt mal
davon aus, dass ich nicht der einzige bin, der je mit dem Problem
konfrontiert worden ist.

Kennt jemand das Problem ?

... und am besten noch eine saubere Lösung ;)

Danke für Tipps und

beste gruesse,
heinetz

[Cheatah]

Hi,

um ein Bild mit Text umfliessen zu lassen, lässt sich das ja am besten
über:
<img align="right" src="">

nein. Das align-Attribut hat keine Daseinsberechtigung.

<img style="float:right" src="">

Ja. Besser in einem zentralen Stylesheet. Übrigens fehlt das zwingend erforderliche alt-Attribut.

Nun kam gerade die Anfrage, wie das denn mit einer Bildunterschrift sei

HTML 5 definiert hierfür das <figure>-Element. Bis dahin wirst Du Dich mit anderen Elementen behelfen müssen; zur Gruppierung zusammengehörender Inhalte ist in HTML 4 und XHTML 1 das <div>-Element vorgesehen.

z.b. mit einer Tabelle "herumzukontruieren".

Was mangels tabellarischer Daten erheblicher Unfug ist.

Cheatah

[heinetz]

hi,

vielleicht ist das zu einfach gedacht, aber ich habe folgenden Versuch
unternommen:

<p>Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text <img src="/images/example.jpg" style="float:right" alt="">Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text </p>

--> Der Text umfliesst das Bild sauber

<p>Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text <div style="float:right"><img src="/images/example.jpg" alt=""></div>Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text </p>

--> Der Text umfliesst das Bild unsauber

... mag sein, dass dem div-tag default-styles zugeordet sind,
die dafür sorgen, dass die Darstellung nicht zufriedenstellend
ist, also habe ich es ergänzt um:

display:inline;
margin:0;
padding:0;

... ohne Erfolg. Die Darstellung ist unter FF und IE sogar in etwa
die selbe unzufriedenstellende.

beste gruesse,
heinetz

[Cheatah]

Hi,

... mag sein, dass dem div-tag default-styles zugeordet sind,
die dafür sorgen, dass die Darstellung nicht zufriedenstellend
ist, also habe ich es ergänzt um:

eigentlich ist <div> (direkt nach <span>) das "zweitsauberste Element": Es weicht von den Default-Werten nur[1] durch display:block ab. Wenn es Unterschiede gibt, dann liegen die eher am <img>.

... ohne Erfolg.

Wie definierst Du "Erfolg"? Bzw. was ist eigentlich das Problem?

Cheatah

[1] Etwas pauschalisiert. Die Default-Werte erlauben gewisse Freiheiten.

[Matze]

Hallo!

<p>Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text <div style="float:right"><img src="/images/example.jpg" alt=""></div>Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text Copy Text </p>

--> Der Text umfliesst das Bild unsauber

Lies doch dazu bitte einmal den Abschnitt über <p>

Zitat:

Das <p>-Element darf keine anderen blockerzeugenden Elemente wie z.B. Überschriften, Textabsätze oder Listen enthalten. Das bedeutet für HTML: Beim ersten Auftreten eines Tags, welches nicht mehr im akuellen Textabsatz erlaubt ist (beispielsweise <ul> oder <table>), wird der Textabsatz vom Browser implizit (mit einem intern hinzugefügten </p>) geschlossen - ein eventuell später folgendes schließendes </p> steht dann ohne Start-Tag allein und ist ein Fehler.<<

Grüße, Matze

[Claus]

Hallo,

ich habe vor längerer Zeit hier den Tipp bekommen, es mit einer Liste zu machen:

<p>Text</p>
<dl>
<dt><img src="http://www.martinique-bw.de/mq_pic/eigen080124.jpg" alt="" /></dt>
<dd>Bildunterschrift</dd></dl>
<p>Text</p>

zu sehen unter

http://www.martinique-bw.de/mq_p5041de.html

Gruss

Claus

[Samoht]

Gudn!

<p>Text</p>
<dl>
<dt><img src="http://www.martinique-bw.de/mq_pic/eigen080124.jpg" alt="" /></dt>
<dd>Bildunterschrift</dd></dl>
<p>Text</p>

Interessant!

Frage an die Experten: Ist das symantisch nachvollziehbar? Ich meine ja, würde mich aber auch umstimmen lassen...

Gruß aus Fürth in Mittelfranken,
Samoht

[EKKi]

Mahlzeit Samoht,

<p>Text</p>
<dl>
<dt><img src="http://www.martinique-bw.de/mq_pic/eigen080124.jpg" alt="" /></dt>
<dd>Bildunterschrift</dd></dl>
<p>Text</p>

Interessant!

Frage an die Experten: Ist das symantisch nachvollziehbar? Ich meine ja, würde mich aber auch umstimmen lassen...

Ich bezeichne mich selbst zwar nicht als Experte - darf ich trotzdem meinen Senf dazugeben? :-)

Abgesehen davon, dass die "Liste" nur einen Eintrag enthält (und es sich demzufolge eigentlich nicht um eine Liste handelt), ist die Wahl in meinen Augen schon sinnvoll: <dt> bezeichnet ein Irgendwas und im <dd> steht die Definition (bzw. Erläuterung) dazu.

MfG,
EKKi

[Matze]

Hallo!

<dl>
<dt><img src="http://www.martinique-bw.de/mq_pic/eigen080124.jpg" alt="" /></dt>
<dd>Bildunterschrift</dd></dl>

Das Argument Cheatahs, dass eine Tabelle aufgrund fehlender tabellarischer Daten Unfug ist, lässt sich hier ähnlich verwenden.

Eine Definitionsliste ist aufgrund fehlender Definitionen Unfug.
Wie Cheatah bereits erwähnte, gibt es zum Gruppieren das <div>-Tag.
Alternativ für Inline-Elemente <span>.

Bitte auf semantisches HTML achten :)

Grüße, Matze

[Cheatah]

Hi,

Eine Definitionsliste ist aufgrund fehlender Definitionen Unfug.

das Bild wird definiert durch seine Bildunterschrift. Ich persönlich würde hier zwar kein <dl> verwenden, halte es aber für vertretbar.

@Samoht: Symantisch nicht, aber semantisch ;-)

Cheatah

[Matze]

Hallo Cheatah!

das Bild wird definiert durch seine Bildunterschrift. Ich persönlich würde hier zwar kein <dl> verwenden, halte es aber für vertretbar.

Hm, aber mit ganz viel gutem Willen. Ich bevorzuge das <div>. Eine Liste ist meiner Meinung nach immer auch eine Art Aufzählung. Das vermisse ich hierbei.

@Samoht: Symantisch nicht, aber semantisch ;-)

Veilleicht meinte er aber auch Symmetrisch?^^

Grüße, Matze

[Cheatah]

Hi,

Ich persönlich würde hier zwar kein <dl> verwenden, halte es aber für vertretbar.
Hm, aber mit ganz viel gutem Willen.

richtig :-)

Ich bevorzuge das <div>.

Das Problem an HTML ist, dass ein Großteil der enthaltenen Semantik in der Realität nicht anwendbar ist, während ein Großteil der real benötigten Semantik in HTML fehlt. Die jeweils passendste Semantik wird allzu oft von <div> abgebildet - was zumindest dem Anschein nach zur <div>-Suppe führt, auch wenn der Code effektiv richtig gewählt ist.

Ich tendiere aus diesem Grund dazu, anderen Elementen den Vorzug zu geben, sofern dies nicht z.B. dem modularen Konzept der Daten hinderlich ist. Auch wenn in diesem speziellen Fall <dl> _nicht_ meine Wahl wäre[1], möchte ich nicht dagegen argumentieren, um die Vielfalt der Elemente zu unterstützen.

Eine Liste ist meiner Meinung nach immer auch eine Art Aufzählung. Das vermisse ich hierbei.

[1] Genau deswegen :-) Es gibt natürlich Fälle, in denen eine Liste nur einen einzigen Eintrag enthält (oder eine Tabelle nur eine Zeile oder Spalte), aber man sollte sie eigentlich nicht so konzipieren.

@Samoht: Symantisch nicht, aber semantisch ;-)
Veilleicht meinte er aber auch Symmetrisch?^^

Oder den Besprechungstisch bei Symantec ;-)

Cheatah

[Samoht]

Gudn!

Oder den Besprechungstisch bei Symantec ;-)

argh!

nein, das war ein dämlicher teppfihler, warum auch immer ;)

Gruß aus Fürth in Mittelfranken,
Samoht

[Cheatah]

Hi,

argh!

[dsf 2.13] ;-)

nein, das war ein dämlicher teppfihler, warum auch immer ;)

Ach Quatsch, gib's doch zu - der Server hat bei der Auslieferung einen Dreckfuhler gemacht!

Cheatah ;-)

[Kai345]

[latex]Mae  govannen![/latex]

Eine Definitionsliste ist aufgrund fehlender Definitionen Unfug.
Wie Cheatah bereits erwähnte, gibt es zum Gruppieren das <div>-Tag.
Alternativ für Inline-Elemente <span>.

Bitte auf semantisches HTML achten :)

Was wäre semantisch von folgendem zu halten:

<ul>  
  <li>  
    <img src="bild.png" >  
    <p>Beschreibung</p>   (oder evtl. auch <span>)  
  </li>  
  <li>  
    ...  
  </li>  
</ul>

Cü,

Kai

[Cheatah]

Hi,

Was wäre semantisch von folgendem zu halten:

keine Ahnung. Der Teil, den Du geändert hast, hat mit dem Problem nichts zu tun. Wir wissen nicht, ob die Struktur zu den Inhalten passt; den kritischen Part hast Du im Prinzip unverändert übernommen. Nur eines:

<img src="bild.png" >

Das zwingend erforderliche alt-Attribut fehlt.

Cheatah

[Der Martin]

Hi Cheatah,

<img src="bild.png" >
Das zwingend erforderliche alt-Attribut fehlt.

zur Begriffsbestimmung:
  vorgeschrieben != erforderlich

Thermostatventile an Heizkörpern sind heutzutage auch vorgeschrieben, aber nicht zwingend erforderlich; die Heizungsanlage würde auch mit manuellen Stellventilen funktionieren (evtl. sogar besser).
DVD-Laufwerke mit Regionalcodes zu versehen, ist auch vorgeschrieben, aber nicht erforderlich - codefreie Laufwerke erfüllen ihren Zweck ebensogut.

Etwas vorzuschreiben, was ohnehin *erforderlich* ist, wäre Unfug (auch wenn es häufig gemacht wird), denn die Erfüllung der Vorschrift ergibt sich dann automatisch aus der Situation.

In vielen Fällen ist etwas Vorgeschriebenes sinnvoll, so auch bei dem Beispiel mit dem alt-Attribut, das du häufig kritisierst. Aber auch die Analogie
  vorgeschrieben == sinnvoll
ist oft nicht gültig.

Ciao,
 Martin

[Matze]

Hallo Kai!

Eine Definitionsliste ist aufgrund fehlender Definitionen Unfug.
Bitte auf semantisches HTML achten :)
Was wäre semantisch von folgendem zu halten:

<ul>

</ul>

  
Siehe [Cheatahs Einwand](https://forum.selfhtml.org/?t=172772&m=1133175). Es geht nicht darum welche Art Liste verwendet wird, sondern ob eine Liste dafür geeignet ist.  
Aufgrund eines anderen [Einwandes von Cheatah](https://forum.selfhtml.org/?t=172772&m=1132852) halte ich eine Liste auch für vertretbar.  
Die Lösung das Bild in einen Listenpunkt und die Unterschrift/Bildtitel in einen anderen Listenpunkt zu packen fand ich allerdings besser, zumal ich bei deinem Beispiel auch nicht sagen kann ob "..." als Listenpunkt zu vertreten ist solange man nicht weiß wofür "..." steht.  
  
Grüße, Matze

[Kai345]

[latex]Mae  govannen![/latex]

Es geht nicht darum welche Art Liste verwendet wird, sondern ob eine Liste dafür geeignet ist.

*genau das* wollte ich speziell für das von mir gemachte Beispiel ja wissen.

Aufgrund eines anderen Einwandes von Cheatah halte ich eine Liste auch für vertretbar.

Die Lösung das Bild in einen Listenpunkt und die Unterschrift/Bildtitel in einen anderen Listenpunkt zu packen fand ich allerdings besser,

Das könnte man aber auch _ausschließlich_ in einer Definitionsliste machen, da ansonsten die Verbindung zwischen Bild und Text verloren geht. Da eine Definitionsliste jedoch deiner Meinung nach Unfug ist...

Eine Definitionsliste ist aufgrund fehlender Definitionen Unfug.

...habe ich mein Beispiel gebracht, um zu erfahren, ob und (falls ja) warum diese Form auch Unfug ist und was ggf. besser geeignet ist.

zumal ich bei deinem Beispiel auch nicht sagen kann ob "..." als Listenpunkt zu vertreten ist solange man nicht weiß wofür "..." steht.

Hmm .. da in diesem Teil-Thread ab https://forum.selfhtml.org/?t=172772&m=1132816 um Bilder in Listen geht, war es für mich selbstverständlich, daß dort wiederholt jeweils ein Bild und Text folgen werden:

<ul>  
  <li>  
    <img src="bild1.png" alt="Kurzbeschreibung 1" >  
    <p>Beschreibung zu Bild 1</p>  
  </li>  
  <li>  
    <img src="bild2.png" alt="Kurzbeschreibung 2" >  
    <p>Beschreibung zu Bild 2</p>  
  </li>  
  <li>  
    <img src="bild3.png" alt="Kurzbeschreibung 3" >  
    <p>Beschreibung zu Bild 3</p>  
  </li>  
  <!-- hier weitere Listen-Punkte mit gleichem schematischen Aufbau -->  
</ul>

Cü,

Kai

[Matze]

Hallo Kai!

*genau das* wollte ich speziell für das von mir gemachte Beispiel ja wissen.

Ja sie ist vertretbar.
Siehe:

Aufgrund eines anderen Einwandes von Cheatah halte ich eine Liste auch für vertretbar.

Das könnte man aber auch _ausschließlich_ in einer Definitionsliste machen, da ansonsten die Verbindung zwischen Bild und Text verloren geht. Da eine Definitionsliste jedoch deiner Meinung nach Unfug ist...

Diese Ansicht hatte ich mit der oberen Feststellung bereits revidiert. Zitiere bitte vernünftig der Reihenfolge nach.

...habe ich mein Beispiel gebracht, um zu erfahren, ob und (falls ja) warum diese Form auch Unfug ist und was ggf. besser geeignet ist.

Deine Form ist genauso wenig wie genauso sehr Unfug. Pack es irgendwie in eine Liste wie es dir passt, ob nun unter dem <img> ein <p> steht oder ob du eine Definitionsliste nimmst ist mir gleich.
Streng genommen sind die Elemente nicht dafür gedacht, eignen sich aber. Somit "darfst" du sie auch verwenden.

(...)solange man nicht weiß wofür "..." steht.
Hmm .. da in diesem Teil-Thread ab https://forum.selfhtml.org/?t=172772&m=1132816 um Bilder in Listen geht(...)

Da stand ich wohl auf dem Schlauch.

war es für mich selbstverständlich, daß dort wiederholt jeweils ein Bild und Text folgen werden

Genau, mach es so! Wenn dir wie mir die Definitionsliste besser gefällt nimm diese. Ein <p> trennt den Text genauso gut vom Bild wie als Definition in einer Definitionsliste. Es dürfte also keine Rolle spielen.

Grüße, Matze

[heinetz]

danke für den Tipp. Das sieht ja ganz ordentlich aus.
Ich werde mal damit experimentieren !

beste gruesse,
heinetz

[at]

Hallo.

Kennt jemand das Problem ?

Ja, das Problem buchstabiert sich IE.

... und am besten noch eine saubere Lösung ;)

Eine saubere Lösung lautet:
img.Abbildung::after { content: attr(class)" "attr(id)": "attr(title); display: block;}
Das Problem bleibt aber bestehen.
MfG, at