1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

IMG mit background-image

Dieses Thema im Forum "HTML & XHTML" wurde erstellt von Jan-Frederik Stieler, 15. August 2015.

  1. Jan-Frederik Stieler

    Jan-Frederik Stieler Monsterator Moderator

    Hallo,
    wie seht Ihr dass das img-Element mit einem background-image zu versehen anstatt mit src?
    Grund dafür ist halt das man das Bild besser beeinflussen kann z.B. mittels background-size.
    Von der Semantik her würde ich dies sogar eher bevorzugen als ein DIV.
    Und was würdet ihr in dem Fall mit dem src machen? Einfach ein transparentes gif referenzieren oder einfach leer lassen?

    Grüße
     
    Zuletzt bearbeitet: 15. August 2015
  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Naja... :D
    Wenn's darum geht, background-size lässt sich auf so ziemlich jedes HTML-Element (mit Hintergrundbild) anwenden.
    Ob dieses Vorgehen der Semantik dienlich(er) ist...?!
    Einfach leer lassen wäre ganz schlecht, weil der eine oder andere Browser dann sein typisches Symbol für die nicht existente Bilddatei ausgibt.

    Und das alt-Attribut dürfte in diesem Fall nicht angegeben werden - ansonsten erscheint mangels Bildquelle der alternative Text!

    Also wäre hier zusätzlich eine transparente Bilddatei vom Server zu laden. In meinen Augen reine Ressourcen-Verschwendung. Insbesondere, wenn eine Vielzahl im Code existiert und/oder auf vielen Seiten enthalten ist.

    Mein Fazit: Da hier offensichtlich kein allgemeines Block-Element <div> zum Einsatz kommen soll, nach einem aussagekräftigeren Element Ausschau halten, das zum Kontext passt. Aber bitte nicht dieses verquere Konstrukt!
    [edit]Tipp-Ex[/edit]
     
    Zuletzt bearbeitet: 15. August 2015
  3. Jan-Frederik Stieler

    Jan-Frederik Stieler Monsterator Moderator

    Moin,
    also es handelt sich um einen Slider. Momentan verwende ich auch ein Div dafür aber das hat halt überhaupt keine semantische Aussagekraft.
    Und auf der Seite selbst befindet sich auch sonst nichts was sehr aussagekräftig wäre, außer einer Überschrift.
    Stimmt daran hatte ich jetzt gar nicht gedacht.
    Aber was für ein anderes Element sollte den bei einem Slider/Bild passen?

    Grüße
     
  4. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Hier würde ich bedenkenlos zu einem Listenelement (<ul>, <ol> oder <dl>) greifen :)

    Ein Slider enthält semantisch betrachtet nichts anderes als eine Liste von (animierten) Elementen :cool:

    Siehe z.B. http://sorgalla.com/jcarousel/examples/transitions/ => <li> + background(-image)

    In den übrigen Beispielen sind klassisch die <img>-Elemente in einzelnen <li></li> verpackt.

    PS: Ein allgemeines <div> erhält (noch immer) im Markup mit einem eindeutig bezeichnenden id-/class-Attribut eine gewisse Aussagekraft, in welchem Kontext es an dieser Stelle des Quellcodes steht, wofür keines der speziellen HTML5-Elemente (<header>, <nav>, usw.) zur Seitenstrukturierung exisiert.

    Aber das nur am Rande bemerkt ;)
    [edit]Tipp-Ex[/edit]
     
    Zuletzt bearbeitet: 15. August 2015
  5. Jan-Frederik Stieler

    Jan-Frederik Stieler Monsterator Moderator

    Hi,
    wenn ich eine Liste einsetze habe ich ja leere Listenelemente.
    Eine leere Liste setzt an diese Stelle zwar die Bedeutung Liste hin aber gleichzeitig auch eigentlich nichts den es ist ja eine Leere Liste.
    Und Listen strukturieren ja auch und wenn sie leer sind dann strukturieren sie nichts.
    Die Element sind dann ja nur visuell, durch die Hintergrundbilder, für uns Menschen vorhanden.
    Ich könnte die Liste aber mit einem Platzhaltertext füllen. z.B. dem Bildtitel und das dann per CSS auf display: none stellen.

    PS: Ich war noch nie ein Fan davon Elemente über IDs/Klassen semantisch auszuzeichnen. Das funktioniert nämlich eigentlich nicht.
    Es wäre wenn überhaupt pseudosemantisches Markup. Eine funktionierende Lösung für das grundlegende Problem eine erweiterte Semantik ins HTML einzuführen ist z.B. das role-Attribut.
    Aber ich will hier keine Abhandlung über die Aufgabe von Semantik anstossen :).
     
    Hanno77 gefällt das.
  6. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Aber nur, wenn du den Code dieses spezifischen Beispiels 1:1 übernimmst, und die Elemente nicht mit sinnvollem Inhalt befüllst, den die Bots dann crawlen können :D
    Als "caption" bekannt - ...geht doch :D

    PS: Deine berechtigten Kritikpunkte Richtung leerer Liste treffen im übrigen auch auf das bislang genutzte <div> zu :D
    [edit]Tipp-Ex[/edit]
     
    Zuletzt bearbeitet: 15. August 2015
    Hanno77 gefällt das.
  7. Jan-Frederik Stieler

    Jan-Frederik Stieler Monsterator Moderator

    Ja und deshalb hab ich da ja auch ein Problem mit diesen DIVs und habe diesen Post hier eröffnet um das zu diskutieren :).
     
  8. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Dass du ihnen mittlerweile nichts mehr abgewinnen kannst, ist zwischenzeitlich bis zu mir durchgedrungen :D
     
Die Seite wird geladen...