Discussion :

[shubakas]

Bonjour,

Je fais beaucoup de posts ces derniers temps, mais votre aide m'est très précieuse, j'apprends plein de choses et donc je pose plein de questions !!!

Comment centrer ce menu horizontalement sur la page svp ??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
#tabs10 {
      float:left;
      width:100%;
      font-size:93%;
	  border-bottom:1px solid #2763A5;
      line-height:normal;
      }
    #tabs10 ul {
	  margin:0;
	  padding:10px 10px 0 50px;
	  list-style:none;
      }
    #tabs10 li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs10 a {
      float:left;
      background:url("tableft10.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs10 a span {
      float:left;
      display:block;
      background:url("tabright10.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs10 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs9 a:hover span {
      color:#FFF;
      }
    #tabs10 a:hover {
      background-position:0% -42px;
      }
    #tabs10 a:hover span {
      background-position:100% -42px;
      }

D'autre part comment définir une longueur de conteneur fixe (comprise par Firefox, IE6, IE7...).

Merci beaucoup

[Er3van]

Pour centrer, un "text-align : center ;" dans le conteneur parent devrait faire l'affaire.
Et le pixel est une unité, contrairement à l'em, qui est invariante selon le navigateur. Donc width="200px" s'appliquera de la même façon qqsoit le navigateur.

[MasterOfChakhaL]

@Erevan:
Je crains de ne pas te suivre totalement...


Le text-align center permet de centrer du texte pas des blocks. Ti dois faire allusion au bug d'IE en mode quirks
Pour centrer, il y a plusieurs techniques mais la plus simple passe par les marges automatiques.
http://xhtml.developpez.com/faq/?pag...orizontalement
Cet item de la FAQ evoque aussi le problème du text-align center...

Concernant l'em, si ce n'est pas une unité, alors, qu'est-ce que c'est?
Il s'agit de l'espace qu'occupe un caractère. Donc ca ne va pas dépendre du navigateur, mais plutôt de la propriété font-size.

Donc, pour revenir au sujet, inspire toi de l'item de la FAQ font j'ai fourni le lien. Si tu n'y arrives pas, envoies nous aussi le code HTML pour qu'on puisse repérer d'éventuelles subtilités...

[DoubleU]

Je profite de ta réponse pour squatter un peu le sujet ^^

Tu peux détailler un peu la façon dont le bug arrive sous ie?
Parce que j'ai toujours eu l'habitude de centrer correctement avec margin auto, et à l'instant je rencontre le bug dont tu parles, obligé de passer par un text-align: center pour que ca passe.

Donc j'aimerais bien trouver ce qui le provoque pour essayer de revenir a un margin auto compatible avec FF et IE.

[shubakas]

Non non non, là je ne parle même pas de bug, la conception de ce menu (que j'ai prsi sur le net) ne prévoit pas sons centrage horizontal.

Les rectangles se redimensionnent selon la taille du texte, mais la barre totale n'est pas centrée sur la page, les text-align ne changent absolument rien sur n'importe quel naviguateur.

Donc comment faire ?,

Le code html est tout simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="menu">
				<ul>
 
				<li><a href="#" title="Lien1"><span>Lien1</span></a></li>
 
				<li><a href="#" title="Lien2"><span>Lien2</span></a></li>
 
				<li><a href="#" title="Lien3"><span>Lien3</span></a></li>
 
				<li><a href="#" title="Lien4"><span>Lien4</span></a></li>
 
				<li><a href="#" title="Lien5"><span>Lien5</span></a></li>
 
				<li><a href="#" title="Lien6"><span>Lien6</span></a></li>
 
				<li><a href="#" title="Lien7"><span>Lien7</span></a></li>
 
			</ul>
			</div>

Le menu est téléchargeable ici :
http://css-lybrary.blogspot.com/2007...b-menu-10.html

Merci

[MasterOfChakhaL]

Normalement,

Si le doctype est correct, il n'y a pas de souci pour centrer un élément à l'aide des margin:auto; à partir de IE5.5 (je ne suis pas certain du numéro de version).
L'absence de doctype ou alors une forme erronée fait passer IE en mode quircks. Ainsi, le centrage par les marges ne marche plus et aussi le modèle de boîte utilisé n'est plus le même.

FAQ: Quel doctype déclarer en début de page ?