Problème d'alignement css - centrer un UL

Bonsoir à tous,

Voici quelques heures que je m'arrache les cheveux. Je fais du XHTML/CSS depuis pas mal de temps mais là je me retrouve face à une colle.

J'ai une homepage de site assez compliquée, avec beaucoup de flottants.

J'ai un footer, avec un menu horizontal en ul/li, pour lequel je souhaite que le texte soit aligné dans la largeur de la div#footer. Or, malgré les text-align, margin:0 auto, display:block, je ne parviens à rien...

Voici mon code :

        <div id="footer">
            <ul>
                <li> <a class="footer" href="#"> Retour à l'accueil&nbsp;&nbsp;|&nbsp;&nbsp; </a> </li>
                <li> <a class="footer" href="#"> Plan du site&nbsp;&nbsp;|&nbsp;&nbsp; </a> </li>
                <li> <a class="footer" href="#"> Mentions légales&nbsp;&nbsp;|&nbsp;&nbsp;</a> </li>
                <li> <a class="footer" href="#"> Contact&nbsp;&nbsp;|&nbsp;&nbsp;</a> </li>
                <li> <a class="footer" href="#"> Télécharger le CV</a> </li>
            </ul>  
        </div>

div#footer {
	clear:both;
	width:1024px;
	height:67px;
	text-align:center;
	background:url(../img-layout/bgfooter.png) no-repeat;
}

ul, li {
	float:left;
	list-style:none;
	margin:0;
	padding:0;
}

a.footer {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#999999;
	text-decoration:none;
	}

Merci d'avance pour votre aide,
Cdlt
fractal.

Bonsoir,

un exemple en ligne est-il faisable, ou un Screenshot ?

sinon, la sur-utilisation des espaces insécable, caylemal !

Okay je vais supprimer ces espaces alors.

Voici un lien pour une capture
http://img535.imageshack.us/img535/5122/captureuz.jpg
Modifié par fractal68 (16 Apr 2011 - 23:44)

Essaies d'ajouter

div#footer ul {
margin: 0 auto;
}

Catastrophe, ca me décale tout
http://img573.imageshack.us/img573/1214/capture2uv.jpg

je viens de tester cela,

div#footer { 	
    clear:both; 
    width:1024px; 
    height:67px; 
    text-align:center; 
    background:url(../img-layout/bgfooter.png) no-repeat; 
} 

ul {
margin: 0 auto;
}

ul, li { 
    display: inline;
	list-style:none; 
    margin:0; 
    padding:0; 
} 
 
a.footer { 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:10px; 
    color:#999999; 
    text-decoration:none; 
} 

le rendu m'a l'air correct. (pour ce que j'ai du code)

Non rien à faire, merci d'avoir essayé.

J'ai un slider en haut avec ul et li et je pense que ca entre en conflit, même en y appliquant des class ca marche pas.

Je crois que je vais chercher une autre solution.

cette solution est fonctionnelle.

une autre hiérarchisation de tes classes et ID pourraient peut-être aider.

de type

#footer { 	
    clear:both; 
    width:1024px; 
    height:67px; 
    text-align:center; 
    background:url(../img-layout/bgfooter.png) no-repeat; 
} 

#footer ul {
margin: 0 auto;
}

#footer ul li { 
    display: inline;
    list-style:none; 
    margin:0; 
    padding:0; 
} 
 
#footer ul li a { 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:10px; 
    color:#999999; 
    text-decoration:none; 
} 

Bon courage.

Je crois que je vais laisser le truc de côté et y revenir à tête reposée.

Car malgré tes solutions, je n'y arrive pas, pourtant c'est tout bête en théorie...

Je suis sure que j'ai du m*rder dans le haut du code, j'ai plusieurs listes pour le menu et le slider, doit forcément y avoir un truc qui tourne pas rond.

Si vraiment je galère de trop, j'essaierai de passer les éléments en ligne pour vous montrer le code source.

Merci pour votre attention.