CSS
ETICHETTE - MENU ORIZZONTALI
Prendiamo spunto dal menu verticale per realizzare il menu orizzontale.
Inseriamo il codice html:
<h1>testata</h1>
<div id="nav">
<ul >
<li><a
href="index.php"
>Home</a></li>
<li><a
href="mappa.html"
>Mappa</a></li>
<li><a
href="aiuti.html"
>Aiuti</a></li>
</ul>
</div>
Ed il codice css:
/* ==== NAVIGAZIONE ORIZZONTALE ===*/
div#nav{
color: #333366;
background-color: #efefef;
height: 20px;
}
div#nav ul {
list-style: none; /* elimino i punti
elenco */
margin: 0px 0px 0px 0px; /* elimino i
rientri delle liste */
padding: 0px 0px 0px 0px; /* elimino i
rientri delle liste */
}
div#nav li {
display: inline; /* mette gli elementi
della lista in linea */
padding: 2px 5px 0px 5px;
margin: 0px 0px 0px 5px;
}
div#nav li a{
color: #333366;
background-color: #efefef;
text-decoration: none;
}
div#nav li a:hover, div#nav li a:focus, div#nav li a:active {
color: #333366;
background-color: #fff;
border-bottom: 5px solid #A5A5A5;
}
L’unica cosa importante e diversa è la linea evidenziata.
[D]
Se vogliamo creare delle linguette della stess lunghezza dobbiamo inserire i seguenti comandi
In
div#nav li a
display: block;
width: 65px; (lunghezza linguetta)