CSS/DIV hover

[Ruben Elmo]

Salve,
sto creando un menù che ha questa struttura:

<div id="LINK">
   [img]immagini/punto.gif[/img][url="registrati.php"] Registrati[/url]
</div>
<div id="LINK">
   [img]immagini/punto.gif[/img][url="corriere.php"] Corriere della sera[/url]
</div>
<div id="LINK">
   [img]immagini/punto.gif[/img][url="repubblica.php"] Repubblica[/url]
</div> 

Avrei la necessità di mettere un effetto rollover sul div e NON sul link...
Qual'è lo stile CSS da impostare? :master:

Grazie

[TheBestNeo]

link:hover{} non funziona?

[Ruben Elmo]

Purtroppo no!

Questo è il CSS:

div#LINK {
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #CCCCCC;
    height: 20px;
    line-height: 20px;
}

div#LINK:hover {
    background-color: #FFCC00;
} 

e questo il menù:

<div id="LINK"> 
   [img]immagini/punto.gif[/img][url="registrati.php"] Registrati[/url] 
</div> 
<div id="LINK"> 
   [img]immagini/punto.gif[/img][url="corriere.php"] Corriere della sera[/url] 
</div> 
<div id="LINK"> 
   [img]immagini/punto.gif[/img][url="repubblica.php"] Repubblica[/url] 
</div> 

[Zweer]

alura...

innanzitutto attento che per la nuova specifica (credo anche per la vecchia ma non ne sono sicuro) gli "id" che dai ai tag devono essere univoci, quindi qui è meglio se metti "class"...

dopo questa pignoleria ti dico come ho fatto io in un caso molto analogo:

anzicchè mettere lo stato hover al div imposti il link come "display:block" e quindi assume tutta la grandezza del div che quindi è come se si illuminasse lui (illuminasse o l'effetto rollover che vuoi...

ti posto una bozza di codice:

<div class="LINK">
   [url="registrati.php"][img]immagini/punto.gif[/img] Registrati[/url]
</div>
<div class="LINK">
   [url="corriere.php"][img]immagini/punto.gif[/img] Corriere della sera[/url]
</div>
<div class="LINK">
   [url="repubblica.php"] [img]immagini/punto.gif[/img] Repubblica[/url]
</div> 

e ora il css:

div.LINK
{
    border-bottom:1px dashed #cccccc;
    height:20px;
    line-height:20px;
}
a.link_link, a.link_link:active, a.link_link:visited, a.link_link:hover
{
    display:block;
    width:100%;
    height:100%;
}
a.link_link:hover
{
    background-color:#FFCC00;
} 

da notare che questa cosa funziona alla perfezione con ff mentre con ie il link si illumina solo quando passi sulla parole, ma si "disillumina" quando esci da tutto il div...insomma, fa un po' come gli pare...

spero di esserti stato utile, ciauz ^^

[Ruben Elmo]

Sei stato di grande aiuto, grazie molte.

Solo che non so per quale motivo il testo non viene centrato verticalmente!
Sarà IE... buh

[Zweer]

centrato verticalmente come?? perchè con i div non funziona "vertical-align:center"...funziona solo con gli elementi tabellari (i <td>)

per centrarlo verticalmente se non mi sbaglio devi provare o con margin oppure con le posizioni absolute...

ciauz e figurati ^^

[Ruben Elmo]

Ma ke cavolo!
Non riesco in nessun modo a centrare il testo in verticale!!

[gabip87]

occhio, il menù è una lista, usa i tag giusti.

[Mich_]

Originariamente inviato da Ruben Elmo
Ma ke cavolo!
Non riesco in nessun modo a centrare il testo in verticale!!

Se si tratta di una linea unica da centrare, devi usare line-height (da mettere uguale a height)

Se si tratta di un blocco di linee, vanno inserite in un

da spostare tramite i margini