Help!!! problème de centrage menu
tipi75
Messages postés
723
Statut
Membre
-
jona303 Messages postés 390 Statut Membre -
jona303 Messages postés 390 Statut Membre -
Bonsoir.
Je n'arrive pas centrer mon menu animé (jquery) dans la div ("imageMenu").
Voici le code php (pages dynamiques):
Voici la partie css:
Merci pour votre aide.
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
42 réponses
- 1
- 2
- 3
Suivant
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.
-
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. -
attends j'essaye. Je te tiens au courant dans quelques minutes
-
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. -
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é ! -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
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 -
Centrer un menu en position relative : mouais... Il vaudrait mieux choisir un autre type de positionnement
D'autre part, ceci n'est pas conforme :<ul>'; $contenu .= '<div id="le_menu">'; $contenu .= '<li class="imageMenu_opt1"><a href="">Bague</a></li>';
Ce div n'a rien à faire là car on ne peut pas imbriquer des éléments de type block (or <ul> et <div> 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.
-
-
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 -
ben, au debut de ton menu tu met une div: <div id="son_nom" ...> et tu met: </div> a la fin de ton menu.
Et en css tu met:
#son_nom
{
float:center;
.....
}
Pourquoi tu ne veut pas nous filer ton site -- -
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. -
'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. -
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. -
Quelque soit mon menu, je voudrais que celui ci reste centré.
Merci pour votre aide -
-
essaye dans le html, tu encadre ton menu par par exemple
<p align="center" >
et tu le referme avec</p>
a la fin du menu -
non ça ne marche pas??!!!!!
Je ne sais pas comment faire?????
Merci pour ton aide -
bah en css pousse le avec margin-left: 100px; et margin-right:100px; enfin tu met t'as valeur.
-
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 jqueryvar 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});
-
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}); -
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
- 1
- 2
- 3
Suivant
