Onglets CSS indisciplinés

Version imprimable

Bonjour,

Sur mon site, j'ai créé de sympathiques onglets tout en CSS, mais je remarque un petit problème qui apparait parfois, sans pouvoir l'expliquer.

Parfois tout fonctionne, comme ici.
Parfois, le dernier onglet est décalé, comme ici

Le problème se produit également quand il y a plusieurs lignes d'onglets.

Tout fonctionne bien ici, et j'ai le problème ici

Le fichier CSS est le même pour tout le site, dans lequel on trouve

Code:

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
45
46
47
48
49
50
51
52
53
 
/* */
/* onglets test */
/* */
 
#onglets { 
		float:left;
		width:100%;
		background:#FFF;
		font-size:93%;
		line-height:normal;
        /* list-style: none; */ 
		margin: 5px 0px;      
		padding: 0px 0px;
		border-bottom:2px solid #2B5087;
		/* border-top:2px solid #2B5087; */
      } 
 
	#onglets li { 
		display: inline; /* affichage horizontal */ 
		margin: 5px 0px;      
		padding: 5px 5px;
	} 
 
	#onglets li a { 
		float: left;
		padding: 5px 5px; 
		margin: 0px 0px; 
		background:-moz-linear-gradient(top, #ffffff, #94BED4);
		/* background:-moz-linear-gradient(center top , #ffffff 0%, #ffffff 5%, #94BED4) repeat scroll 0 0 #F6F6F6; */
		background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #94BED4));
		color: #2B5087; 
		border: 1px solid #2B5087; 
		text-decoration: none;
		-moz-border-radius: 10px 10px 0px 0px; 
		-webkit-border-radius: 10px 10px 0px 0px; 
		border-radius: 10px 10px 0px 0px;         
		-webkit-border-top-left-radius: 10px; /* pour Chrome */ 
		-webkit-border-top-right-radius: 10px; /* pour Chrome */ 
	} 
 
	#onglets li a:hover, #onglets li a:focus { 
		background:-moz-linear-gradient(top, #94BED4, #2B5087);
		background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #94BED4),color-stop(1, #2B5087));
		color: #000000; 
	} 
 
	#onglets #current a {
		background:-moz-linear-gradient(top, #ffffff, #2B5087);
		background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #2B5087));
		color: #000000; 
		font-weight: bold;
	}

Peut-être que j'ai passé trop de temps la tête dans le guidon, mais je ne vois vraiment pas d'où peut venir ce problème :?

Merci d'avance pour votre aide !

--
Guillaume, webmaster en surchauffe...

Bonjour, vous avez mis float:left pour <a> alors que c'est pour <li>
Si je change:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 #onglets li { display:inline; margin-bottom:5px; margin-left:0; margin-right:0; margin-top:5px; padding-bottom:5px; padding-left:5px; padding-right:5px; padding-top:5px; }
par
Code:

1 2 3 4 5 6 #onglets li { float:left; margin: 5px 0 0; padding-top:5px; }
en rajoutant list-style-type:none; pour #onglets c'est parfait

Re-bonjour.

Merci beaucoup, ils sont effectivement beaucoup plus sages maintenant ! :ccool:

J'ai même pu mettre un petit effet de superposition qui me plait bien, et en ai même profité pour égayer un peu les onglets pour nos amis utilisant IE (...)

Encore merci pour cette aide si rapide et efficace, je vais mettre ce sujet résolu.

Très bonne soirée !

--
Guillaume, webmaster heureux

Code:

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
45
46
47
48
49
50
#onglets { 
		float:left;
		width:100%;
		background:#FFF;
		font-size:100%;
		line-height:normal;
        list-style-type: none; 
		margin: 0px 0px;      
		padding: 3px 0px;
		border-bottom:2px solid #2B5087;
		/* border-top:2px solid #2B5087; */
      } 
 
	#onglets li { 
		/* display: inline; /* affichage horizontal */ 
		float: left;
		margin: 0px 0px;      
		padding: 4px 0px;
	} 
 
	#onglets li a { 
		/* float: left; */
		padding: 6px 10px; 
		margin: 0px 0px; 
		background-color: #94BED4; /* IE */
		/* background:-moz-linear-gradient(center top , #ffffff 0%, #ffffff 5%, #94BED4) repeat scroll 0 0 #F6F6F6; */ /* FF complexe ? */
		background:-moz-linear-gradient(top, #ffffff, #94BED4); /* FF */
		background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #94BED4)); /* Saf-Chrome */
		color: #2B5087; 
		border: 1px solid #2B5087; 
		text-decoration: none;
		-moz-border-radius: 10px 10px 0px 0px; 
		-webkit-border-radius: 10px 10px 0px 0px; 
		border-radius: 10px 10px 0px 0px;         
	} 
 
	#onglets li a:hover, #onglets li a:focus { 
		background-color: #FFFFFF; /* IE */
		background:-moz-linear-gradient(top, #94BED4, #2B5087);
		background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #94BED4),color-stop(1, #2B5087));
		color: #000000; 
	} 
 
	#onglets #current a {
		background-color: #2B5087; /* IE */
		background:-moz-linear-gradient(top, #ffffff, #2B5087);
		background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #2B5087));
		color: #000000; 
		font-weight: bold;
	}

08/09/2010, 19h34
coeos.pro

Effectivement, sur cette page ca rend très bien (et c'est un peu grâce à moi :mrgreen:)
Pour trouver et corriger facilement les erreurs j'utilise l'addon Firebug sur Firefox, il est aussi disponible sur chrome mais il marche un peu moins biens