Larghezza del tag Anchor

[emanueledg]

Ciao,
quale soluzione si può usare nel tag <A> per rendere cliccabile non solo la scritta del link ma tutta la larghezza disponibile?

Ho provato con un CSS inline:

<A href="#" STYLE="width: 100%">

ma non funziona.

È una soluzione molto utile quando il link ha un background di un certo colore (diverso dallo sfondo) che cambia con l'handler hover del CSS, per creare il cosiddetto effetto "highlight": come nel menu "start" di Windows, è più agevole avere tutta la lunghezza del background di un link cliccabile.

[seed_squall_it]

L'elemento <a> deve essere contenuto in un elemento con larghezza definita (sia fissa che in percentuale). Poi, ti basta specificare la dimensione orizzontale dell'elemento <a> in base a quella del suo contenitore (100%) e, cosa fondamentale, trasformare il link (che di default è un elemento inline) in un elemento a livello di blocco con la dichiarazione display: block. Gli elementi inline infatti non accettano dimensioni: sono sempre larghi e alti tanto quanto basta a racchiudere esattamente il loro contenuto. Gli elementi a livello di blocco invece possono essere dimensionati ed è questo che ti serve. Se vuoi impostare anche un'altezza all'elemento <a> (in modo da distanziare i testi dei link l'uno dall'altro) puoi usare o la dichiarazione line-height oppure impostare un padding superiore e inferiore a ciascun link (senza impostarne l'altezza, che altrimenti soffrirebbe dei noti problemi al box model di IE 5 e 6 in modalità compatibile).

a {
width: 100%; /* Larghezza riferita all'elemento che contiene l'elemento <a> */
padding: 4px 0; /* Imposta 4px di padding sopra e sotto il testo del link */
display: block; /* Trasforma l'elemento <a> in un block-level element */
}

[emanueledg]

Grande seed_squall_it!
Questa spiegazione non si evinceva a prima vista dalla lettura della guida css di base...
Grazie