Bonjour amis développeurs.

Voilà j ai un petit bug avec mon appli web. J ai inséré des onglets avec une feuille css mais quand j insere des sous-onglets, j ai un petit espace entre les onglets et les sous-onglets que je n arrive pas à enlever. Je pense que mon probleme viens de ma mauvaise gestion des padding et margin.

merci d avance pour votre aide

feuille.css :
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/*mise en forme*/
body {
	background-color : #D8F6F3; /* couleur de fond */
	margin : 0;
	padding : 0;
	color : #28621E; /* couleur de police */
	font : 45 Helvetica Neue Light;
	voice-family : "\"}\"";
	voice-family : inherit;
	font-size : medium;
}
 
#header {
	float : left; /* place chaque item sur une ligne horizontale à partir de la gauche*/
	width : 100%;
	margin: 0 ;
	padding: 200px 250px 100 0;
	background : #DAE0D2 url("../img/bg.gif") repeat-x bottom;
	/*	background : url("../img/logo.jpg") ; */
	font-size : 93%;
	line-height : normal;
}
 
#header ul {
	margin : 10 10 0;
	top : 10;
	padding : 0px 120px 0;
	list-style : none;
}
 
/*  ajouts de l'image de fond du côté droit aux items de liste */
#header li {
	float : left;
	background : url("../img/coin_gauche.gif") no-repeat left top;
	margin : 0;
	padding : 0 0 0 9px;
}
 
/*ajouts image de fond du côté gauche aux élements ancres => image de côté gauche se trouve par dessus l'image de côté droit*/ 
#header a {
	display : block;
	background : url("../img/coin_droit.gif") no-repeat right top;
	padding : 5px 15px 4px 6px;
	text-decoration : none;
	font-weight : bold;
	color : #E3F8FA;
}
 
#header a:hover {
	color : #333;
}
 
/* marge de gauche pour la séléction active*/
#header #current {
	background-position : 0 -150px;
	border-width : 0;
}
 
/* suite de l'onglet vers la droite pour la séléction active*/
#header #current a {
	background-position : 100% -150px;
	padding-bottom : 5px;
	color : #333;
}
 
/*hover est appliquée quand l'utilisateur désigne un élément (pointeur souris) sans l'activer*/	  
#header li:hover, #header li:hover a {
	background-position:0% -150px;
	color:#333;
}
 
#header li:hover a {
	background-position:100% -150px;
}

puis je les affiche dans cette page :

Code html : 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
<div id="header">
	<ul>
		<?php
                echo "<li id='current'><a href='".$_SERVER['PHP_SELF']."?page=General'>G&eacute;n&eacute;ral</a></li>";
                
                echo "<li><a href='".$_SERVER['PHP_SELF']."?page=Connaissances'>Connaissances M&eacute;tiers</a></li>";
                echo "<li><a href='".$_SERVER['PHP_SELF']."?page=Produits'>Produits</a></li>";
                echo "<li><a href='".$_SERVER['PHP_SELF']."?page=Environnement'>Environnement</a></li>";
                echo "<li><a href='".$_SERVER['PHP_SELF']."?page=Projet'>Projet</a></li>";
                echo "<li><a href='".$_SERVER['PHP_SELF']."?page=Maintenance'>Maintenance</a></li>";
                echo "<li><a href='".$_SERVER['PHP_SELF']."?page=Divers'>Divers</a></li>";
                ?>
	</ul>
	<br />
	<ul>
		<?php
                
                
                echo "<li><a href='".$_SERVER['PHP_SELF']."?page=Informationssociete'>Informations société</a></li>";
                echo "<li><a href='".$_SERVER['PHP_SELF']."?page=Contacts'>Contacts</a></li>";
                
                ?>
	</ul>
</div>