Liste horizontale, centrée et avec puces

Bonjour tout le monde,

je viens vous voir car j'ai un petit problème qui commence à m'embêter sérieusement. Je vous explique : j'essaie de créer une liste horizontale, centrée tout en gardant les puces.

Voici mon code HTML :

<ul id="navigation">
    <li>Mon Bien</li>
    <li>Localisation</li>
    <li>Photos</li>
    <li>Contacts</li>
</ul>

Et enfin voici mon css :

#navigation {
    color: #948356;
    height: 30px;
    margin: 10px auto auto;
    padding: 0;
    text-align: center;
}

#navigation li {
    display: inline;
    margin: 5px;
}

Le problème, c'est que ma liste est bien centrée, horizontale, mais impossible d'afficher des puces

Pourriez-vous m'aider ?

Merci d'avance
Fina

impossible de le faire nativement!
les listes sont par définition verticales MAIS :

tu peux soit rajouter des &bull; entre tes <li>
ou
rajouter une image de fond de ton choix centrée à gauche sur chaque <li>

#navigation li { 
    display: inline; 
    margin: 5px 15px;
    background:url(ton/image) left center; 
} 

Salut,
En css tu peux aussi utiliser la pseudo class :before pour rajouter les puces avant les elements de liste (mais ne marche pas sur IE6 il me semble).
Par exemple :

#navigation li:before{
	content:"•";
}

Coucou tout le monde,

je ne connaissais pas la propriété before, mais si elle n'est pas compatible IE, je ne peux pas m'en servir...

J'ai donc utiliser des &bull; qui eux sont compatibles avec tous les navigateurs.

Je vous remercie en tout cas pour votre aide

Cordialement
F1na

Bonjour,

Les puces en css sont préférables (dans ce cas). Les lecteurs d'écran interprètent mal les caractères unicodes, de plus ils ont parfois un mauvais rendu sur certains navigateurs, tout en rendant la structure de la page surchargé d'informations inutiles.