Bildunterschrift mit html

[Pixelfuchs]

Hallo liebe Community,

ich bräuchte mal eure Hilfe.

Ich bastel gerade an nem Wordpresstemplate.

Ich hänge im Moment an einem Problem mit der Bildunterschrift.

Ich verwende folgenden html-Quelltext:

<div class="bild">

<img src="bild.jpg" ..... />

<p>Bilunterschrift</p>

</div>

Das div-Element wird dann noch mit css formatiert. Unter anderem mit nem Innenabstand und nem Rahmen drum.

Das Problem ist, dass das div-Element sich an den Inhalt anpasst. Beim Bild ist es natürlich ok. Es sieht aber Blöd aus, wenn der Text breiter als das Bild ist.

Jemand ne Idee, wie ich das umgehen kann? Da es sich um ein CMS handelt, soll die Anwender-Lösung möglichst Idiotensicher sein.

Gibt es da vielleicht sogar ein Wordpress Template-Tag?

P.S.: Es sollte ohne Plugin gehen.

mfg Hendrik232

[azett]

Ohne es ausprobiert zu haben: Dem <p> per CSS ne feste Breite zuweisen?

[Funfare]

Hallo,

ich weis nicht ob es nicht auch einfacher geht, aber du könntest mit php die Bildbreite abfragen und dann beim <p> die breite mit css eintragen

<p style="width:$bildbreite">

MfG

Funfare

[TBT]

wenn du schon eine ordentliche Bildunterschrift machst,

würde ich diese auch korrekt semantisch auszeichnen für Besucher und Suchmaschinen

<div ...>

  <img src="..." id="bild01" alt="..." />

  <label for="bild01">auf dem Bild ist ...</label>

</div>

sowas findet die Google Bildsuche richtig lecker

[azett]

Spannend o_O

<label> ist nicht nur für Formulare gedacht?

[TBT]

wer sagt das?

label ist eine Beschriftung für ein anderes Element,

das ist nicht nur für Formulare vorgesehen

[azett]

Danke Man lernt nie aus

[Pixelfuchs]

Schonmal danke.

Dem <p>-Element kann ich keine feste Breite geben. Es soll ja auch dynamisch sein

<label> ist meiner Meinung nach nur für Formulare.

An die php-Lösung habe ich auch schon gedacht. Das ist aber meine letzte Option. Da es doch recht schwer werden wird. Die Anzahl der Bilder pro Seite ist ja nicht festgelegt. Außerdem schreibt das CMS-System die Daten ja in eine Datenbank. Da muss ich den genauen Ablauf entwirren und das Speichern ein wenig abändern.

mfg Hendrik232

[azett]

Wenns aber unbegrenzt und dynamisch sein soll, übersteigts die Breite des Bildes ab einer gewissen Textlänge doch zwangsläufig...? :beagolisc

Vielleicht hilft dir max-width weiter?

[Pixelfuchs]

Ich habe mal ein Bild zur Veranschaulichung gemacht:

So, wie oben soll es aussehen.

Unten ist das Problem. Bei überlangem Text wird der Text nicht umgebrochen, da das div-Element keine feste Breite hat. Und die kann ich nicht vergeben, da die Breite des Bildes nicht feststeht.

[azett]

Dann könnte vielleicht width:inherit helfen.

[Pixelfuchs]

Geht auch nicht.

Ich kann dem div-Element keine feste Breite geben.

Also gibts auch nix zu vererben

[unbenannt]

Spricht denn etwas dagegen, die Breite des divs per Javascript auf die Breite des beinhaltenden Bildes (+ Abstände) zu setzen?

[Pixelfuchs]

Sowas währe eine Notlösung. Nicht jeder hat JS aktiviert.

Aber so, wie es scheint muss ich so etwas wohl doch benutzen.

Mit reinem html scheint es nicht zu gehen

Ich müsste dann die Breite des Bildes auslesen und diese Breite dem div-Element geben. padding, margin und border sind ja beim Box-Modell additiv.

mfg Hendrik232

[unbenannt]

Meines Erachtens sollte man heute nicht mehr davon ausgehen, dass ein Nutzer Javascript deaktiviert hat. Statistiken kenne ich zwar diesbezüglich keine, aber das Bauchgefühl behauptet, dass die Zahl der Nutzer ohne JS eher gering sein dürfte.

Allerdings kann für solche Benutzer immernoch per <noscript> ein Hinweis angezeigt werden, dass es ggf. Einschränkungen in Design und Funktionalität der Seite gibt, wenn JS deaktiviert ist.

[azett]

Meines Erachtens sollte man heute nicht mehr davon ausgehen, dass ein Nutzer Javascript deaktiviert hat. Statistiken kenne ich zwar diesbezüglich keine, aber das Bauchgefühl behauptet, dass die Zahl der Nutzer ohne JS eher gering sein dürfte.

Allerdings kann für solche Benutzer immernoch per <noscript> ein Hinweis angezeigt werden, dass es ggf. Einschränkungen in Design und Funktionalität der Seite gibt, wenn JS deaktiviert ist.

Ich bin mit ScriptBlocker unterwegs, und den deaktiviere ich auch nicht für jede x-beliebige Seite.

Wenn eine Seite ohne JS eingeschränkt funktioniert, nehm ich das in Kauf; seh ich jedoch gar nix (weil z.B. der komplette HTML-Quelltext mit JS zusammengebaut wird :beagolisc - alles schon gesehen!), ist der Tab ganz fix wieder zu.

Bedenke bei Aussagen wie "Meines Erachtens sollte man heute nicht mehr davon ausgehen, dass ein Nutzer Javascript deaktiviert hat", daß eine nicht unerhebliche Zahl User mit Browsern unterwegs sind, die mit JS nix anfangen können - Screenreader oder Textbrowser mit Braillezeile zum Beispiel. Auch diverse mobile Clients haben mit JS ihre Problemchen.

[unbenannt]

[...] eine nicht unerhebliche Zahl User mit Browsern unterwegs sind, die mit JS nix anfangen können [...]

In welcher Größenordnung soll sich diese Zahl denn aufhalten?

Um kurz gänzlich Offtopic zu werden:

JS oder nicht JS hängt mMn vor allem von zwei Faktoren ab:

1. Zielgruppe

2. wie stark wäre der Einsatz

Eine Seite komplett mit Javascript aufbauen zu lassen ist natürlich möglich, aber mMn Quatsch. Ich kann nur von mir sprechen und ich setze Javascript meist nur unterstützend ein. Nur in seltenen Fällen ist die Zielrichtung der Seite so speziell, dass Funktion und/oder Design durch JS bestimmt werden. Dann ist die Zielgruppe aber auch klar definiert. Wenn dann mal Design oder Funktion nicht gegeben sind, weil sich der noch zu definierende "kein JS"-Prozentsatz doch einmal verirrt: was soll's?

In persönlichen Projekten muss ich es nicht jedem recht machen - die Mehrheit genügt mir. Ansonsten geschieht alles nach Wunsch des Kunden, insofern auch umsetzbar.

[etreu]

Mal zurück zum Thema:

mir fallen dazu ein paar CSS-Eigenschaften, die dir vielleicht weiterhelfen könne:

• width (z.B. 100%) oder max-width
  
• white-space (wrap)
  
• display (inline?!)
  
• overflow
  

[Pixelfuchs]

Ich wollte nochmal eine Rückmeldung geben.

Ich habe leider keine Möglichkeit gefunden, wie ich es mit html und css hin bekomme. Ich werde es erst mal manuell machen und bei Gelegenheit mal ein kleines Skript schreiben.

P.S.: Über Feedback zu meiner Seite würde ich mich freuen:

www.pixelecke.de

Ich hoffe das hier wird nicht als Spam angesehen

Bei den Bildern seht ihr die angesprochene Einbindung der Bilder.

[Sassy]

Da du dynamische Div-Breiten hast, macht es Sinn, die Breite auch dynamisch mit JavaScript zu setzen, in dem du die Breite des img ausliest.

Die User die kein JavaScript aktiviert haben, sehen dann halt die überlange Zeile, kein Problem.

[Schaelle]

wenn du schon eine ordentliche Bildunterschrift machst,

würde ich diese auch korrekt semantisch auszeichnen für Besucher und Suchmaschinen

<div ...>

  <img src="..." id="bild01" alt="..." />

  <label for="bild01">auf dem Bild ist ...</label>

</div>

sowas findet die Google Bildsuche richtig lecker

Nein das ist nicht korrekt.

Laut W3C Definition in HTML4, XHTML und meines Wissens auch HTML5 gilt folgende Definition für das Label-Element:

The label element associates a label with form controls such as input, textarea, select and object.

Quelle: XHTML Reference: label

Quelle 2: HTML label tag

[itanum]

Die Anzeige der Bildunterschrift mit einem kleinen PHP-Script auf XX Zeichen kürzen?!