bildunterschrift via css

[mik]

hi forum, da die forumssuche nichts ausspuckte:

ich habe einen langen fließtext, in dem immer wiedermal bilder mit bildunterschriften eingebunden werden.

mein versuch:

<div style="float:left;">
<img src="andreas_test.jpg" style="float:left; margin: 10px; margin-left: 0px; vertical-align:text-bottom;">

<h1 style=" font-size:12px; clear:both; margin-bottom:20px;">subtitel </h1>
<div>

klappt auch, wollte von den pros wissen ob das auch valid(oder wie man sagt)ist, oder obs da eine elegantere lösung gibt

lg
mik

[Gunnar Bittersmann]

Hello out there!

<div style="float:left;">
<img src="andreas_test.jpg" style="float:left; margin: 10px; margin-left: 0px; vertical-align:text-bottom;">

<h1 style=" font-size:12px; clear:both; margin-bottom:20px;">subtitel </h1>
<div>

klappt auch, wollte von den pros wissen ob das auch valid(oder wie man sagt)

Auf Deutsch „valide“ oder „gültig“.

Warum fragst du das nicht den Markup-Validator und den CSS-Validator?

Sinnvoll ist es nicht, 'h1' zur Auszeichnung von Bildunterschriften zu verwenden; 'label' bietet sich dafür an.

See ya up the road,
Gunnar

PS: Und bitte keine Inline-Styles, sondern ein zentrales Stylesheet!

[mik]

eine feine sache, der css validator

[Thomas J.S.]

Hallo,

klappt auch, wollte von den pros wissen ob das auch valid(oder wie man sagt)

Auf Deutsch „valide“ oder „gültig“.

"valide" gibt es im Deutschen nicht. Das deutsche Adjektiv heisst: valid.
Wollte nur erwähnt haben ;-)

Grüße
Thomas

[Orlando]

Hallo Thomas,

valid (oder wie man sagt)

Auf Deutsch „valide“ oder „gültig“.

"valide" gibt es im Deutschen nicht. Das deutsche Adjektiv heisst: valid.
Wollte nur erwähnt haben ;-)

Wer? ;-)

Grüße
 Roland

[Thomas J.S.]

Hallo,

Wollte nur erwähnt haben ;-)

Wer? ;-)

Meine Ohma, nachdem sie ja das Posting geschrieben hat. :-þ

Grüße
Thomas

[Detlef G.]

Hallo Gunnar

... Auszeichnung von Bildunterschriften ...; 'label' bietet sich dafür an.

Das klingt logisch, aber bei allen Definitionen oder Beschreibungen zu "label", die ich kenne, wird der Bezug zu Formularelementen, nicht zu beliebigen Elementen hergestellt.

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi,

Das klingt logisch, aber bei allen Definitionen oder Beschreibungen zu "label", die ich kenne, wird der Bezug zu Formularelementen, nicht zu beliebigen Elementen hergestellt.

Korrekt. http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1:
"<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->"
"The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control."

freundliche Grüße
Ingo

[Ashura]

Hallo Ingo.

Das klingt logisch, aber bei allen Definitionen oder Beschreibungen zu "label", die ich kenne, wird der Bezug zu Formularelementen, nicht zu beliebigen Elementen hergestellt.
[…]
"The LABEL element may be used to attach information to controls. […]

OK, aber hier wird nicht impliziert, dass das label–Element für nichts Anderes genutzt werden darf.

Einen schönen Sonntag noch.

Gruß, Ashura

[Ingo Turski]

Hi,

"The LABEL element may be used to attach information to controls. […]

OK, aber hier wird nicht impliziert, dass das label–Element für nichts Anderes genutzt werden darf.

Hier nicht, aber darüber schon:
"<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->"
und somit liest sich "may be used" als kann verwendet werden, muss aber nicht.

freundliche Grüße
Ingo

[Ashura]

Hallo Ingo.

"The LABEL element may be used to attach information to controls. […]

OK, aber hier wird nicht impliziert, dass das label–Element für nichts Anderes genutzt werden darf.
Hier nicht, aber darüber schon:
"<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->"
und somit liest sich "may be used" als kann verwendet werden, muss aber nicht.

Da hast du Recht. Nichtsdestotrotz liegt es im Ermessen des Autors, einzuschätzen, ob das label–Element nicht auch außerhalb von Formularen sinnvoll ist. Zwar stieß ich bisher noch nicht auf eine solche Situation, hätte aber keine Bedenken, es so einzusetzen.

Einen schönen Sonntag noch.

Gruß, Ashura

[Ashura]

Hallo Gunnar.

Sinnvoll ist es nicht, 'h1' zur Auszeichnung von Bildunterschriften zu verwenden; 'label' bietet sich dafür an.

Ich würde folgendes bevorzugen, wenn der blaue Klotz nicht unbedingt unterstützt werden muss:

img::after {  
  content: attr(title);  
  display:block;  
}

Einen schönen Samstag noch.

Gruß, Ashura

[at]

Hallo.

img::after {

content: attr(title);
  display:block;
}

  
Alternativ lassen sich auch sehr gute Ergebnisse durch die Kombination des Titels mit dem Alternativtext, der ID oder Klassennamen in Verbindung mit Satz- oder Steuerzeichen erzielen:  
~~~css
img.Abb::after  
{  
content: "("attr(class)" "attr(id)": „"attr(title)"“ – "attr(alt)")";  
display:block;  
}

würde dann beispielsweise zu:
(Abb. A1: „Trockene Materie“ – ein Wasser-Molekül)
MfG, at