Help!!! problème de centrage menu

tipi75 -

Bonsoir.

Je n'arrive pas centrer mon menu animé (jquery) dans la div ("imageMenu").

Voici le code php (pages dynamiques):

$contenu .= '<div id="imageMenu">';
$contenu .= '<ul>';
$contenu .= '<div id="le_menu">';
$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 .= '<li class="imageMenu_opt5"><a href="">Manchette</a></li>';
$contenu .= '</div>';
$contenu .= '</ul>';
$contenu .= '</div>';

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.

Configuration: Windows XP
Firefox 3.5.7

Afficher la suite

42 réponses

Résumé de la discussion

Centrer un menu animé géré par jQuery dans la div imageMenu pose un problème de mise en page et affiche des difficultés de centrage avec les éléments internes et les dimensions fixes. Plusieurs éléments critiques reviennent: le chargement correct de jQuery avant les scripts, l'utilisation de $(document).ready et la gestion du float des éléments li qui peut bloquer le centrage. Des solutions évoquées incluent soit supprimer les floats et centrer via margin:auto sur les conteneurs, soit ajuster les largeurs et aligner les éléments en ligne, sans hacks de text-indent. En cas de test, des ajustements JavaScript peuvent être nécessaires pour mesurer la largeur effective de l'UL et recalculer des marges, mais la cohérence entre structure HTML et CSS reste essentielle.

jona303

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"});
 
});

Réponse 2 / 42
jona303
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

0

Réagir
1. tipi75 Auteur
  
  ça ne change rien. sm est toujours égal à null.
  
  0
  
  Réagir
Réponse 3 / 42
tipi75 Auteur
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

0

Réagir
Réponse 4 / 42
tipi75 Auteur
en revanche j'ai fais:

<script type="text/javascript">
alert('SAlut');
</script>

et là ça marche.

Donc cela vient de cette ligne: $(document).ready(function()

Merci de ton aide

0

Réagir
Vous n’avez pas trouvé la réponse que vous recherchez ?

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question
Réponse 5 / 42
tipi75 Auteur
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 <head></head> de la page html.

0

Réagir
Réponse 6 / 42
jona303
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 !!!
0

Réagir
Réponse 7 / 42
tipi75 Auteur
C'est bizarre parce que: alert("DEBUG"+$('.sm').width()); ne marche pas????

0

Réagir
Réponse 8 / 42
tipi75 Auteur
Je ne sais pas le mettre online, j'aimerai bien mais comment faire???

Merci

0

Réagir
Réponse 9 / 42
jona303
Sinon, tu sais pas le mettre online quelque part ?? que je puisse regarder en live ?

0

Réagir
Réponse 10 / 42
jona303
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"});
});
```
0

Réagir
Réponse 11 / 42
jona303
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();
0

Réagir
1. tipi75 Auteur
  
  je n'arrive pas à utiliser alert:
  
  code js:
  
  <script type="text/javascript"> document.ready(function({ var largeur_ul=$('.sm').width(); alert($('.sm').width()); $('.sm').css({marginLeft:(1024-largeur_ul)/2+"px"}); }); </script>
  
  Merci de ton aide
  
  0
  
  Réagir
Réponse 12 / 42
tipi75 Auteur
pfff, je n'y arrive pas!!!!!

0

Réagir
Réponse 13 / 42
tipi75 Auteur
Est ce que tu comprends mon message d'erreur (console d'erreur)?

Merci d'avance

0

Réagir
Réponse 14 / 42
tipi75 Auteur
Bonjour Jona303,

J'appelle ce fichier:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

Donc je ne devrais pas avoir de soucis, surtout que j'utilise le jquery pour autre chose (animations et effets).

Merci pour ton aide.

0

Réagir
Réponse 15 / 42
jona303
hum,.. as tu installé jquery ??

https://jquery.com/

tu dois appeller le fichier jquery, avant de faire tes scripts..

<script type="text/javascript" src="/js/jquery-1.3.1.min.js"></script>

0

Réagir
Réponse 16 / 42
tipi75 Auteur
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à....

0

Réagir
Réponse 17 / 42
jona303
et au fait tu appelles quand ton fichier jquery??
il faut l'appeller avant ta fonction $(document).ready évidemment..

0

Réagir
Réponse 18 / 42
jona303
oui oui certain.. ^^

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

0

Réagir
Réponse 19 / 42
tipi75 Auteur
ça ne marche pas???

Tu es sur que les alerts marche sur le jquery?

Merci

0

Réagir
Réponse 20 / 42
jona303
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.. ;)

0

Réagir
- 1
- 2
- 3
Suivant

Help!!! problème de centrage menu

42 réponses

Discussions similaires

Newsletters