28172 sujets

CSS et mise en forme, CSS3

Centrer un menu composé d'images sans largeur prédéfini

Bonjour à tous

Voilà j'ai un petit problème je n'arrive absolument pas au bout de plusieurs heures intensives, de centrer mon menu.

Je m'explique :

J'ai un header centrer tout en haut qui fait 133px de hauteur et sur les cotés de celui le fond est noir.
En dessous, collé je veux mettre mon menu mais là impossible de le centrer en fonction du header vu que mon menu n'a pas de largeur. je mets des margin:0 auto mais rien n'y fait.

Pour être plus concret voilà ce que ça me fait :

http://img138.imageshack.us/img138/605/48146305.jpg

Voivi maintenant mon code CSS :

body{
	background:url(img/fond.jpg);
	margin:0 auto;
	padding:0;
	}
	
#header{
	height:133px;
	background:url(img/header.jpg) no-repeat top center #000000;
	margin:0;
}

#conteneur{
	margin:-16px auto;
}

#menu ul li{
	list-style:none;
	float:left;
	padding:0;
}

#menu ul li a{
	height:39px;
	text-decoration:none;
	text-align:center;
	display:block;
	background:no-repeat top left;
	
}

#menu ul li a.gauche{
	width:129px;
	background:url(img/menu-gauche.jpg);
}

#menu ul li a.accueil{
	width:120px;
	background:url(img/menu-accueil.jpg);
}

#menu ul li a.copies{
	width:139px;
	background:url(img/menu-copies.jpg);
}

#menu ul li a.top10{
	width:103px;
	background:url(img/menu-top10.jpg);
}

#menu ul li a.forum{
	width:106px;
	background:url(img/menu-forum.jpg);
}

#menu ul li a.inscription{
	width:152px;
	background:url(img/menu-inscription.jpg);
}

#menu ul li a.connexion{
	width:147px;
	background:url(img/menu-connexion.jpg);
}

#menu ul li a.droite{
	width:128px;
	background:url(img/menu-droite.jpg);
}



Merci d'avance pour votre aide !
salut
pour que margin: auto; aie un effet visible, il faut que tu lui définisse une largeur.
sans ça le menu s'étend sur toute la largeur, donc avec un margin auto, le menu est centré mais ça ne se voit pas. mets un width a la div #menu, qui soit équivalent à la somme des width de ses éléments. (ce qui fait 1024 px si j'ai bien compté):

#menu{
width: 1024px;
margin: auto;
}
Merci de cette réponse. en effet j'y avais pensé et je j'avais fait et ça ne faisait pas rentré tous les boutons dans la div, le dernier bouton était en dessous.
ah, c'est que jai mal calculé alors, ben augmente la width, jusqu'a ce que tous les éléments rentrent sur la même ligne.
Sisi c'est bien 1024. C'est ce que j'ai fait j'ai augmenté le width jusqu'a 1104px et là le menu est bien centré. Mais bon je pense que c'est la manière hard de faire ça non ?
Bonjour,

Normalement donner un text-align:centre; à ul et mettre les li en display:inline (au lieu du flottement) devrait fonctionner.
Bonjour, j'ai essayé la technique de Laurie-Anne mais rien à faire ca ne marche pas. Donc je reste sur ma technique à l'arrache qui n'a pas l'air de poser de problème.

Néanmoins, je rencontre un nouveau soucis au niveau du menu.

Sur IE :

http://img189.imageshack.us/img189/8247/13972842.jpg

Sur Firefox :

http://img689.imageshack.us/img689/3918/mozb.jpg

Et voilà mon code pour le menu :

#conteneur{
	padding:0;
	margin:-29px auto;
	width:1104px;
	height:29px;
}

#menu ul li{
	list-style:none;
	float:left;
}

#menu ul li a{
	height:29px;
	text-decoration:none;
	text-align:center;
	display:block;
	background:no-repeat bottom left;
	
}

#menu ul li a.gauche{
	width:129px;
	background:url(img/menu-gauche.jpg);
}

#menu ul li a.accueil{
	width:120px;
	background:url(img/menu-accueil.jpg);
}

#menu ul li a.copies{
	width:139px;
	background:url(img/menu-copies.jpg);
}

#menu ul li a.top10{
	width:103px;
	background:url(img/menu-top10.jpg);
}

#menu ul li a.forum{
	width:106px;
	background:url(img/menu-forum.jpg);
}

#menu ul li a.inscription{
	width:152px;
	background:url(img/menu-inscription.jpg);
}

#menu ul li a.connexion{
	width:147px;
	background:url(img/menu-connexion.jpg);
}

#menu ul li a.droite{
	width:128px;
	background:url(img/menu-droite.jpg);
}


Voilà je ne sais pas pourquoi il y a un decallage comme cela, si vous avez une idée Smiley decu
Bonjour à tous !
Pour center un menu de taille variable je qu’il faut utiliser un tableau, ou un span avec display :inline-block;


#conteneur{ 
    padding:0; 
    margin:-29px auto; 
    width:1104px; 
    height:29px; 
    text-align:center
} 
#menu span{ 
    display:inline-block;
}
#menu span a {
	height:39px;
	text-decoration:none;
	text-align:center;
	display:inline-block;
	background:no-repeat top left;	
}
#menu span a.gauche{ 
    width:129px; 
    background:url(img/menu-gauche.jpg); 
}


concernant le rendu sur ff et ie il faut ajouter 

#menu ul{
margin:0;
padding:0;
}
Merci pour cette réponse K-2 mais du coup que dois-je remplacer dans mon html ?

	<div id="conteneur">
		<div id="menu">
			<ul>
				<li><a href="#" class="gauche"></a></li>
				<li><a href="#" class="accueil"></a></li>
				<li><a href="#" class="copies"></a></li>
				<li><a href="#" class="top10"></a></li>
				<li><a href="#" class="forum"></a></li>
				<li><a href="#" class="inscription"></a></li>
				<li><a href="#" class="connexion"></a></li>
				<li><a href="#" class="droite"></a></li>
			</ul>
		</div>
	</div>
En bidouillant un j'ai réussi a avoir a la même chose en jouant sur les marges et d'un coup IE n'a plus fait des siennes. Donc ça c'est plutôt cool.

Par contre là je sais vraiment pas ce qu'il se passe :

FF :

http://img163.imageshack.us/img163/8791/fffjv.jpg

L'alignement est parfait et tout et tout.

IE :

http://img228.imageshack.us/img228/9822/ieeh.jpg

Le post-il ne veut pas s'aligner au centre pourtant c'est la même feuille de style et même en jouant sur les margin-left et margin-right le post-it ne bouge pas néanmoins sur FF ça bouge. J'ai l'impression que l'image est "compressée" sous IE ?

Voici le code :

#centre{

	width:731px;
	background:url(img/body-centre.png) repeat-y left;
	margin:0 auto;
	padding:0 58px;
}

div#colonne1 { 
    float: left; 
    width: 160px; 
	margin-right: 10px;
	margin-left: 8px;
}

div#colonne2 { 
    float: right; 
    width: 300px; 
	margin-left: 10px; 
}

div#centre2 { 
	height:263px;
    background:url(img/post-it-top10.png) no-repeat;
	margin: 0 0 0 150px;
}


Merci de m'éclaircir si vous avez des idées !
bonsoir,

a écrit :
Merci pour cette réponse K-2 mais du coup que dois-je remplacer dans mon html ?



<div id="menu"> 
            <span><a href="#" class="gauche">gauche</a> 
                <a href="#" class="accueil">accueil</a> 
                <a href="#" class="copies">copies</a> 
                <a href="#" class="top10">top10</a> 
                <a href="#" class="forum">forum</a> 
                <a href="#" class="inscription">inscription</a> 
                <a href="#" class="connexion">connexion</a> 
                <a href="#" class="droite">droite</a></span>
        </div>

et tu peut mettre une image à la place du texte avec un alt
Sujet clos
Aller à