Pages :
Bonjour, j'ai un petit soucis pour centrer un menu

http://kikiristan.com

J'ai essayé de centrer dans la balise div align="center" ou par le css avec text-align: center;
mais rien n'y fait

quelqu'un aurait une idée ?

sinon au passage vous aimez les couleurs ?
bon ok je sais "les gouts et les couleurs..."

merki
et merki alsacreation pour tout tes bienfaits
Smiley ravi
Bonjour

Lorsque je vais sur ton site, ton menu horizontal m'apparaît centré.. Pourrais-tu préciser.
Je viens de régler ce problème sur mon site hier en trouvant l'astuce à cet endroit:

http://
contrib.linalis.com/content/css-un-menu-horizontal-centre-sans-utiliser-les-flottants
[/url]

Pour les couleurs, ça ne me choque pas trop vu le thème du site. Ca crée une "ambiance".

Cordialement
Bonjour
version française il est centré mais avec de la bidouille
j'ai mis des marges left et right comme ça : margin: 0 17%;
pour centrer le bloc avec les menus au milieu de la div
et des marges de 15 autour de chaque texte

mais du coup pour les autres langues, vu que le texte est plus court,ça crée un décalage
je te met un shoot pour que tu comprenne, on voit mieux que la marge à droite est plus grande

tu vois ce que je veux dire ?
le problèm est que
1- la width codé en dure change valeur de 420 px a 748 px
2-les margins droite et gauche ne change pas et reste a 17 % alors que le width du conteur change de taille et le width du texte ( width content text )
3-un margin:0 empèche de centrer le ul et est defini deux fois
4-il doit y avoir un problème de "spécificité override" au niveau du media queries #submenu !!

A) solution 1 ----- a vérifier-----------
style.css ligne 300
#submenu {margin:0 17%}
En petit (420px) il faudrait 9% en grand (748px)il faudrait 12% au lieu de 17%


responsive-style.css ligne 141
enlever le margin:0;
#submenu { .....}

B) solution 2 ----a verifier ----
le margin 0 doit poser problèmes
utiliser margin-left:auto margin-right:auto mais block/inline...influence dis/enable margin- x


Espère que cela sera utile
pas possible de re éditer son post ?

en 420px on a
1- bordure autour du texte de 5px a droite et gauche
2- une longueur longueur différente pour chaque label /texte du menu
=> 5+66+5+5+50+5+5+38+5+5+30+5+5+39+5+5+59+5
=>5*12+66+50+38+30+39+59
=> 342
il reste a gauche 420-342 = 78 px
17%de 420 fait 71 pixel
il est impossible de faire tenir ( plusieurs façon de voir les choses MVC a et b ):
a) ---------71*2+342= 484 pixels dans 420 pixels
b) ---------2x71 pixels dans la partie libre 78 pixels !!
C) une solution serait de changer le width autour de 484 pixels a tester enlive avec broswer debug .
pas possiblede downloader/previsualier delete puis downloader/"previsualier "
le 2 eme item previsualiser n'est plus activé !!


une image pour la petite taille sera plus utilise que des mots
upload/48731-menu-relat.png
Modifié par 75lionel (10 Nov 2013 - 13:54)
Il me semble qu il y a 3 breakpoint dans le layout ( donc 4 layout) . Ceux ci sont il choisit par le framework ou défini en connaissance de cause par le designer ? je pencherais par le designer avec SSL avec ubuntu !!
Comprend pas cque tudit - sorry je suis pas developpeur en fait
même si je connais assez bien....
ouai c'est une templateWP modifié oui !

mmmmm mmm
ça parait pas gagné ct'affaire !


moi j'aimerai juste centrer la "submenu ul " finalement
ça suffirai, et je pourrait virer les marges droite/gauche....
mais je voit pas ce qui bloque !


sinon y a tout ça aussi pour submenu, je saisi pas tout :

#submenu li a.sf-with-ul {
padding-right: 20px;
}

#submenu li li a, #submenu li li a:link, #submenu li li a:visited {
color: #aaa;
font-size:14px;
text-shadow:none;
width: 188px;
font-family: 'BebasNeueRegular';
margin: auto;
padding: 20px 10px;
line-height:25px;
border-bottom:1px solid #444444;
border-top:1px solid #2D2623;
border-left:1px solid #2D2623;
border-right:1px solid #444444;
text-transform: none;
position: relative;
background:#2e2e2b;
}

#submenu ul ul li:first-child{
border-top:none;

}

#submenu ul ul li:last-child{
border-bottom:none;

}

#submenu li li:last-child{
border-bottom:none;
}

#submenu li li a:hover, #submenu li li a:active {
background:#343431;
color: #fff;
}


#submenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px 0px;
padding: 0px;
background:#282828;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

#submenu li ul a {
width: 150px;
}

#submenu li ul a:hover, #submenu li ul a:active {
}

#submenu li ul ul {
margin: -37px 0 0 169px;
}

#submenu li:hover ul ul, #submenu li:hover ul ul ul, #submenu li.sfHover ul ul, #submenu li.sfHover ul ul ul {
left: -999em;
}
kptainsam a écrit :
Mais est cque du coup 71px ça marcherai avec chaque langue ?

il faut relativiser ( citer toujours le contexte) en precisant pour quel layout !!!

si font size width ne change pas ( evaluer approximativement a )
------7.3 pixel pour "a o "
------4.9 pour "r t"
------2.3 pour un "I i"
english => shows history tour pro store contact = 2.3*1 + 30*7.3=224pixel
francais=> spectacles histoire agenda pro boutique contact =2.3*3+38*7.3=284 ( realite 282)
kiki ?!! => spektaks kronik tour pro butik kontakt = 2.3*2+4.9*7+7.3*23=206.8

a- la taille total du texte change t elle ? oui 100% au niveau selecteur .container
b- le margin de 5px ? change t il ? oui 15 15 5
c- la taille du menu change t elle ? oui 420px 748px 940px

j ai fait le tour de votre css layout munissez vous d une calculette pour répondre a votre question .
tous les éléments sont dans ce dernier poste

en espérant que je n'ai pas fait d 'erreurs .... ( orthographe oui !!! )
Les choses ne sont pas aussi simple que le marketing ( joomla wordpress drupla) . Le plus dure dans les CMS ce n est pas configurer les extensions ou utiliser ( activer) les templates .Le plus dure est d 'abord de comprendre quelles ont été les choix techniques du développeur de l extension ou du template ( javascript image css )pour pouvoir le modifier. Quel est le nom du template que vous avez utilisé ? . , le développeur du template a du documenter son thème. Trouver un site avec le même template et un menu centré et jetter un coup d oeil dansle code html/ css !!


sinon faire une sauvegarde avant de modifier vos fichiers css ( git ou prefix )
bon courage ...
il faut empecher que le margin :0 est le dessus sur margin 0 19%
margin 0 19% =... haut....droit........... bas .......gauche
margin 0 19% = ... 0........19 parent.....0 ..........19 parent

Le problème est que width du container au dessus ( parent) change avec le layout ( changement de taille de la largeur du navigateur )
parent = 420 px , 748, 940 px
c'est le theme "Leon"

mais oui je pensai que ça pouvait être un truc tout bête,
mais nan ça aurai été trop facile Smiley smile

en tout cas merci bcp de m'avoir accordé tout ce temps !
exprimé des longueurs en pixel ou % a son importance !!!

poser la question de 71 pixel n a pas de sens sans précisé
1- le context ( layout /selecteur actif )
2- la langue ( puisque l'espace pris par le texte + marge doivent tenir dans une boite
3- cette boite change de taille selon le layout

désolé si je suis un peu technique et imprécis
une autre personne pourrait peut être mieux vous informer .
J'ai trouvé un truc :

quand je rajoute un
"display:inline-block;"
dans submenu ul
il valide bien mon text-align:center de l'ul automatiquement

MAIS, il me vire ma hauteur de 30px spécifié dans submenu

j'y suis presque nan ?
-----------------------------------------------LA SOLUTION SEMBLE SIMPLE ( a vérifier) ----------------------------
le problème n apparait que sur un seul layout !! ( lorsque l on modifie le width du navigateur)
Mettre tout a margin :0 12% au lieu de margin :0 x% au niveau du selecteur #submenu .
x vaut 19% ou autre car il y a plusieurs occurences de #submenu ( plusieurs layouts)

OUF FOU non ? !!!
Modifié par 75lionel (10 Nov 2013 - 15:15)
Nikel !
ça marche

j'ai viré ces marges à 17%
J'ai mis plutôt un display : inline-flex;
et une hauteur de 40px

par contre ça marche pas dans safari
faut que j'affine Smiley smile

++
thx
Pages :