Margin-top non pris en compte sous ff

**orphen** · 08/10/2008, 15h29

Bonjour a tous.

Je me trouve confronter a un problème qui doit être basique mais que je n'arrive pas a résoudre.

J'essaye par un margin de decaler le corps de ma page de mon header.

Le margin est pris en compte sous les 2 ie, mais pas sous firefox 3 (Le deux je ne sais pas).

Voila un lien vers le visuel ff( En haut ) et le visuel IE ( En bas ).

http://img216.imageshack.us/my.php?i...2868877bi5.jpg

Voici également mon code html

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BIENVENUE CHEZ JEUNES A PARIS</title>
<link href="css/commun.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
	<div id="conteneur">
 
		<!--  Header  -->
		<div id="header">
			<div id="banniere">
				<a href="index.html"><img src="images/header/logo.jpg" alt="Logo du site" /></a><img src="images/header/deco_logo.jpg" alt="Decoration du logo du site" />
			</div>
			<div id="menu_principal">
				<a href="#"><img src="images/header/menu/01_agenda.jpg" alt="Bouton Agenda" /></a>
				<a href="#"><img src="images/header/menu/02_parle.jpg" alt="Bouton On en parle" /></a>
				<a href="#"><img src="images/header/menu/03_jap.jpg" alt="Bouton Jap et vous" /></a>
				<a href="#"><img src="images/header/menu/04_multimedias.jpg" alt="Bouton Multimedias" /></a>
				<a href="#"><img src="images/header/menu/05_adresses.jpg" alt="Bouton Nos adresses" style="margin:0;" /></a>
			</div>
		</div>
 
		<!--  Corps  -->
		<div id="corps">
			<div class="template_home">
				<div class="bloc_agenda">div1</div>
				<div class="bloc_on_en_parle">div2</div>
				<div class="bloc_adresses">div3</div>
			</div>
		</div>
 
		<!--  Correctif Float  -->
		<div style="clear:both"></div>
 
		<!--  Footer  -->
		<div>Footer</div>
 
	</div>
</body>
</html>

Et mon code 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
 
/* Global
*************************************************************************/
*{
	margin:0;
	padding:0;
}
 
body{
	font:bold 12px Arial, Helvetica, sans-serif;
}
 
img{
	border:none;
}
 
a{
	outline:none;
}
 
/* Page generale
*************************************************************************/
#conteneur{
	width:967px;
	margin:0 auto;
}
 
#menu_principal img{
	display:block;
	float:left;
	margin-right:12px;
}
 
/* Page Home
*************************************************************************/
.template_home{
	margin:10px 0 0 0;
	background-color:#FF0000;
	clear:both;
	position:relative;
}
 
.bloc_agenda{
	width:184px;
	background-color:#CCCCCC;
}
 
.bloc_on_en_parle{
	width:576px;
	background-color:#99FF66;
}
 
.bloc_adresses{
	width:183px;
	background-color:#00FF99
}

Merci beaucoup pour vos réponses

**HiRoN** · 08/10/2008, 15h42

Salut,

Si c'est pour séparer le menu de la partie du dessous, as-tu essayé en enlevant le :

Code CSS :

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

margin:10px 0 0 0;

De la class : .template_home

Et en rajoutant :

Code CSS :

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

1
2
 
#menu_principal { margin:0 0 10px 0; }

(A moins que ce ne soit pour le décaler sur la droite dans ce cas, margin:0 0 0 10px; )

?

**orphen** · 08/10/2008, 15h42

Je viens de me corriger tout seul,

Le problème venait des float sur mon menu j'ai attribuer au conteneur de mon menu un overflow:auto et tout est rentrer dans l'ordre.

Desoler pour ce post inutil

Margin-top non pris en compte sous ff

CSS

Discussions similaires

Partager

Partager