Sezioni non cliccabili...

[the.arch]

Sezioni non cliccabili...

Buongiorno , nel mio sito web ho creato delle sezioni in questo modo

<ul id="header_menu">
<li class="homepage"><a href="index.html"></a></li>
<li class="chisiamo"><a href="#"></li></a>
<li class="cosafacciamo"><a href="#"></li></a>
<li class="docenti"><a href="#"></li></a>
<li class="master"><a href="#"></li></a>
<li class="altaspecializzazione"><a href="alta_speecializzazione.html"></li></a>
<li class="diconodinoi"><a href="dicono_di_noi.html"></li></a>
</ul>

collegandoli al foglio di stile cosi

#header_menu{
position:absolute;
top:139px;
left:60px;
width: 920px;
overflow: auto;
list-style: none;
margin: 0;
}
li{
float: left;
}
li a {
float: left;
line-height: 0px;
text-align: center;
margin: 1px;
}

li.homepage{ background:url(immagini/home.jpg) no-repeat 0 0; width:59px; height:22px; margin : 1px; }
li.homepage:hover{ background-position: 0 -22px; }

li.chisiamo{ background:url(immagini/chisiamo.jpg) no-repeat 0 0; width:111px; height:22px; margin : 1px; }
li.chisiamo:hover{ background-position: 0 -22px; }

li.cosafacciamo{ background:url(immagini/cosafacciamo.jpg) no-repeat 0 0; width:154px; height:22px; margin : 1px; }
li.cosafacciamo:hover{ background-position: 0 -22px; }

li.docenti{ background:url(immagini/idocenti.jpg) no-repeat 0 0; width:116px; height:22px; margin : 1px; }
li.docenti:hover{ background-position: 0 -22px; }

li.master{ background:url(immagini/master.jpg) no-repeat 0 0; width:106px; height:22px; margin : 1px; }
li.master:hover{ background-position: 0 -22px; }

li.altaspecializzazione{ background:url(immagini/altaspecializzazione.jpg) no-repeat 0 0; width:222px; height:22px; }
li.altaspecializzazione:hover{ background-position: 0 -22px; }

li.diconodinoi{ background:url(immagini/diconodinoi.jpg) no-repeat 0 0; width:122px; height:22px; }
li.diconodinoi:hover{ background-position: 0 -22px; }

il problema e che tutte le sezioni nel sito web non possono essere cliccate , cioè anche se ci passo sopra con il mouse non compare la manina , e non mi fa cliccare.

[dymissy]

E' ovvio che non siano cliccabili.

A prescindere che la chiusura dei link è errata:

[html]
..</li></a>

invece si fa cosi:
...</a></li>
[/html]

Ma il problema è che il tag "a" è vuoto, non ha nulla su cui cliccare quindi ovviamente non rende cliccabile. Un testo va sempre inserito, anche per motivi di accessibilità. Puoi nasconderlo in maniera da lasciare solo l'immagine con un banale trucchetto ma deve esserci un testo per orientare anche quelle persone disabili che non navigano con un browser normale ma con browser appositi.

Per nascondere il testo puoi fare qualcosa del genere:

a {
  display: block;
  width: larghezza che necessiti
  height: altezza che necessiti
  overflow: hidden;
  line-height: 9999em;
}

Il ragionamento è questo, magari necessita di altre personalizzazioni in base al CSS della pagina ma cosi già dovrebbe funzionare.