Discussion :

[pierre.coudert]

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>

[MasterOfChakhaL]

Salut et bienvenue à toi sur les forums de developpez.com,

Si tu penses que ton problème vient des margin et des padding, je te suggère de commencer ta feuille de style par:

Code :

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

1
2
3
4
5
 
* {
  margin: 0;
  padding: 0;
}

Ca permet de réinitialiser la valeur des marges et padding de tous tes éléments. Ca gommera en plus certaines différences qui peuvent exister entre le rendu des différents navigateurs.
En contrepartie, il te faudra les définir explicitement lorsque tu en auras besoin (pour les listes par exemple)

[pierre.coudert]

bon j ai tenté ce que tu m as proposé et les sous-onglets se sont mis à la suite des onglets principaux....

[Bisûnûrs]

Ton fichier CSS est bourré d'erreurs.

Notamment le fait que les valeurs sont toujours suivies d'une unité (sauf lorsque la valeur vaut 0), ce qui n'est pas ton cas.

Exemple :

Code :

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

1
2
3
4
5
6
#header ul {
	margin : 10 10 0;
	top : 10;
	padding : 0px 120px 0;
	list-style : none;
}

Commence donc par corriger tout ton CSS.

[pierre.coudert]

bon effectivement ca va mieux mais c'est toujours pas ça

[pierre.coudert]

Bon ça y est , ça marche sous Firefox. Mais sou IE6, y a encore un petit probleme de décalage, il ne veut pas revenir à la ligne pour les sous- onglets. Comment cela ce fait-il?