[css] span display none / link

[Sandrocchio_0.1]

Ciao a tutti.
Ho questo codice:

<div id="content"> 
    <h2><span>Admin area</span></h2> 
    <ul> 
      <li id="log-out"><span>">log out</span> [/list]
  </div>

e questi stili per fare in modo che mi rimanga solo l'immagine di sfondo

#content ul {
	
	list-style:none;
}
#content ul span {
	display:none;
}
#log-out {
	background-image:url(../images/application/logOut.gif);
	background-repeat:no-repeat;
	width:96px;
	height:33px;
}

Però così perdo il collegamento, come faccio a non visualizzare il testo e a mantenere area link nel[*] ??

[edy72]

dovresti invertire la posizione di <span> e <a> nell'xhtml e aggiungere una regola al css; in questo modo:

- xhtml

<div id="content"> 
<h2><span>Admin area</span></h2> 
<ul> 
<li id="log-out">
<span>log out</span>
 [/list]
</div>

- css

#content ul {
	
	list-style:none;
}
#content ul span {
display: none;
}
#content ul a {display: block; width: 96px; height: 33px;} 
#log-out {
	background-image:url(../images/application/logOut.gif);
	background-repeat:no-repeat;
	width:96px;
	height:33px;
}

ciao!!

[pierofix]

Ecco. Aggiungo solo la soluzione che trovo più intelligente per nascondere un testo a discapito di un'immagine:

XHTML
<h1>Nome dell'azienda</h1>

CSS
h1 {
   background:#fff url(logo.png) no-repeat 0 0;
   text-indent:-1000em;
}

Se comunque preferisci la tua di soluzione, meglio modificare una cosa. Sto parlando del display:none applicato allo span: bene, questa cosa è sempre meglio evitarla in quanto uno screen-reader non leggerà il testo (e quindi viene meno lo scopo). Meglio una cosa del genere:

h1 span {
   position:absolute;
   top:-100em;
}