Bild mit Unterschrift ohne Tabelle
Peter
- html
Hallo,
wie erreiche ich, dass unter einem Bild ein beschreibender Text steht?
Falls nur ein Bild pro "Zeile" ist es ja trivial, aber wenn mehrere Bilder nebeneinander stehen sollen?
Thanks
Peter
@@Peter:
nuqneH
wie erreiche ich, dass unter einem Bild ein beschreibender Text steht?
Mit dem entsprechendem Markup.
Falls nur ein Bild pro "Zeile" ist es ja trivial, aber wenn mehrere Bilder nebeneinander stehen sollen?
Dann sorgst du per CSS (Breitenangabe, float oder inline-block) dafür, dass die figures nebeneinander passen – bei genügend großem Anzeigebereich, sonst untereinander.
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Dann sorgst du per CSS (Breitenangabe, float oder inline-block) dafür, dass die figures nebeneinander passen – bei genügend großem Anzeigebereich, sonst untereinander.
Ergänzung: figure-Elemente dürfen auch geschachtelt werden, etwa um Entwicklungsstufen zu zeigen.
<figure>
<figure>
<img src="…" alt="Raupe">
<figcaption>Raupe …</figcaption>
</figure>
<figure>
<img src="…" alt="Puppe">
<figcaption>Puppe …</figcaption>
</figure>
<figure>
<img src="…" alt="Falter">
<figcaption>Falter …</figcaption>
</figure>
<figcaption>Entwicklungsstadien eines Kohlweißlings</figcaption>
</figure>
Matthias
@@Matthias Apsel:
nuqneH
Ergänzung: figure-Elemente dürfen auch geschachtelt werden, etwa um Entwicklungsstufen zu zeigen.
Was sich auch durchaus so auszeichnen lässt:
<table>
<caption>Entwicklungsstadien eines Kohlweißlings</caption>
<tbody>
<tr>
<td>
<img src="…" alt="Raupe">
</td>
<td>
<img src="…" alt="Puppe">
</td>
<td>
<img src="…" alt="Falter">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Raupe …</th>
<th>Puppe …</th>
<th>Falter …</th>
</tr>
</tfoot>
</table>
Qapla'
@@Gunnar:
Was sich auch durchaus so auszeichnen lässt:
<table>
....
/table>
Habe ich die bisherigen Threads in selfhtml falsch verstanden, wo tables nur empfohlen werden, wenn "echte" Tabellen?
Habe ich die bisherigen Threads in selfhtml falsch verstanden, wo tables nur empfohlen werden, wenn "echte" Tabellen?
Ist doch eine echte Tabelle, die verschiedenen Zelleninhalte stehen in einer direkten Beziehung zu einander.
Noch auffälliger würde es werden, wenn man mehr als einen Datensatz hat, dann müsste man aber caption- und tfoot-Elementinhalte anpassen.
MfG
bubble
Hallo,
ich habe jetzt folgendes gemacht:
<figure style="float: left; max-width: 100%">
<img src="/fotos/f1.jpg" alt="...">
<figcaption>
Das Bild zeigt .....
<figcaption>
</figure>
<figure style="float: right; max-width: 100%">
<img src="/fotos/f2.jpg" alt=".....">
<figcaption>
Das Bild .........
<figcaption>
</figure>
(Ich weiß, dass die Style-Angaben in das CSS gehören)
Damit werden beide Bilder nebeneinander dargestellt und wie von mir gewünscht am linken/rechten Rand ausgerichtet.
Wenn ich nun aber das Fenster verkleinere, werden die Bilder untereinander dargestellt, leider aber durch die float-Angaben nicht direkt untereinander.
Erst wenn die Seite so klein wird, dass es nicht mehr anders geht, sind die beiden Bilder bündig untereinander.
Wie kann ich also erreichen, dass die Bilder, wenn sie untereinander dargestellt werden, zentriert untereinander stehen?
Danke
Peter
Om nah hoo pez nyeetz, Peter!
Wenn ich nun aber das Fenster verkleinere, werden die Bilder untereinander dargestellt, leider aber durch die float-Angaben nicht direkt untereinander.
Warum float left und right? Was bewirkt float eigentlich? Informiere dich!
Wie kann ich also erreichen, dass die Bilder, wenn sie untereinander dargestellt werden, zentriert untereinander stehen?
Das hängt auch von deinem Drumrum ab. display: inline-block oder table-cell in verbindung mit text-align könnte helfen.
Matthias
Hallo Matthias und andere,
Das hängt auch von deinem Drumrum ab. display: inline-block oder table-cell in verbindung mit text-align könnte helfen.
Beim Studieren des "inline-block" bin ich auf
«inline-block = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss - ähnlich einem "inline replaced element" wie img»
gestoßen.
Wenn ich aber nach "inline replaced element" suche finde ich immer sinngemäß nur
'verhält sich wie "inline replaced element"', nicht aber eine Erläuterung selbst.
Was bedeudet "inline replaced element" und wie wird es definiert?
Gruß
Peter
Om nah hoo pez nyeetz, Peter!
Wenn ich aber nach "inline replaced element" suche finde ich immer sinngemäß nur
'verhält sich wie "inline replaced element"', nicht aber eine Erläuterung selbst.
Was bedeudet "inline replaced element" und wie wird es definiert?
Ersetzte Elemente sind solche, deren Darstellung (erstmal) nicht im Verantwortungsbereich von CSS liegt. Ein Bild beispielsweise bringt seine eigenen Größenangaben mit.
Matthias
Hello Peter,
wie erreiche ich, dass unter einem Bild ein beschreibender Text steht?
Falls nur ein Bild pro "Zeile" ist es ja trivial, aber wenn mehrere Bilder nebeneinander stehen sollen?
Ich hatte diese Frage neulich schon mal gestellt hier.
Da die figure-Auszeichnungen erst ab CSS 3.0 unterstützt werden, habe ich
<dl>
<dt><image ...></dt>
<dd>Caption zum Bild</dd>
<dd>Beschreibung zum Bild</dd>
</dl>
benutzt. Das ist laut Gunnar zwar semantisch nicht ganz richtig, ich persönlich denke aber, dass es auch nicht ganz falsch ist.
Eine Tabelle halte ich nur für wirklich tabellarische Darstellungen für angemessen. Da sieht dann also jede Zeile wie die andere aus. Tabelle in Tabelle ist eigentlich schon ein Bruch dieser Forderung. Und unterschiedliche "Satzarten" (also verschieden organisierte Zeilen) passen da auch nicht wirklich rein.
Bei der Definition-List kann man jedenfalls wunderschön mit CSS herumhantieren und auch die Anordnungen für die einzelnen Elemente gut steuern.
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
Hallo,
Da die figure-Auszeichnungen erst ab CSS 3.0 unterstützt werden, ...
da bringst du wohl irgendwas durcheinander. Du meinst vermutlich: Ab HTML 5.
CSS ist vom Prinzip her so universell, dass es mit jedem Markup kombinierbar ist.
Ciao,
Martin
@@Der Martin:
nuqneH
Da die figure-Auszeichnungen erst ab CSS 3.0 unterstützt werden, ...
da bringst du wohl irgendwas durcheinander.
Ja, das tut er.
Du meinst vermutlich: Ab HTML 5.
Eher: Schon immer. Browser habe immer schon Style-Angabe auch auf ihnen unbekannte Element angewandt. Außer alte IEs, denen man mit Shim (document.createElement) auf die Sprünge helfen muss.
CSS ist vom Prinzip her so universell, dass es mit jedem Markup kombinierbar ist.
Ja, mit jeglichem XML. Bei SVG wird davon auch reger Gebrauch gemacht. Theoretisch auch mit anderem Markup als XML- oder SGML-Formaten.
Qapla'
Hallo,
Da die figure-Auszeichnungen erst ab CSS 3.0 unterstützt werden, ...
Du meinst vermutlich: Ab HTML 5.
Eher: Schon immer.
nein, ich wollte auf den Punkt hinaus, dass das figure-Element erst ab HTML 5 existiert, aber unabhängig von CSS.
Ciao,
Martin
@@Der Martin:
nuqneH
nein, ich wollte auf den Punkt hinaus, dass das figure-Element erst ab HTML 5 existiert, aber unabhängig von CSS.
Und ich wollte darauf hinaus, dass sich das figure-Element nicht erst in Browsern mit HTML5-Parser stylen lässt, sondern in auch in äteren. Genauso wie das husseldiguggeldu-Element.
Qapla'
@@Tom:
nuqneH
<dl>
<dt><image ...></dt>
<dd>Caption zum Bild</dd>
<dd>Beschreibung zum Bild</dd>
</dl>
dl ist spätestens dann ungeeignet, wenn es um mehrere Bilder geht (also in diesem Fall), da es in HTML immer noch kein gruppierendes di-Element für zusammengehörige th-/td-Elemente gibt.
Und BTW, das HTML-Element heißt img, nicht image.
Mit
~~~html
<dl>
<dt><img ...></dt>
<dd>Caption zum ersten Bild</dd>
<dd>Beschreibung zum ersten Bild</dd>
<dt><img ...></dt>
<dd>Caption zum nächsten Bild</dd>
<dd>Beschreibung zum nächsten Bild</dd>
</dl>
wird sich kaum das gewünschte Layout erzielen lassen.
<dl>
<dt><img ...></dt>
<dd>Caption zum ersten Bild</dd>
<dd>Beschreibung zum ersten Bild</dd>
</dl>
<dl>
<dt><img ...></dt>
<dd>Caption zum nächsten Bild</dd>
<dd>Beschreibung zum nächsten Bild</dd>
</dl>
wäre semantischer Unfug, da es sich um *eine* Liste handelt.
<dl>
<di>
<dt><img ...></dt>
<dd>Caption zum ersten Bild</dd>
<dd>Beschreibung zum ersten Bild</dd>
</di>
<di>
<dt><img ...></dt>
<dd>Caption zum nächsten Bild</dd>
<dd>Beschreibung zum nächsten Bild</dd>
</di>
</dl>
wäre die Gruppierung, die es in HTML nicht gibt, weil Hixie sich stur gestellt hat.
Vielleicht führt über die W3C-Gruppe ein Weg, das in HTML5.1 einzuführen?
Qapla'