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.
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-height:10px;
}
// 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.
Menu con line-height
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.
Menu verticale
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ì:
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;
height:214px;
}
ul#nav li{
width:190px;
margin-top:1px;
}
ul#nav li.first{
margin:0;
}
ul#nav li a{
display:block;
width:100%;
}
Ecco cosa otteniamo:
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:
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-height:42px;
text-indent:25px;
}
Ed ecco il risultato:
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;
