Gast Geschrieben 11. August 2010 Geschrieben 11. August 2010 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 Geschrieben 12. August 2010 Geschrieben 12. August 2010 Ohne es ausprobiert zu haben: Dem <p> per CSS ne feste Breite zuweisen?
Funfare Geschrieben 12. August 2010 Geschrieben 12. August 2010 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 Geschrieben 12. August 2010 Geschrieben 12. August 2010 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 Geschrieben 12. August 2010 Geschrieben 12. August 2010 Spannend o_O <label> ist nicht nur für Formulare gedacht?
TBT Geschrieben 12. August 2010 Geschrieben 12. August 2010 wer sagt das? label ist eine Beschriftung für ein anderes Element, das ist nicht nur für Formulare vorgesehen
Gast Geschrieben 12. August 2010 Geschrieben 12. August 2010 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 Geschrieben 12. August 2010 Geschrieben 12. August 2010 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?
Gast Geschrieben 12. August 2010 Geschrieben 12. August 2010 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 Geschrieben 13. August 2010 Geschrieben 13. August 2010 Dann könnte vielleicht width:inherit helfen.
Gast Geschrieben 13. August 2010 Geschrieben 13. August 2010 Geht auch nicht. Ich kann dem div-Element keine feste Breite geben. Also gibts auch nix zu vererben
unbenannt Geschrieben 14. August 2010 Geschrieben 14. August 2010 Spricht denn etwas dagegen, die Breite des divs per Javascript auf die Breite des beinhaltenden Bildes (+ Abstände) zu setzen?
Gast Geschrieben 15. August 2010 Geschrieben 15. August 2010 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 Geschrieben 15. August 2010 Geschrieben 15. August 2010 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 Geschrieben 16. August 2010 Geschrieben 16. August 2010 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 Geschrieben 16. August 2010 Geschrieben 16. August 2010 [...] 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 Geschrieben 16. August 2010 Geschrieben 16. August 2010 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
Gast Geschrieben 16. September 2010 Geschrieben 16. September 2010 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 Geschrieben 17. September 2010 Geschrieben 17. September 2010 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 Geschrieben 22. September 2010 Geschrieben 22. September 2010 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 Geschrieben 28. September 2010 Geschrieben 28. September 2010 Die Anzeige der Bildunterschrift mit einem kleinen PHP-Script auf XX Zeichen kürzen?!
Empfohlene Beiträge
Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren
Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können
Benutzerkonto erstellen
Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!
Neues Benutzerkonto erstellenAnmelden
Du hast bereits ein Benutzerkonto? Melde Dich hier an.
Jetzt anmelden