Décalage affichage balise dans une div

Bonjour tout le monde,

J'ai un petit soucis avec mon css. En effet, lorsque j'insère une balise dans une div, ca décale la position de la div et fais donc un "trou" dans mon affichage.

Cela le fait avec certaines balises mais pas avec d'autres. Par exemple, ca le fait avec <p> et <h1> mais pas avec <a>

Voici le code associé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" href="styles/main.css" />
   </head>
	<body>
		<div id="conteneur">
			<div id="header"></div>
			<div id="menu">
			</div>
			<div id="corps">
				?>
				<p>test</p>
			</div>
			<div id="footer"></div>
		</div>
	</body>
</html>

et voici le css

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
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
body
{
    background-color: #655F5F;
}
 
#conteneur
{
   margin: auto;
   width: 937px;
}
 
#header
{
   background-image: url("../images/header.jpg");
   width: 937px;
   height: 257px;
}
 
#menu
{
   background-image: url("../images/menu.jpg");
   width: 937px;
   height: 63px;
   text-align: center;
   font-size: 16px;
    padding-top: 12px; 
}
 
#menu a
{
   color: #000000;
   text-decoration: none;
}
 
#menu a:hover
{
   text-decoration: underline;
}
 
#corps
{
   background-image: url("../images/corps.jpg");
   background-repeat: repeat-y;
   width: 821px;
   padding-left: 58px;
   padding-right: 58px;
}
 
#corps a
{
   color: #846b41;
   text-decoration: none;
}
 
#corps a:hover
{
   color: #c48a2c;
   text-decoration: underline;
}
 
#footer
{
   background-image: url("../images/footer.jpg");
   width: 937px;
   height: 20px;
   color: #b3a793;
   font-size: 12px;
   text-align: center;
   padding-top: 14px;
}
 
#footer a
{
   text-decoration: underline;
   color: #b3a793;
}
 
td {
	border: thin solid #000000;
	width: 200px;
	height: 28px;
	background-color: #D0D1D2;
	font-family : Segoe Script;
	font-style : bold;
}
 
table
{
   padding-left: 49px;
   padding-bottom : 4 px;
}

Vous constatez que la balise contenant le <p>Test</p> décale l'affichage du conteneur.

Je sèche complètement la. Si vous aviez un début de solution à me proposer, ce serait cool :ccool:

@++