espace entre deux div [Résolu]

scoubi77 · 22/12/2011, 10h43

Bonjour à tous

J'ai deux DIV l'un au dessus de l'autre qui ont un espacement que je souhaiterais réduire
voir supprimer.

voici le code de ma page

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" CONTENT="">
<meta HTTP-EQUIV="IMAGETOOLBAR" content="no" SCROLLING="yes" >
<meta name="keywords" CONTENT="">
<!-- DEBUT DU SCRIPT -->
<script type="text/javascript">
 
function yaunclick(){   
   alert('reproduction interdite');
   }
function noclick(scx){
   if (navigator.appName == "Netscape" && scx.which == 3){
      yaunclick();
      return false;
   }
 
   if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2){
      yaunclick();
      return false;
   }
}
document.onmousedown = noclick;
 
function refresh()
  {
  document.location.reload();
                return false;
  }
document.oncontextmenu = refresh;
 
<!--
function removeelements(){
  var remove_el=document.all.remove
  if (remove_el!='' && remove_el.length==null){
    remove_el.style.display='none'
  }else{
    for (i=0;i<remove_el.length;i++){
      remove_el[i].style.display='none';
    }
  }
  document.bgColor="white";
  document.body.style.background='';
}
 
function revertback(){
  setTimeout("window.location.reload()",50);
}
window.onbeforeprint=removeelements;
window.onafterprint=revertback;
 
// -->
</script> 
<!-- FIN DU SCRIPT -->
<style type="text/css">
   body { 
 
 
                background: #FFFFFF; 
      color: #000000;
      font-family: Verdana;
   }
   h1 { 
      font-size:1.8em;
   }
   #entete {
      text-align: center;
      width: 600px;
      background: #D8BFD8;
      border-radius: 20px;
      padding: 20px;
      margin: 90px auto;
      box-shadow: 0 0 20px #222;
   }
   #corps {
      width: 600px;
      background: #FFFACD;
      border-radius: 20px;
      padding: 20px;
      margin: 85px ;
      box-shadow: 0 0 20px #222;
   }
 
   p {
      text-align: left;
   }
</style> 
</head>
 
<body>
<div style="float:left;" id="centrage">
    <div id="entete">
       <FONT face="Garamond" size="3"><h1></h1></FONT>
    </div>
    <div id="corps"><FONT face="Verdana" size="2">
       <p></p><br/>
       <div style="text-align:center"><img src="image/image.jpg"  width="197" height="300" border="0" ></DIV> <BR>
        </P></FONT>
    <BR><BR><BR>
                       <div style="text-align:center"><FONT face="Verdana" size="1"></DIV></FONT>
    </div>
</body>
</html>

Merci par avance à ceux qui ont une idée pour regler ce problème
amicalement
scoubi77

Torgar · 22/12/2011, 10h57

Bonjour,

Revoie tes marges sur tes div margin: 90px auto; et margin: 85px ;Et tant que tu y es, les balises HTML c'est en minuscules qu'elles doivent s'écrire ^^

Emyleen · 22/12/2011, 11h07

Voici ton code corrigé :

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
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="">
<meta http-equiv="imagetoolbar" content="no" scrolling="yes" >
<meta name="keywords" content="">
<!-- DEBUT DU SCRIPT -->
<script type="text/javascript">
 
function yaunclick(){   
   alert('reproduction interdite');
   }
function noclick(scx){
   if (navigator.appName == "Netscape" && scx.which == 3){
      yaunclick();
      return false;
   }
 
   if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2){
      yaunclick();
      return false;
   }
}
document.onmousedown = noclick;
 
function refresh()
  {
  document.location.reload();
                return false;
  }
document.oncontextmenu = refresh;
 
<!--
function removeelements(){
  var remove_el=document.all.remove
  if (remove_el!='' && remove_el.length==null){
    remove_el.style.display='none'
  }else{
    for (i=0;i<remove_el.length;i++){
      remove_el[i].style.display='none';
    }
  }
  document.bgColor="white";
  document.body.style.background='';
}
 
function revertback(){
  setTimeout("window.location.reload()",50);
}
window.onbeforeprint=removeelements;
window.onafterprint=revertback;
 
// -->
</script> 
<!-- FIN DU SCRIPT -->
<style type="text/css">
body { 
	background: #FFFFFF; 
	color: #000000;
	font-family: Verdana;
}
h1 { 
	font-size:1.8em;
	font-family: 'Garamont';
}
#entete {
	text-align: center;
	width: 600px;
	background: #D8BFD8;
	border-radius: 20px;
	padding: 20px;
	margin: 90px auto;
	box-shadow: 0 0 20px #222;
}
#corps {
	width: 600px;
	background: #FFFACD;
	border-radius: 20px;
	padding: 20px;
	margin: 85px ;
	box-shadow: 0 0 20px #222;
}
 
p {
	text-align: left;
}
</style> 
</head>
 
<body>
    <div style="float:left;" id="centrage">
        <div id="entete">
        	<h1></h1>
        </div>
        <div id="corps">
            <p>bla bla bla</p>
            <div style="text-align:center"><img src="image/image.jpg"  width="197" height="300" border="0" ></div>
            <br/>
            <div style="text-align:center">contenu de la div</div>
        </div>
	</div>
</body>
</html>

Tu n'as qu'a réduire les margin de tes div entête et corps. A l'avenir évite de mettre des balises dans tout les sens et évite d'utiliser des balises qui sont devenues obsolètes comme les balises font, et apprend un peu mieux les langages HTML et CSS, il y a des normes à respecter.

scoubi77 · 22/12/2011, 11h35

Un grand merci à vous deux

J'avais pourtant fait évoluer différentes valeurs sur le pading, mon erreure venait que je ne modifié que l'une des deux valeur

je vous remerci

22/12/2011, 10h57	#2
Torgar Membre expérimenté Jérémy Développeur Web Inscription : août 2007 Messages : 326 Détails du profil Informations personnelles : Nom : Jérémy Âge : 26 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : Industrie Informations forums : Inscription : août 2007 Messages : 326 Points : 535 Points : 535	Bonjour, Revoie tes marges sur tes div margin: 90px auto; et margin: 85px ;Et tant que tu y es, les balises HTML c'est en minuscules qu'elles doivent s'écrire ^^ __________________ Vivez vos rêves !!! Si vous voulez que l'on vous aide, postez votre code avec la balise [ CODE ] [ /CODE ] (bouton # de l'éditeur)
	00

22/12/2011, 11h35	#4
scoubi77 Invité régulier Inscription : novembre 2009 Messages : 117 Détails du profil Informations forums : Inscription : novembre 2009 Messages : 117 Points : 5 Points : 5	Un grand merci à vous deux J'avais pourtant fait évoluer différentes valeurs sur le pading, mon erreure venait que je ne modifié que l'une des deux valeur je vous remerci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email