Mattepuffo.com

Dopo vari tentativi e guide seguite sono riuscito finalmente ad ottenere quello che volevo: una lista orizzontale centrata dentro a un div.

Cominciamo dall'HTML:

<div id="menu-ita">
 <ul>
 <li><a href="/site/html-css.html?lang=it">Home</a></li>
 <li><a href="/site/storia.php?lang=it">Storia</a></li>
 <li><a href="/site/collezioni.php?lang=it">Collezioni</a></li>
 <li><a href="/site/pv.php?lang=it">Punti vendita</a></li>
 <li><a href="/site/contatti.php?lang=it">Contatti</a></li>
 <li><a href="/site/contatti.php?lang=it">Registrati</a></li>
 <li><a href="/site/backstage.php?lang=it">Backstage</a></li>
 </ul>
</div>

L'esempio ve lo prendo direttamente da un sito che mi è stato commissionato e che sta per essere messo online.

Come vedete ho un div con dentro una lista non ordinata; ogni voce della lista è un link.

In sostanza è un classico menu orizzontale.

Vediamo la parte CSS:

#menu-ita {
 margin: 10px auto auto auto;
 text-align: center;
}

#menu-ita ul {
 border-bottom: 2px solid #8e7f67;
 margin: 0 auto;
 padding: 0 0 10px 0;
 list-style: none;
 font-size: 15px;
 width: 700px;
}

#menu-ita ul li {
 display: inline;
}

#menu-ita ul li a {
 padding: 5px 10px 5px 10px;
}

Al div ho dato solo un margine al top (non fondamentale in questo caso) e impostato il testo centrale.

Al tag ul ho impostato un bordo in basso (che un piccolo problema di dimensione sui Mac a prescindere dal borwser....mha).

Un margin laterale auto, un padding a zero tranne che in basso (10px anche se nn è fondamentale per la nostra questione) e una dimensione.

Ho preferito impostare la dimensione su ul piuttosto che sul div perchè ho avuto meno problemi.

Infine un display inline per mettere la lista in orizzontale.

Queste sono le opzioni importanti; il resto potete mettere come volete e sperimentare.