help!!! problème de centrage menu

Question

Bonsoir. Je n'arrive pas centrer mon menu animé (jquery) dans la div ("imageMenu"). Voici le code php (pages dynamiques): $contenu .= '

'; $contenu .= '

Bague

'; $contenu .= '

'; $contenu .= '

'; $contenu .= '

'; $contenu .= '

'; $contenu .= '

'; Voici la partie css: #imageMenu { position: relative; width: 1024px; height: 301px; overflow: hidden; border: 2px solid grey; } #imageMenu ul { display: block; margin: 0 auto; width: 512px; height: 301px; list-style: none; border: 2px solid orange; text-align: center; } #imageMenu ul li { display: block; float: left; margin-left: auto; margin-right: auto; } /*#le_menu{ position: relative; width: 1024px; height: 301px; margin-left: auto; margin-right: auto; text-align: center; }*/ #imageMenu ul li a { text-indent: -150px; background:#FFFFFF none repeats; cursor:pointer; display:block; overflow:hidden; width:80px; height: 301px; } /*#le_menu{ width: 1024px; left: 50%; margin-left: 270px; display: block; margin: 0 auto; width: 512px; height: 301px; }*/ #imageMenu ul li.imageMenu_opt1 a{ /*background: #ccc;*/ background: url(../images/type_bijoux/bague.png) no-repeat; } #imageMenu ul li.imageMenu_opt2 a{ /*background: #ccc;*/ background: url(../images/type_bijoux/bracelet.png) no-repeat; } #imageMenu ul li.imageMenu_opt3 a { /*background: #ccc;*/ background: url(../images/type_bijoux/chapelet.png) no-repeat; } #imageMenu ul li.imageMenu_opt4 a{ /*background: #ccc;*/ background: url(../images/type_bijoux/collier.png) no-repeat; } #imageMenu ul li.imageMenu_opt5 a { /*background: #ccc;*/ background: url(../images/type_bijoux/manchette.png) no-repeat; } .clear { clear: both; } Merci pour votre aide.

sena-kaitani · Answer

J'avais le même pb en html, et j'ai du englober mon menu d'une div et de mettre en CSS:
#div_qui_englobe_le_menu
{
float:left; /*ou center ou bien right*/
............

Je pense que tu as compris.

tipi75 · Answer

attends j'essaye. Je te tiens au courant dans quelques minutes

tipi75 · Answer

J'ai quelques difficultées à faire ce que tu me proposes. Enfin, j'ai compris ou je devais mettre le float. Mais j'ai déjà un float cela doit créer un conflit. Puis dans la div qui englobe le menu je dois mettre des hauteur et largeur et autre chose.....

Merci de ton aide.

sena-kaitani · Answer

dans ton css tu as mis: 
/*#le_menu{
position: relative;
width: 1024px;
height: 301px;
margin-left: auto;
margin-right: auto;
text-align: center;
}*/
Et
/*#le_menu{
width: 1024px;
left: 50%;
margin-left: 270px;
display: block;
margin: 0 auto;
width: 512px;
height: 301px;
}*/
Je comprend plus iren a ton code --'  c'est pas très jolie a voir =p 
dans ce que j'ai cité, tu as mis des commentaires :    /* ton commentaire*/  a quoi ca sert ?!  
Et aussi si tu reprend le même 'id' (le_menu) ca va pas allé !

tipi75 · Answer

Oui j'avais mis deux fois le_menu parce que j'avais essayé d'envelopper un div autour des li. 
Mais cela n'avais pas marcher donc j'avais mis en commentaire au cas ou j'en aurais besoin. 

Ne fais pas attention à ces commentaires.

Merci

notobe · Answer

Centrer un menu en position relative : mouais... Il vaudrait mieux choisir un autre type de positionnement D'autre part, ceci n'est pas conforme :

'; $contenu .= '

Bague

'; Ce div n'a rien à faire là car on ne peut pas imbriquer des éléments de type block (or

en sont tous les 2) Et ça #imageMenu ul li a { text-indent: -150px; background:#FFFFFF none repeats; repeats n'existe pas non plus, il doit y avoir un s en trop. Ce site serait-il en ligne ? Cela serait plus facile pour se faire une idée des solutions à proposer.

sena-kaitani · Answer

oui, ce serai mieu.

tipi75 · Answer

désolé mais non.

Kena-kaitani, lorsque tu dis de mettre un div autour du menu tu pensais à le faire comment??


Merci pour vos aides

sena-kaitani · Answer

ben, au debut de ton menu tu met une div:

et tu met:

a la fin de ton menu. Et en css tu met: #son_nom { float:center; ..... } Pourquoi tu ne veut pas nous filer ton site --

tipi75 · Answer

Bonsoir, 

Sena kaitani, ce n'est pas que je ne veux pas te le filer mais je bosse en local. J'utilise le Easyphp et donc le serveur apache.

Voilà... je préfèrerai te donner un lien mais je suis dans l'incapacité. 

Quelqu'un aurait une idée

Merci pour votre aide.

sena-kaitani · Answer

'float' existe, mais c'est 'center' qui en marche pas, c'ets vrai sinon float:left; ou float: right; exist.
Il te suffie de mettre margin-left et margin-right pour pousser t'as div de la gauche et de la droite.

tipi75 · Answer

Oui mais mon menu pourra être différent et donc le nombre de lien ne sera pas le même. Il faut que je rende cela générique.

Merci pour ton aide.

tipi75 · Answer

Quelque soit mon menu, je voudrais que celui ci reste centré. 

Merci pour votre aide

tipi75 · Answer

je ne sais pas comment faire????!!!!!!

Merci

sena-kaitani · Answer

essaye dans le html, tu encadre ton menu par par exemple

et tu le referme avec

a la fin du menu

tipi75 · Answer

non ça ne marche pas??!!!!!

Je ne sais pas comment faire?????


Merci pour ton aide

sena-kaitani · Answer

bah en css pousse le avec margin-left: 100px; et margin-right:100px;  enfin tu met t'as valeur.

jona303 · Answer

mais ce n'est pas dynamique,..

peut-etre que si tu met un min-width:600px; (par exemple) puis margin:0auto; sur le ul, mais j'ai un doute.
Sinon si tu veux le faire à chaque fois centré,.. la solution certaine c'est js,..

tu fais une div de la largeur max du ul autour du ul,..

puis en jquery

var largeur_ul = $('#l_id_du_ul').width();
var largeur_max =  $('#l_id_du_div_autour');
var margin_du_ul : (largeur_max-largeur_ul)/2;
$('#l_id_du_ul').css({marginLeft:margin_du_ul});

tipi75 · Answer

Dans la deuxième ligne il ne faut pas mettre:

var largeur_max = $('#l'id_du_div_autour').width();

et pour la quatrième ligne ce n'est pas plutôt:

$('#l'id_du_ul').css({margin_left:margin_du_ul});

tipi75 · Answer

Jona303, peux tu me détailler ton idée?

Tu me serais d'un grand secours parce que je galère depuis plusieurs jours.


Merci pour ton aide

jona303 · Answer

En considérant que ta div 'le_menu' fait 1024,et que tu met ton ul dans ta div 'le_menu' et pas l'inverse.. ;)



document.ready(function({
var largeur_ul=$('#le_menu ul').width();

$('#le_menu ul').css({marginLeft:(1024-largeur_ul)/2+"px"});



});

et tu peux virer le width de ton ul, comme ça pas de problème si tu rajoutes un li.. ;)

tipi75 · Answer

pfff, ça ne marche pas.

Tiens regarde mon code:

Css

#imageMenu  {
	position:relative;	
	width: 1024px;
	height:301px;	
	padding: 0px;
	overflow: hidden;
	border: 2px solid orange;
}

#imageMenu  ul {
	position: relative;
	width: 1024px;
	height: 301px;
	list-style: none;
	margin: 0px;
	padding: 0px;
	display: block;
	/*padding-left: 250px;*/
}
	
#imageMenu ul li {
	float: left;
	/*width: 95px;
	display: block;
	overflow: hidden;*/
}

#imageMenu ul li a {
	text-indent: -150px;
	background:#fff none repeat;
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow: hidden;
	width:80px;
	height: 301px;
}



#imageMenu ul li.imageMenu_opt1 a{
/*background: #ccc;*/
background: url(../images/type_bijoux/bague.png) no-repeat;
}

#imageMenu ul li.imageMenu_opt2 a{
/*background: #ccc;*/
background: url(../images/type_bijoux/bracelet.png) no-repeat;
}

#imageMenu ul li.imageMenu_opt3 a {
/*background: #ccc;*/
background: url(../images/type_bijoux/chapelet.png) no-repeat;
}

#imageMenu ul li.imageMenu_opt4 a{
/*background: #ccc;*/
background: url(../images/type_bijoux/collier.png) 
no-repeat;
}

Html

$contenu .= '<div id="imageMenu">';
$contenu .= '<ul>';
$contenu .= '<li class="imageMenu_opt1"><a href="">Bague</a></li>';
$contenu .= '<li class="imageMenu_opt2"><a href="">Bracelet</a></li>';
$contenu .= '<li class="imageMenu_opt3"><a href="">Chapelet</a></li>';
$contenu .= '<li class="imageMenu_opt4"><a href="">Collier</a></li>';
$contenu .= '</ul>';
$contenu .= '</div>';

jquery

<script type="text/javascript">
document.ready(function({
var largeur_ul=$('#imageMenu ul').width();

$('#imageMenu ul').css({margin-left:(1024-largeur_ul)/2+"px"});
});
</script>

Merci de ton aide.

'; $contenu .= '

Bague
Bracelet
Chapelet
Collier

'; $contenu .= '

'; jquery Merci de ton aide.

jona303 · Answer

oups j'ai été un peu vite:

 $(document).ready

et pas

document.ready,..

sorry, si ca marche pas fait des alerts un peu partout.. pour voir jusque ou ça va.. ;)

tipi75 · Answer

ça ne marche pas???

Tu es sur que les alerts marche sur le jquery?

Merci

jona303 · Answer

oui oui certain.. ^^

ta console d'erreurs te dit quoi ?? (option->console d'erreur dans firefox)

jona303 · Answer

et au fait tu appelles quand ton fichier jquery??
il faut l'appeller avant ta fonction $(document).ready évidemment..

tipi75 · Answer

Ma console d'erreur me dit cela:

missing: after property id

la ligne pointée est:
var largeur_ul=$('#imageMenu ul').width();

Que veux tu dires quand tu dis avant la fonction $(document).ready....

Moi, j'ai placé le script javascript dans ma page html, dans le <head></head> puis le script se lance lors du chargement de la page.

Voilà....

jona303 · Answer

hum,.. as tu installé jquery ?? https://jquery.com/ tu dois appeller le fichier jquery, avant de faire tes scripts..

tipi75 · Answer

Bonjour Jona303, J'appelle ce fichier: Donc je ne devrais pas avoir de soucis, surtout que j'utilise le jquery pour autre chose (animations et effets). Merci pour ton aide.

tipi75 · Answer

Est ce que tu comprends mon message d'erreur (console d'erreur)?

Merci d'avance

tipi75 · Answer

pfff, je n'y arrive pas!!!!!

jona303 · Answer

humm,..
vraiment je ne vois pas ..
j'ai été vérifier un code similaire que j'ai fait pour un site et ça donne :


var large = $('#menu').width();
	$('#second_nav').width(large);



sans avoir d'erreurs... 

et si tu vires le tout et que tu fais un alert de $('#imageMenu ul').width();

ou de faire $('#imageMenu>ul').width();

jona303 · Answer

Si ton erruer est appellée la : var largeur_ul=$('.sm').width();
 Ce qui se trouve apres ne sera pas exécuté.

fais un peu 



document.ready(function({
//var largeur_ul=$('.sm').width();
alert("DEBUG"+$('.sm').width()); 

//$('.sm').css({marginLeft:(1024-largeur_ul)/2+"px"});
});

jona303 · Answer

Sinon, tu sais pas le mettre online quelque part ?? que je puisse regarder en live ?

tipi75 · Answer

Je ne sais pas le mettre online, j'aimerai bien mais comment faire???

Merci

tipi75 · Answer

C'est bizarre parce que: alert("DEBUG"+$('.sm').width()); ne marche pas????

jona303 · Answer

bon je vois en fait que j'ai pas toujours très bien lu tes messages, et que le code avait changé..
genre plus de $,...
commence par

 $('document').ready(function(){
alert('SAlut');

});


si ça marche :



 $('document').ready(function(){
alert( "DEBUG"+$('.sm').width() );

});

...
Si rien ne marche c'est que ton script n'est pas appellé au bon moment... mais le truc DOIT fonctionner !!!

tipi75 · Answer

Non ça ne marche pas. Je ne comprend pas que cela ne marche pas, je met ton script: $('document').ready(function(){ alert('SAlut'); }); dans le de la page html.

tipi75 · Answer

en revanche j'ai fais: et là ça marche. Donc cela vient de cette ligne: $(document).ready(function() Merci de ton aide

tipi75 · Answer

ah!!!

Je crois que j'ai trouvé mon problème pour l'affichage. En fait, comme j'ai d'autre script en javascript je n'ai pas besoin de mettre $(document).ready(). Don j'ai essayé cette ligne:

alert( "DEBUG"+$('.sm').width() );

Il m'affiche DEBUG: null. Je ne comprend pas qu'il me trouve null alors que j'ai des images d'affichées.

Merci pour ton aide

jona303 · Answer

le probleme 'est quesi tu fais ça avant que ton document soit ready, il est normal que sm n'ai pas de width.. 
mais met des simple quotes à ton document.ready -> $('document').ready

jona303 · Answer

Je ne sais pas ce qu'il se passe chez toi, mais aujourd'hui j'ai du faire un truc pour gerer le padding des li d'un menu, et j'ai fait ça et ça marche très bien.


$('document').ready(function(){
     //width total des li
   var width_li =0;
   var nbrLi = 0;
   $('#menuUl>li').each(function(){
       //pour chaque li on additionne son width
       width_li+=$(this).width();          nbrLi++;
   });
     var paddingLi = (980-width_li)/nbrLi;
     $('#menuUl>li').css({paddingLeft:paddingLi/2+"px",paddingRight:paddingLi/2+"px"});
 
});

Help!!! problème de centrage menu

42 réponses

Votre réponse

Discussions similaires

Newsletters