Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Usare il line-height sui menu

Una semplice tecnica per menu precisi al pixel
Una semplice tecnica per menu precisi al pixel
Link copiato negli appunti

Questa è la traduzione dell'articolo Using line-height with menus di Alen Grakalic pubblicato originariamente su CSS Globe il 29 Gennaio 2008. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

Line-height è una proprietà CSS che può aiutarci a risolvere elegantemente alcuni problemi che possono presentarsi sui menu. Spesso dobbiamo combattere con il padding, i bordi, il box model, la compatibilità cross-browser, ma l'utilizzo di line-height in combinazione con alcune altre proprietà può ridurre la necessità di aggiungere markup e definizioni CSS addizionali.

Ci sono ovviamente casi in cui la tecnica di cui parlerò non può essere applicata, ma conoscendola la si potrà utilizzare con profitto nelle situazioni in cui si presta alla perfezione.

Uno sguardo d'insieme

Ripetiamo innanzitutto cos'è la proprietà line-height. Essa imposta la distanza tra le righe del testo e allinea il testo verticalmente al centro in questo spazio.

Figura 1 - Visualizzazione del concetto di line-height
screenshot

Può avere come valori "normal", "inherit", oppure valori misurati con unità di misura, valori numerici o in percentuale:

p{
line-height:normal;
}
// valore numerico
// imposta un line height corrispondente ad un numero moltiplicato per la dimensione attuale del font
p{
line-height:1;
}
// unità di misura
// imposta un line height con dimensione fissa
p{
line-;
}
// percentuale
// imposta un line height in percentuale rispetto alla dimensione del font
p{
line-height:100%;
}

Uso

Per un designer il valore più interessante per line-height è quello che consente di impostare una dimensione fissa.

Io non uso mai questo tipo di valore quando si tratta di impostare il line-height per un intero documento o per i paragrafi di testo. Lo uso invece quando ho a che fare, per esempio, con link a riga singola o con voci di menu. Perché? Mi dà la possibilità di essere preciso al pixel e mi piace molto questo tipo di controllo in tali circostanze. Quanti amano mantenere le cose fluide e flessibili potranno essere in disaccordo con me su questo punto, ma se volete, ad esempio, far sì che un menu verticale sulla sinistra abbia esattamente la stessa altezza dell'immagine di sfondo del vostro header sulla destra, allora avete bisogno della precisione al pixel.

Una scelta ottima per i menu, quella implementata dalla maggior parte di noi, consiste nell'uso di una lista non ordinata. Ci dà tre elementi in ordine gerarchico con cui lavorare e in più strutturalmente e visivamente separa i link, cosa positiva dal punto di vista dell'accessibilità. E poi c'è ovviamente l'aspetto legato alla semantica.

Ecco il codice HTML per il nostro menu:

<ul>
<li class="first"><a href="#">Homepage</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact us</a></li>
</ul>

Non abbiamo bisogno di altro.

In questo esempio userò un menu accanto ad un'immagine di sfondo. L'immagine ha un'altezza fissa pari a 214px e l'obiettivo è quello di ottenere un menu che abbia la stessa altezza. Il tutto corrisponde a cinque item del menu con un'altezza di 42px ciascuno più 1px di margine superiore, tranne per il primo. In totale (42px x 5) + (1px x 4) = 214px.

Senza stili il nostro markup appare così:

Figura 2 - Menu senza stili
screenshot

Quando aggiungiamo un po' di regole CSS, giusto per definire le basi, inserisco pure un'immagine di sfondo alta 214px:

ul#nav, ul#nav li{
margin:0;
padding:0;
list-style:none;
}
ul#nav{
background:url(bg.jpg) no-repeat 100% 0;
;
}
ul#nav li{
;
margin-top:1px;
}
ul#nav li.first{
margin:0;
}
ul#nav li a{
display:block;
width:100%;
}

Ecco cosa otteniamo:

Figura 3 - Menu, primo passo
screenshot

Aggiungiamo ora un po' di colori e lo sfondo alle voci del menu

ul#nav li a{
display:block;
width:100%;
color:#0e85b0;
background:#bae2f0;
}

ed otteniamo questo:

Figura 4 - Menu, secondo passo
screenshot

Ora arriviamo al momento più importante. Quello che vogliamo ottenere è una voce di menu ovvero un'area cliccabile di una certa altezza e larghezza con il testo correttamente allineato al suo interno. Impostando line-height al valore desiderato otteniamo quello che vogliamo. Useremo anche la proprietà text-indent per spostare il testo sulla sinistra:

ul#nav li a{
display:block;
width:100%;
color:#0e85b0;
background:#bae2f0 url(arrow1.gif) no-repeat 10px 50%;
line-;
text-indent:25px;
}

Ed ecco il risultato:

Figura 5 - Risultato finale
screenshot

Su questa pagina potete vedere la demo.

Svantaggi

Come ho detto all'inizio dell'articolo, ci sono molti casi in cui non potrete usare questo approccio. Perché la tecnica funzioni come deve avete bisogno di avere voci di menu composte da una sola riga di testo. Se il testo si estende su più righe la cosa non funziona più. Le voci del menu appariranno troppo larghe e la proprietà text-indent funziona bene solo sulla prima riga. A volte evito che tutto ciò accada usando questo codice:

white-space:nowrap;
overflow:hidden;


Ti consigliamo anche