Menu centrati

[DVX70]

Salve a tutti,

Vi chiedo cortesemente di dare un'occhiata a questo link:
www.carlorota.eu/contatti.html
e di osservare il menu in alto;
l'ho costruito con il seguente css:

#menu {
font-family: Verdana, sans-serif;
font-size: 11px;
padding: 0;
list-style: none;
margin-top: -12.3em;
margin-left: 28.7em;
color: #FF0000;
}

#menu a:link, a:visited {
color: white;
text-decoration:none;
}

ul#menu li {
display: block;
width: 8.3em;
height: 3em;
margin: 1em;
text-align: center;
float: left; /* elementi su singola riga */
}

Il mio problema è centrare la scritta "chi sono" rispetto alle barrette rosse
e ho pensato di risolvere nel seguente modo:
-) ho definito un id "chisono" nel tag <li> della corrispondente voce di menu
Nel css ho provato ad aggiungere le seguenti righe:

#chisono li {
margin-left: -3em;
}

Ma non funziona, la scritta "chi sono" rimane sempre al suo posto come mai ?
Per una pura prova ho aggiunto anche la seguente riga (per verificare che il selettore fosse giusto)

color: navy;

e la scritta cambiava colore, ma purtroppo non c'è modo di farla spostare.
Come posso fare ?
Grazie mille per l'aiuto
DVX70

[Prill]

lo spazio fra le barrette è intorno ai 118/120 pixel, le tue voci elenco dovrebbero avere quella larghezza

[KillerWorm]

Ciao, la mia domanda è: "che senso ha utilizzare em per tutte le posizioni e dimensioni degli elementi se il layout è fisso?"
Forse mi sfugge qualcosa ma in questo caso vedo molto più pertinente l'utilizzo di px dal momento che devi "fare i conti" (letteralmente) con la grafica nel background (quella con le barrette rosse) che resta comunque espressa in px.

Comunque, se vuoi mantenere em, dovrai giocare un po' col posizionamento (o margin-left) dell'elemento <ul> e la dimensione (o margini laterali) degli <li>.

Potrebbe essere una cosa del genere (le modifiche/aggiunte sono sottolineate):

#menu {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    padding: 0;
    list-style: none;
    margin-top: -12.3em;
    margin-left: 26.8em;
    color: #FF0000;
}

ul#menu li {
    display: block;
    width: 8.3em;
    height: 3em;
    margin: 1em 1.3em;
    text-align: center;
    float: left; /* elementi su singola riga */
}

[DVX70]

Vi ringrazio di aver dedicato il Vostro tempo a rispondermi, ma io volevo unicamente spostare verso sinistra la singola voce <li>; come potrei fare ?
Grazie ancora

[KillerWorm]

Non condivido la tua idea. Trovo che sia una soluzione disordinata e poco logica. Perché non ripartire uniformemente tutti gli elementi li?

Comunque, se vuoi spostarne uno singolarmente puoi usare position:relative e impostare il left.
Ad esempio:

<li style="position: relative; left: -1em;"><a href="chisono.html">CHI SONO</a></li>

Oppure modificare il margin-left del relativo elemento <a>.
Una cosa del genere:

<li><a style="margin-left: -1.9em;" href="chisono.html">CHI SONO</a></li>

Chiaramente, se preferisci, puoi assegnare un id e impostare il css nel tuo foglio di stile esterno anziché averlo inline.