:before will nicht bei <img>

[Deus Figendi]

Guten Abend,
im Archiv habe ich einen Thread gefunden (der Tab ist wieder zu, daher gerade kein Link zur Hand) in dem jemand wollte, dass auf mobilen Endgeräten für Bilder nur der Alternativtext angezeigt wird.
Nun ich habe ein ganz ähnliches Problem, bei mir sind's halt die Drucker :)
Dem Benutzer "damals" konnte nicht geholfen werden aber nun hatte ich die Idee das ganze mit den Pseudoelementen :before bzw. :after zu realisieren (das war in dem damaligen Thread nicht angesprochen worden).
Die Idee: Vor ein Bild wird sein Alternativtext geschrieben, denn laut SELF kann man auf die Attribute zugreifen. Das Bild selber wird dann via display:none; oder falls dann auch der Pseudo-Inhalt verschwinden sollte halt mit width:1px; oder irgendwie so ausgeblendet. Soweit bin ich noch nicht. Der Haken: Es geht nicht!
Ich habe keine Ahnung warum, ich konnte auch keinen Hinweis finden dass das nicht mit <img>-Elementen gehen soll.
Hier ein HTML-Schnippsel (bitte nicht schimpfen, ich habe dem CMS-Template-Autor schon gesagt er soll das div durch ein <h1> ersetzen... kommt vielleicht/hoffentlich noch)

<div id="headline">  
    <img width="249" height="26" border="0"  
         title="Textinhalt des Bildes"  
         alt = "Textinhalt des Bildes"  
         src="uri/zum.bild"  
    />  
    <img width="190" height="26" border="0"  
         title="Textinhalt eines zweiten Bildes"  
         alt="Textinhalt eines zweiten Bildes"  
         src="uri/zum/zweiten.bild"  
    />  
</div>

So, das sind Überschriften um genau zu sein, folglich sollen sie ja auf dem Drucklayout auftauchen, die Idee:

div#headline img:before {  
 content:attr(alt);  
}

Und dann halt noch irgendwie Überschriftenmäßig formatieren. Wie auch immer, geht nicht. Geht nicht im Sinne von: Kommt nicht auf den Monitor.
"Okay" dachte ich mir "hast das mit dem Attribute-übernehmen irgendwie falsch verstanden" also was simples:

div#headline img:before {  
 content:"++++++++foobar++++++++++";  
 font-size:300%;  
}

Resultat: nix!
Nächster Versuch war dann das auf das div davor/darum anzuwenden:

div#headline:before {  
 content:"++++++++foobar++++++++++";  
 font-size:300%;  
}

Kein Problem, funktioniert wunderbar. Aber von da aus habe ich keinen Zugriff auf das alt-Attribut. Hm vielleicht liegt's am inline-Element... nein auch nicht div#headline img { display:block; } brachte auch keinen Erfolg. Nächster Versuch/Gedanke war, dass es vielleicht im Selektor liegt, aber auch direktes Anwenden auf ALLE Bilder brachte keinen Erfolg:

img:after{  
 content:"++++++++foobar++++++++++";  
 font-size:300%;  
}

So und nun hab ich keine Idee mehr. Hat jemand Vorschläge, Ideen? Sagt mir jemand dass das für <img>-Elemente nicht gilt? Oder nicht für leere Elemente? Irgendwas womit ich vielleicht weiter komme?

(Anm: Andere Pseudoelemente scheinen zu funktionieren, zumindest :hover habe ich getestet und war kein Problem)

[ChrisB]

Hi,

Sagt mir jemand dass das für <img>-Elemente nicht gilt?

Genau.
:before/:after und content fügen Inhalt zum bestehenden Inhaltes eines Elements hinzu, aber so, als ob er *innerhalb* des Elements wäre.
:before/:after heissen "pseudo elements", weil sie genau das sind/machen: Zusätzliche Elemente innerhalb des Elements, auf das sie angewandt werden, erzeugen.

Schau dir das Beispiel in der Spezifikation an, http://www.w3.org/TR/CSS21/generate.html#before-after-content

<p> Text </p> mit der Formatierung p:before { display: block; content: 'Some'; }
soll laut diesem genauso wie bspw. das folgende
<p><span>Some</span> Text </p> mit Formatierung span { display: block }
gerendert werden.

<img><span>...</span></img> gibt's aber nicht.

MfG ChrisB

[Deus Figendi]

Mhm verstehe, dann macht's mein Browser zwar nicht 100%ig richtig, aber... nagut.

:before/:after und content fügen Inhalt zum bestehenden Inhaltes eines Elements hinzu, aber so, als ob er *innerhalb* des Elements wäre.

Mit anderen Worten: Wenn ein Element keinen Inhalt hat, weil es ein sog. "inhaltsleeres Element" ist kann man keinen Inhalt hinzufügen.
Genau das hat mein Test, den ich eben durchgeführt habe auch ergeben, bis auf eine Ausnahme: <hr />
Tatsächlich hatte ich schon die Vermutung, nachdem es beim <input /> auch nicht geklappt hatte, aber wie gesagt mit <hr /> geht's (mit <br /> nicht).

Nungut, wohl ein Fehler in meinem Browser. Schade, muss ich den Kram eben doch als Bild an den Drucker geben (und hoffen, dass der Browser eh so eingestellt ist, dass es den Alternativtext statt des Bildes im Druck verwendet).

Schonen Dank Chris!

[Detlef G.]

Hallo Deus

Nungut, wohl ein Fehler in meinem Browser. Schade, muss ich den Kram eben doch als Bild an den Drucker geben …

Nein, musst du nicht:

  
<div id="headline">  
    <span>Textinhalt des Bildes</span>  
    <img width="249" height="26" border="0"  
         title="Textinhalt des Bildes"  
         alt = "Textinhalt des Bildes"  
         src="uri/zum.bild"  
    />  
    <span>Textinhalt eines zweiten Bildes</span>  
    <img width="190" height="26" border="0"  
         title="Textinhalt eines zweiten Bildes"  
         alt="Textinhalt eines zweiten Bildes"  
         src="uri/zum/zweiten.bild"  
    />  
</div>  

Im normalen CSS dann:

  
#headline span {  
  display:none;  
}  

Und im Druck-CSS:

  
#headline span {  
  display:inline;  
}  
#headline img {  
  display:none;  
}  

Auf Wiederlesen
Detlef

[Deus Figendi]

Hallo Deus

Nungut, wohl ein Fehler in meinem Browser. Schade, muss ich den Kram eben doch als Bild an den Drucker geben …

Nein, musst du nicht:
(...)

Äh ja, aufs Markup hab' ich keinen Zugriff, aber ich hatte es dem Template-Autor auch schon gesteckt, mit diesen Worten:

(...)Denkbar wäre höchstens den Text nochmal in #headline zu schreiben also normales <span>-Element, welches man dann ausblendet und im Druckerstyle-sheet dann wieder einblendet (und dafür die Grafiken ausblendet). Falls du das machst: Kannst auch gleich den #headline-Div durch ein <h1> ersetzen :)

[Gunnar Bittersmann]

@@Deus Figendi:

nuqneH

Ich habe keine Ahnung warum, ich konnte auch keinen Hinweis finden dass das nicht mit <img>-Elementen gehen soll.

http://forum.de.selfhtml.org/archiv/2006/9/t137755/#m894820 ff.

Qapla'