18100 sujets

Questions générales et questions de débutants

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 !
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.
Sujet clos
Aller à