link con rollover

[cayman]

Salve a tutti, ho un link di questo tipo:

<div id="navigation>"
link
</div>

al testo "link", tramite i CSS, vorrei sostituire un immagine 80px X 20px ed aggiungere un effetto rollover sempre con un immagine delle stesse dimensioni
Ho provato a scrivere il CSS in questo modo, ma con scarsi risultati: le immagini non compaiono, mentre il testo non scompare!

div#navigation a {
height:20px;
width:80px;
background-image:url(urlImmagine1);
background-repeat:no-repeat;
}
div#navigation a:hover {
background-image:url(urlImmagine2);
background-repeat:no-repeat;
}

Qualche suggerimento???

[seed_squall_it]

Il tuo problema è che tenti di applicare delle dimensioni (width: 80px e height: 20px) a un elemento <a> che è un elemento in linea (inline element). Gli elementi in linea, a differenza di quelli a livello di blocco come <div>,

, <h1>, ecc. non hanno dimensioni impostabili e su di loro non ha senso nemmeno impostare i margini verticali. Per risolvere la cosa devi trasformare gli elementi <a> in elementi a livello di blocco, così che le dimensioni da te impostate possano avere effetto. Ci sono due modi, a seconda di come i tuoi link sono disposti nella pagina.

Se i link devono disporsi verticalmente, uno sotto l'altro, ti basta dichiarare nella loro regola di stile:

display: block;

Se invece devono disporsi orizzontalmente, uno affiancato all'altro, devi dichiarare nella loro regola di stile:

float: left;

Dichiarandoli flottanti a sinistra, otterrai il duplice effetto che i "blocchi" dei link saranno tutti affiancati e automaticamente trasformati in elementi a livello di blocco.
Tuttavia ricorda che gli elementi flottanti sono estratti dal flusso del documento, per cui, se il tuo div "navigation" contiene solo box flottanti e non ha un'altezza impostata esplicitamente, la sua altezza sarà nulla e in ogni caso, non sarà condizionata dagli elementi <a> al suo interno. Puoi risolvere impostando esplicitamente l'altezza del div "navigation" oppure ricorrendo a un tag vuoto come un
posto subito prima della chiusura del div "navigation". A questo tag assegni una classe (ad es., chiamala "clear") che "pulisce" l'allineamento dei box flottanti dei link, ripristinando il normale flusso del documento. La classe è fatta così:

br.clear {
clear: left;
}

Tieni presente che le "immagini" per gli stati del link devono essere inserite come sfondi, quindi il tuo tag sarebbe vuoto. Ti consiglio di cercare qualche tutorial in rete sulle tecniche di image replacement, che nel tuo caso mi sembrano molto indicate per ottenere l'effetto che desideri. Le più "gettonate" sono la Pixy Cover-Up Span e la BIR (Bob Image Replacement). Se l'accessibilità non è un problema per le tue pagine, puoi anche cercare qualcosa sulla FIR (Fahrner Image Replacement). Tutte queste tecniche sfruttano un tag <span> all'interno di un altro elemento.

Solo un piccolissimo appunto: se i tuoi link riguardano, come penso io, un menu di navigazione, sarebbe più corretto dal punto di vista semantico ricorrere alla struttura XHTML propriamente adatta a questo scopo, ovvero una lista non ordinata.