Bonjour à tous !

J'aimerais bien centré le menu horizontal http://css.alsacreations.com/modelesmenus/hd1.htm dans le Gabarit de mise en page CSS http://css.alsacreations.com/modeles/modele15.htm . J'arrive à importer le menu CSS mais j'aimerais bien qu'il soit toujours centré, parce qu'en fonction des différentes résolutions d'écran je le retrouve décalé ou pas. Je vous montre l'exemple de ce que je voudrais : http://img78.imageshack.us/img78/7539/alsa3ki.jpg

Comme je le dit sur la photo, j'aurais souhaité avoir le menu centré en hauteur/longueur à l'intérieur de la bande noire.

Peut être pourrez vous m'aider !?

Bonne fin de week end !

++

Dj
Modifié par Dj VoDkA (11 Jun 2006 - 19:55)
dans la div qui encadre tes "onglet":

vertical-align:middle;
margin-right:0px auto;
margin-left:0px auto;

normalement ça devrais le faire.
Salut,

pour le centrage horizontal :

#haut {
height: 30px; 
text-align: center;
background-color:#CCCCFF;
}


pour le vertical : >> jouer avec les valeurs des marges...
#menuhaut {
list-style-type: none;
margin: 5px 0 0 0;     /*Pour decoller la liste du haut*/
padding:0;
}


@zimounet : a mon avis ton code n'est pas correct, si tu cibles une marge precise alors tu dois donner qu'une seule valeur :

margin-right: 10px;

et non :

margin-right: 0 auto;

Sinon comme ça tu fais tout les cotés en meme temps :

margin: 0 auto;    /*ou par ex. margin: 5px 10px 2px 5px;*/

Reprennez moi si ...
Modifié par Hum (11 Jun 2006 - 20:50)
Ca serait quand même bien si Firefox supportait inline-block.
Même IE 5 fait mieux là dessus...
Salut,

Mmmmh,
a écrit :

margin: 0 auto;
oui
a écrit :

margin-right: auto;
margin-left: auto;

à la rigueur...
mais pas
a écrit :
margin-right:0px auto;
margin-left:0px auto;
Modérateur
bonjour,

si tu connais le nombre de lien , tu peut determiner la largeur de ton menu finale horizontale et user d'un
margin:0 auto;
sur ul ou son conteneur en fixant sa largeur a l'avance (ainsi que les liens) un exemple: (preferez des dimensions exprimées en "em" et pas "px" si vous souhaitez voir le menu s'adapter a la taille des polices de caracteres affichées): http://gcyrillus.free.fr/trucs_css/menu-liste-horizontal-centrer.html

sans connaitre le nombre de lien ou sans definir de taille il y a effectivement le
"display:inline-block; 
chez IE, mais chez les autres en faisant usage d'un
display:table-cell;
il est possible d'obtenir le même effets (assortit eventuellement d'un centrage verticale ):
http://gcyrillus.free.fr/trucs_css/menu-liste-horizontal-lien-centre.html
Le second exemple donne aussi une dimension aux balise <a> mais ceci n'est pas obligatoire et ne joue pas sur le que le menu se centre...

un description sommaire est donné.
++
Modifié par gcyrillus (11 Jun 2006 - 22:52)
Bon, moi j'arrive à un truc tout simple à faire avec Firefox 1.5 à partir du modèle d'Alsacréations. Il faut juste changer le passage suivant avec ce code :
#menuhaut {
list-style-type: none;
margin: 0;
padding: 7px 0;
background: black;
[b]text-align: center;[/b]
}
#menuhaut li {
[b]display: inline;[/b]
margin: 0 2px;
padding: 1px 8px;
border: solid 1px gray;
background: #ddd;
}


Et voilà.
Par contre aucune garantie pour les autres navigateurs.
gcyrillus a écrit :
il y a effectivement le
"display:inline-block; 
chez IE, mais chez les autres en faisant usage d'un
display:table-cell;

En fait display inline-block ne serait pas que pour IE, mais pour tous sauf Firefox. Tu dis dans ta page que seul IE comprend inline-block. C'est tout à fait faux : les autres (safari, opera etc..) aussi, et d'une manière bien moins limité qu' IE pour qui ça ne fonctionne que sur les éléments qui sont inline par défaut (span, em, a etc...).

Donc inutile d'utiliser un commentaire conditionnel.
Seul Firefox aurait besoin de table-cell ( -moz-inline-box donnant des résultats décevants) faute de mieux.
Modifié par Alan (12 Jun 2006 - 00:16)
Modérateur
re,

@alan
arf, a ne tester que dans FF et IE , on s'imagine qu'un raccourcie de methode
peut suffire, et pourtant j'avais deja remarqué que Opera ,
n'aimait pas trop les propprieté display:table-machin chose lachez toute seule Smiley smile .

J'ait donc repris la page en mettant en amont (sur le parent) ,
un display:table; , pour qu' Opera accepte le display:table-cell;.

Cela fonctionne t-il aussi sur safari ?
je remet le lien de la page ou le css a etait modifié.
http://gcyrillus.free.fr/trucs_css/menu-liste-horizontal-lien-centre.html
(je ne prends pas IE7 en compte dans ma demarche , j'attends encore un peu voir ... )
pour le display:inline-block; oui, je considerais cette regle comme proprietaire IE, tout comme le overflow-x ou y ; je m'en tiens encore au css 2.1 que je suis encore loin de maitriser Smiley smile , ce n'est pas mon metier par ailleurs.
cette page a deja quelque mois d'existances et elle reste betement ce qu'elle est .
Merci de ton intervention, au moins y'a une mise a jour de faite a defaut de l'avoir effacer.

++


heu, et finalement qu'elle serait la ou les methodes a privelegier pour le moment ?
Modifié par gcyrillus (12 Jun 2006 - 00:28)
Oui ça passe sous Safari, mais pourquoi dis-tu donc sur ta page :
a écrit :
"display:inline-block;" .. que seul IE comprends pour le moment (Opera l'implemente et je considerez ceci comme une erreur , peut-etre a tort, toujours est-il que css3 a l'heure actuelle n'est pas a l'ordre du jour

Comme dit ci-dessus, ce n'est pas IE l'exception, mais Firefox. Par ailleurs, inline-block c'est CSS 2.1 et non CSS3, et ce n'est pas du tout une erreur de la part d'Opera ou Safari de l'implémenter, c'est au contraire bien regrettable que Firefox n'y arrive pas (et il semble que ça n'est pas pour demain Smiley sweatdrop ).

Voici un essai avec inline-block pour tous et table-cell pour Firefox
Modérateur
:) decidement, j'ai la tête dur et bien du mal a me defaire de "fausses idées" .
et hop en voila une de moins .
++