altezza sfondo su link in formato testo

[faxhouse]

ciao a tutti

ho una div orizzontale che comprende il menù.
questa ha un'altezza fissa di 70 pixel.

nella parte di codice che riguarda i link in formato testo, ho impostato in a.hover il background del testo in rosso.

esiste un modo per dare a questo parametro la stessa altezza della div, in modo da creare un effetto più "carino" nel menù?

 

[WpStyle]

Prova con line-height: 70px;

 

[criric]

forse non ho capito, vuoi centrare i link nei 70px?
se cosi puoi impostare line-height che regola l'interlinea a 70px

 

[faxhouse]

questa è la div

#menù3 {
width:100px;
height:70px;
background: rgba(0,100,50,0.6);

font-family:arial;
font-size:14px;
font-weight:normal;
line-height:70px;
color: #fff;
letter-spacing:2px;
text-align:right;
}

questo il codice che ho messo su a.hover

a:hover {text-decoration: none; color: #DDD; background: #F00; line-height:70px;}

per mostrarvi un esempio di quello che voglio ottenere, potete guardare questo sito
http://www.deifrichi.it/

 

[criric]

ho fatto due esempi
sono orrendi e da sistemare ma dovrebbero fare quello che vuoi
dai un occhiata

<style>

    #menù3 {
        width:1200px;
        height:70px;
        background: rgba(0,100,50,0.6);
        font-family:arial;
        font-size:14px;
        font-weight:normal;
        line-height:70px;
        color: #fff;
        letter-spacing:2px;
        text-align:right;
    }
    #menù3 ul {
        margin:0;
        padding:0;
        list-style-type: none;
    }
    #menù3 li {
        float:left;
        height:70px;
    }
    #menù3 li:hover {
        background: #F00; 
    }
    #menù3 a {
        margin: 0 10px;
    }
    #menù3 li:hover a {
        text-decoration: none; 
        color: #DDD;
    }
    /* menu 2 */
    #menù2 {
        width:250px;
        height:70px;
        background: rgba(0,100,50,0.6);
        font-family:arial;
        font-size:14px;
        font-weight:normal;
        line-height:70px;
        color: #fff;
        letter-spacing:2px;
        text-align:right;
    }
    #menù2 a {
        margin: 0 12px;
        display: inline-block;       
        line-height: 70px;
    }
    #menù2 a:hover {text-decoration: none; color: #DDD; background: #F00; line-height:70px;}

</style>

<div id="menù3">
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">contatti</a></li>
    </ul>
</div>
<div id="menù2">
    <a href="#">home</a> 
    <a href="#">contatti</a> 
</div>

 

[faxhouse]

perfetto!!! grazie mille, adesso mi leggo bene il codice per capire bene il tutto.

 

[faxhouse]

non mi è chiara una cosa... come mai nel primo esempio non riesco in nessun modo a far finire il testo (quindi i bottoni) a destra?

 

[criric]

devi cambiare il float da left a right

#menù3 li {
        float:left;
        height:70px;
    }

 

[faxhouse]

grazie mille, provo a risistemare il codice