Discussion :

[maysa]

bonjour,

bien j'ai encore un petit soucis,

j'ai deux conteneurs dans un conteneur global,
un conteneur à gauche et un à droite..

dans mon conteneur à gauche j'ai (sous IE sinon FF ça marche) un décalage sous menuOnglet de 2pixels qui du coup se répercute dans mon bloc de droite, ce qui fait très moche !
Question : comment supprimé cet espace sous menuOnglet (et sur recherche donc) pour avoir une bonne dimension...
Je ne peux malheureusement vous fournir d'image

voici le code

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
<div class="ContainHaut">
	<div class="ContaintGauche">
		<!--Barre en haut -->
		 <div id="ombreHaut"><img src="images/haut_degrade-noir.jpg" width="575"></div>
		 <!--Logo Livrenpoche -->
		 <div id="placeLogo"><img src="images/haut_logo.jpg" /></div>
		  <!--Bannière -->
		 <div id="banniere"><img src="images/miniPanier/banniere_260x60_port_gratui.gif" width="260" height="60" /></div>

	<!--menu Onglet-->
		<div id="menuOnglet">
		  	<img src="images/haut_accueil-b0.jpg" name="accueil" border="0"><img src="images/haut_genres-b0.jpg" name="genres" border="0"><img src="images/haut_collection-b0.jpg" name="collection" border="0"><img src="images/haut_promotion-b0.jpg" name="promotions" border="0"><img src="images/haut_livresrares-b0.jpg"  border="0"><img src="images/haut_etudiants-b0.jpg" name="etudiants" border="0"><img src="images/haut_nouveautes-b0.jpg" name="nouveautes" border="0">
			</div>
***ici se trouve mon décalage de 2px !!!****
		<!--Partie Recherche -->
		<div id="recherche"> 
			<form action="recherche.php">
			<input type="text" name="clef" size="20" value="" style='vertical-align:top' > 
			 <select name="methode" style="vertical-align:top">
				<option SELECTED value="titre">Par titre</option>
				<option  value="nom">Par nom</option>
			 </select>
			  <input type="image" border="0" name="recherche" src="images/haut_ok.jpg">
			<a href="recherche_avancee.php"></a><a href="recherche_avancee.php"></a>
			</form>
		</div>

 </div>
  
 <!-- Partie droite->
	  <div class="droite">
			<div id="img1"></div>
		  	<div id="img2"></div>
		  	<div id="img3"></div>
		  	<div class="styleImg"></div>
			<div class="styleImg"></div>
			<div class="styleImg"></div>
			<div class="styleImg"></div>
	  
	  </div>

***et ici aussi !!! ***
 <div id="bas"><img src="images/haut_ombrage-menu.jpg" width="758" height="5"></div> 
</div>

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 /* Menu Haut */
.ContainHaut {
	background-color:#000000;
	width:758px;
	margin: 0 auto;
}
 
 
/*Contenu à gauche */
.ContaintGauche {
	float:left;
	width:576px;
	height:138px;
}
 
#ombreHaut {
	background-image:images/haut_degrade-noir.jpg;
	background-repeat:no-repeat;
	height:16px;
	clear:both;
}
 
#placeLogo {
	margin-top:3px;
	margin-bottom:2px;
	float:left;
	text-align:center;
	width:280px;
	height:60px;
 
}
 
#banniere {
	float:left;
	margin-top:3px;
	margin-bottom:2px;
	width:280px;
	height:60px;
 
}
 
#menuOnglet {
	display:block;
	width:576px;
	background-color:#009900;
	clear:both;
}
 
#bas {
	width:576px;
}
 
#recherche{
	height:32px;
	text-align:right;
	background-color:#6D7DB1;
	width:577px;
	clear:both;
}
 
#recherche form{	
	display:inline;
 
}
 
#recherche input{
 
	display:inherit;
	padding-top :2px;
}
 
/*Contenu à droite */
.contenuDroite {
	width:181px;
	height:138px;
	float:left;
	background-color:#00FF00;
	/*
	background-color:#6D7DB1;*/
}
 
#img1{
	float:left;
	background-image:url(images/img1.jpg);
	width:95px;
	height:23px;
}
 
#img2{
	float:left;
	height:19px;
	width:95px;
	background-image:url(images/img2.jpg);
}
 
#img3{
	float:left;
	height:23px;
	width:86px;
	background-image:url(images/img3.jpg);
}
 
#img4{
	float:left;
	height:19px;
	width:86px;
	background-image:url(images/img4.jpg);
}
 
.styleImg{
	display:block;
}

Merci d'avance, et merci IE !! grrr

[jeje13009]

slt,

bon deja le width de ton #recherche vaut 577 alors qu'il est un sous-bloc de #contain-Gauche dont le width est de 576...

sinon si tu fesais une mise en page en absolute ?

[maysa]

Oui, merci, j'ai vu cette erreur...
disons que tout cela est mon header, et que j'inclus ensuite le corps et le footer qui est fait avec des tables c'est impossible.

[mLk92]

déjà enlève toute les marges de ta page avec :

Code :

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

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

Ensuite vérifie bien toutes tes tailles, padding, marges, pour caler tout ça

Je ne pense pas qu'il y ai besoin de position absolute , si c'est juste un décalage de 2 pixel, c'est pas une position qui va changer le monde ..

[maysa]

exact... j'avais mon margin bottom dans #banniere qui déconnait
merci !