Décalage affichage balise dans une div

**francois0208** · 23/04/2012, 23h07

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 :

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
<!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 :

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
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

@++

Invité · 24/04/2012, 09h28

Bonjour,
c'est normal, car certaines balises ont des marges pré-définies.

Ajoute ceci au début de ton CSS :

Code css :

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

1
2
3
4
5
6
* { margin:0; padding:0; } /* remise à zéro de toutes les marges (de toutes les balises) */
html, body { width:100%; height:100%; }
body
{
background-color: #655F5F;
}

Tu peux ensuite définir (et maitriser) les marges que tu veux.

Décalage affichage balise dans une div

CSS

Discussions similaires

Partager

Partager