Text ausblenden

[Matti Maekitalo]

Hi,

hier mal ne kleine CSS-Frage von mir, die ich bisher weder durch Suchen in SelfHTML noch durch mein XML/CSS-Buch lösen konnte:

Gegeben ist soetwas:
<li id="threads-gelesen-markieren"><a href="/my/?mav=1">Alle Threads als gelesen markieren</a></li>

(Ja, es handelt sich um Quelltext dieses Forums :-))

Ich will:
a) den Text "Alle Threads ..." ausblenden und stattdessen
b) ein von mir erstelltes Bild einblenden, welches natürlich mit oben genannten Linkziel verlinkt sein soll.

Was ich bisher probiert habe:

zu b):

  
#threads-gelesen-markieren > a:after { content:url(readall.gif); }  

Funktioniert so, wie ich es haben will.

Zu a) habe ich folgendes probiert:

  
#threads-gelesen-markieren > a > * { display:none; }  
#threads-gelesen-markieren > a * { display:none; }  
  
 /* sogar abstruse Sachen wie: */  
#threads-gelesen-markieren > a #PCDATA { display:none; }  
  

Nichts davon funktioniert.
Meine Frage also:
Wie kann ich statt dem Link ein verlinktes Bild einfügen?

Tschö, Matti

[Dennis]

Hi Matti,

Gegeben ist soetwas:
<li id="threads-gelesen-markieren"><a href="/my/?mav=1">Alle Threads als gelesen markieren</a></li>

Ist das wirklich so gegeben, oder meinst du vielleicht eher

<li id="threads-gelesen-markieren"><a href="/my/?mav=1">Alle Threads gelesen markieren</a></li>

?

MfG, Dennis.

[Matti Maekitalo]

use Mosche;

Ist das wirklich so gegeben, oder meinst du vielleicht eher

<li id="threads-gelesen-markieren"><a href="/my/?mav=1">Alle Threads gelesen markieren</a></li>

Jo, das meinte ich. Da scheint mich die Forensoftware ein wenig ärgern zu wollen :-)

use Tschoe qw(Matti);

[MudGuard]

Hi,

&lt;li id=&quot;threads-gelesen-markieren&quot;&gt;&lt;a href=&quot;/my/?mav=1&quot;&gt;Alle Threads als gelesen markieren&lt;/a&gt;&lt;/li&gt;
a) den Text &quot;Alle Threads ...&quot; ausblenden und stattdessen
Zu a) habe ich folgendes probiert:

#threads-gelesen-markieren &gt; a &gt; * { display:none; }
#threads-gelesen-markieren &gt; a * { display:none; }
#threads-gelesen-markieren &gt; a #PCDATA { display:none; }

Das mit #PCDATA kann nicht funktionieren - Du kannst nur das Element an sich ansprechen, nicht jedoch gezielt den Text darin.
Mit a * oder a > * kann es auch nicht klappen, denn das spricht Elemente in a an, die es aber gar nicht gibt.

Wie es funktioniert:

den Link zum Blockelement machen (display). Width auf 0 setzen. Padding-left und height auf die Maße des Bildes, dieses nichtwiederholend links oben einsetzen, overflow auf hidden.
(ich hab fürs Testen mal das Auge genommen, das etwas weiter oben angezeigt wird)

[code lang=css]
#threads-gelesen-markieren a
{
    display:block; /* wichtig für width/height /
    width:0px;     / Keinen Platz für den Text lassen /
    overflow:hidden; / Text außerhalb der Box unterdrücken /
    padding-left:30px; / Platz fürs Bild schaffen - padding-left = Bildbreite /
    height:20px;  / dito, Platz fürs Bild /
    background:url(http://src.selfhtml.org/xview.gif) left top no-repeat; / das Bild einsetzen */
}

  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://www.Mud-Guard.de/)  
[Schreinerei Waechter](http://www.schreinerei-waechter.de/)  
  
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.  

[Matti Maekitalo]

use Mosche;

Das mit #PCDATA kann nicht funktionieren - Du kannst nur das Element an sich ansprechen, nicht jedoch gezielt den Text darin.
Mit a * oder a > * kann es auch nicht klappen, denn das spricht _Elemente_ in a an, die es aber gar nicht gibt.

Jo, das war mir irgendwie klar. Die Verzweiflung trieb mich zu diesen Schundtaten :-)

den Link zum Blockelement machen (display). Width auf 0 setzen. Padding-left und height auf die Maße des Bildes, dieses nichtwiederholend links oben einsetzen, overflow auf hidden.

Klasse, funktioniert genau so, wie ich es will.

use Tschoe qw(Matti);