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.
A voir également:
- Help!!! problème de centrage menu
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu démarrer classique - Guide
- Windows 11 menu contextuel classique - Guide
- Activer bluetooth tv samsung menu caché ✓ - Forum TV & Vidéo
42 réponses
J'avais le même pb en html, et j'ai du englober mon menu d'une div et de mettre en CSS:
Je pense que tu as compris.
#div_qui_englobe_le_menu
{
float:left; /*ou center ou bien right*/
............
Je pense que tu as compris.
notobe
Messages postés
2222
Statut
Membre
213
float:center n'existe pas !!
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.
Merci de ton aide.
dans ton css tu as mis:
Et
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é !
/*#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
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 :
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
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'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
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 --
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.
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.
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.
Merci pour ton 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
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
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});
