::after nach Bild

[lichtheini]

Hallo Forumianer!
Ich habe folgende HTML-Struktur gegeben (jsfiddle):

<div class="js-tools mo-tag-height-from-icon">  
<img class="js-tools-icon-show-hide js-copy-me-page mo-tool-icon mo-icons-icon mo-icons-copy" src="clear.gif" alt="new_page" hspace="0" vspace="0">  
<img class="js-tools-icon-show-hide js-edit-page mo-tool-icon mo-icons-icon mo-icons-page-edit" src="clear.gif" alt="page-edit" hspace="0" vspace="0">  
<img class="js-tools-icon-show-hide js-edit-rename mo-tool-icon mo-icons-icon mo-icons-work" src="clear.gif" alt="work" hspace="0" vspace="0">  
<img class="js-tools-icon-show-hide js-edit-delete mo-tool-icon mo-icons-icon mo-icons-delete" src="clear.gif" alt="delete" hspace="0" vspace="0">  
</div>

Ich möchte gerne neben den Icons auch eine Beschriftung hinzufügen (bearbeiten, löschen, kopieren). Mein erster Ansatz war ::after, aber das scheint nicht nach Bildern zu funktionieren (siehe stackoverflow).
Hat jemand eine zündende Idee/Hack, wie ich dennoch Textelemente einfügen kann?

Hintergrund: Das HTML kommt aus dem Admin-Bereich eines CMS und ich wollte sehr ungerne im HTML/PHP rumpfuschen. Das ginge als Notlösung, müsste ich dann aber bei jedem Update beachten (oder mich endlich mal mit git beschäftigen). Und außerdem ist Validität/Semantik in diesem Fall völlig egal.

Mit besten Grüßen
der lichtheini

[MudGuard]

Hi,

Ich möchte gerne neben den Icons auch eine Beschriftung hinzufügen (bearbeiten, löschen, kopieren). Mein erster Ansatz war ::after, aber das scheint nicht nach Bildern zu funktionieren

::after fügt am Ende des Element-Inhalts ein Pseudo-Element ein.
img sind aber leer, haben also keinen Inhalt, an dessen Ende ...

cu,
Andreas

[Gunther]

Hi!

::after fügt am Ende des Element-Inhalts ein Pseudo-Element ein.
img sind aber leer, haben also keinen Inhalt, an dessen Ende ...

Ja, das ist_eine_mögliche [1]Interpretation.
Tatsächlich ist es aber ja so, dass "replaced elements" in der CSS Spezifikation gar nicht näher spezifiert werden:"An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet."

Folgerichtig werden also auch Pseudo-Elemente für replaced elements nicht spezifiziert.

Das hat in der Praxis zu unterschiedlichen Implementationen in den Browsern geführt.
In Webkit basierten Browsern "funktionieren" die Pseudo-Elemente für einige dieser Elemente.
Siehe u.a.: http://red-team-design.com/css-generated-content-replaced-elements/

AFAIK stehen die Chancen aber schlecht, dass dieses Verhalten offiziell in die Spec übernommen wird.

Von daher sollte man sich also auch nicht darauf verlassen, dass dies in Zukunft so bleibt. Und da es eh nicht in allen Browsern funktioniert, ist der Ansatz wenig hilfreich.

[1] Man könnte auch argumentieren, dass es sich ja nicht um eine Replace-Funktion handelt, es somit eigentlich egal ist, ob das entsprechende Element von Hause aus einen Inhalt hat oder nicht. Denn :before und :after fügen ja gerade Inhalte vor, bzw. nach dem jeweiligen Inhalt ein. Wenn ein Element also von Hause aus "leer" ist, stellt das ja erstmal vom Prinzip her kein Problem dar.

Gruß Gunther

[Felix Riesterer]

Lieber lichtheini,

Mein erster Ansatz war ::after, aber das scheint nicht nach Bildern zu funktionieren (siehe stackoverflow).

und die fake-content-Methode auf der Stack-Overflow-Antwortseite war Dir auch keine Hilfe?

Liebe Grüße,

Felix Riesterer.

[lichtheini]

und die fake-content-Methode auf der Stack-Overflow-Antwortseite war Dir auch keine Hilfe?

Von daher sollte man sich also auch nicht darauf verlassen, dass dies in Zukunft so bleibt. Und da es eh nicht in allen Browsern funktioniert, ist der Ansatz wenig hilfreich.

Erstens habe ich die Lösung dort noch nicht vollständig verstanden und da fehlt dem <img> das src-Attribut. Kann/Will ich bei mir nicht ändern, weil ich dann doch im PHP rumpfusche. Ich werde aber mal versuchen, das grundsätzlich auch auf meine Ausgangsbasis zu adaptieren.

Zweitens ist der Vorteil des CMS ist ja gerade, das ich Inhalte einfach ändern kann, ohne bestimmte Software(kenntnisse) zu haben. Dem Kunden* möchte ich keinen bestimmten Browser vorschreiben müssen. Und die Kommentare bei stackoverflow suggerieren genau dies.

Beste Grüße
der lichtheini

*Verwandten, dem man mal eben eine Website erstellt

[Felix Riesterer]

Lieber lichtheini,

*Verwandten, dem man mal eben eine Website erstellt

jeder wie er's verdient...

Liebe Grüße,

Felix Riesterer.

[Auge]

Hallo

Auch wenn mein Ansatz wegen der Vorgaben durch das CMS und den zeitlichen Abstand zur Frage hinfällig sein sollten …

Ich habe folgende HTML-Struktur gegeben (jsfiddle):

<div class="js-tools mo-tag-height-from-icon">

<img class="js-tools-icon-show-hide js-copy-me-page mo-tool-icon mo-icons-icon mo-icons-copy" src="clear.gif" alt="new_page" hspace="0" vspace="0">
<!-- noch mehr davon -->
</div>

> Ich möchte gerne neben den Icons auch eine Beschriftung hinzufügen (bearbeiten, löschen, kopieren).  
  
Das sieht verdächtig nach Buttons aus.  
  

> Mein erster Ansatz war `::after`{:.language-css}, aber das scheint nicht nach Bildern zu funktionieren (siehe [stackoverflow](http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-tags)).  
  
Das Warum wurde ja schon erörtert.  
  

> Hat jemand eine zündende Idee/Hack, wie ich dennoch Textelemente einfügen kann?  
>   
> Hintergrund: Das HTML kommt aus dem Admin-Bereich eines CMS und ich wollte sehr ungerne im HTML/PHP rumpfuschen.  
  
Das wäre aber eine mögliche Lösung. Der Umbau auf beschriftete Buttons, die ein Bild als Hintergrund zugewiesen bekommen, würde die Benutzbarkeit heben und dein Problem lösen.  
  

> Das ginge als Notlösung, müsste ich dann aber bei jedem Update beachten (oder mich endlich mal mit git beschäftigen).  
  
Ja, unbestritten ist das ein nicht unerheblicher Aufwand. Speziell dann, wenn man das konsequent umsetzen will. Wo wir schon dabei sind, wenn das ein CMS ist, wird es doch wohl die Wahl zwischen verschiedenen Templates gewähren, oder? In dem Fall könntest du deine Änderungen – z.B. mit Git versioniert – in ein eigenens Template einpflegen.  
  
Sich mit Git – bzw. allgemein mit Versionierungssystemen – zu beschäftigen, ist im Übrigen grundsätzlich eine gute Idee. Deshalb gehört im geklammerten Teil das „oder“ durch das „und“ ersetzt.  
  
Tschö, Auge  

-- 
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
Terry Pratchett, "Wachen! Wachen!"  
  
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}  
  
[Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)

[lichtheini]

Hallo

Auch wenn mein Ansatz wegen der Vorgaben durch das CMS und den zeitlichen Abstand zur Frage hinfällig sein sollten …

… lese ich hier trotzdem mit und freue mich über Antworten :)

Das sieht verdächtig nach Buttons aus.

Ja, nur leider mit uneindeutigen Bildern…

Ja, unbestritten ist das ein nicht unerheblicher Aufwand. Speziell dann, wenn man das konsequent umsetzen will. Wo wir schon dabei sind, wenn das ein CMS ist, wird es doch wohl die Wahl zwischen verschiedenen Templates gewähren, oder? In dem Fall könntest du deine Änderungen – z.B. mit Git versioniert – in ein eigenens Template einpflegen.

Templates für die Admin-Oberfläche wird es wohl nicht geben. Zwischenzeitlich sind leider noch einige weitere Unzulänglichkeiten des CMS aufgetaucht. Da gefühlt die Hälfte der Seite dynamisch mittels jQuery aufgebaut wird, habe ich mich dort eingeklinkt und ergänze die Beschriftung mittels Javascript. Es ist jetzt eine quick'n'dirty-Lösung, aber es bleibt bei einer Codezeile, die ich nach einem Update einfügen muss.

Sich mit Git – bzw. allgemein mit Versionierungssystemen – zu beschäftigen, ist im Übrigen grundsätzlich eine gute Idee. Deshalb gehört im geklammerten Teil das „oder“ durch das „und“ ersetzt.

Ja, das werde ich in Angriff nehmen. Und vermutlich steht in einem halben Jahr dann die Entscheidung: Entweder die bis dahin gesammelten Hacks ordentlich einpflegen und dem Entwickler zur Verfügung stellen oder auf ein anderes, vielseitigeres CMS umsatteln.

Danke an alle für die Hinweise und Erklärungen!
grüße, der lichtheini