Marge précisée mais inexistante

Version imprimable

Bonjour à tous,

J'ai enfin trouvé la façon dont je veux faire mon menu horizontal (je vous embête pour ça depuis un petit moment :oops: ). Mais maintenant, j'ai un problème avec l'élément que je souhaite placer dessous. J'ai beau lui appliquer une marge, elle n'apparait pas, ni sous IE, ni sous Firefox.

Voici mon code :

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
<!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>Test Blocks</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Test menu" href="design.css" />
	</head>
 
	<body>
		<div id="navcontainer">
			<ul id="navlist">
				<li><a id="current" href="#">Item one</a></li>
				<li><a href="#">Item two</a></li>
				<li><a href="#">Item three</a></li>
				<li><a href="#">Item four</a></li>
				<li><a href="#">Item five</a></li>
			</ul>
		</div>
 
		<div id="maincontainer">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
			ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
			nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat
			in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in
			pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et
			ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
			hendrerit.</p>
		</div>
	</body>
</html>

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
#navcontainer
{
	width: 100%;
	float: left;
	background-color: #fafad2;
}
 
#navcontainer ul li
{
	display: inline;
}
 
#navcontainer ul
{
	margin: 0;
	padding: 0 0 0 265px;
	color: #FFFFFF;
	font-family: garamond, sans-serif;
	font-size: 1.2em;
	letter-spacing: 2px;
	font-weight: bold;
}
 
#navcontainer ul li a
{
	margin: 0;
	padding: 0.1em 0.3em;
	background-color: #fafad2;
	color: #ff9900;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fafad2;
}
 
#navcontainer ul li a:hover
{
	margin: 0;
	background-color: #ff9900;
	color: #fafad2;
}
 
#navcontainer ul li #current
{
	margin: 0;
	color: #fafad2;
	background-color: #ff9900;
}
 
#maincontainer
{
	clear: both;
	margin: 20px 0 0 0; /* marge appliquée */
	background-color: blue;
}

Est-ce normal ? Que puis-je faire pour solutionner ce problème ?

Merci d'avance,

Marco85

Essaie

Code:

1
2
3
4
5
6
7
8
9
10
 
#maincontainer
{
	clear: both;
	padding-top:20px;
	margin: 0;
	background-color: blue;
	height:1%;/*hasLayout pour ie 7 - et ie6*/
}
#maincontainer p {margin-top: 0;}/*utile pour le premier paragraphe*/

25/11/2006, 19h31
Auteur
bonjour,

ton navcontanier à l'attribut float, il sort du flux de la page. Si tu veux une marge en haut de 20px ajoute ceci entre les div navcontainer et maincontainer
Code:

1 2 <hr style="visibility: hidden; clear: both">
26/11/2006, 12h04
Marco85
Bonjour à vous,

Merci beaucoup pour ces deux solutions. J'ai gardé la seconde en la modifiant légèrement :

Code:

<hr id="separation"/>
Code:

1 2 3 4 5 6 #separation { margin: 0; visibility: hidden; clear: both; }
Je me suis dit que ce serait mieux de mettre toute la mise en page dans le CSS (apparemment c'est une bonne habitude à prendre pour les débutants comme moi). Est-ce une bonne idée ?

J'ai cependant un problème. Je n'arrive pas jouer sur la hauteur de la marge appliquée. En fait, j'ai toujours une marge minimale même si je les mets toutes à zero (j'ai même essayé de jouer sur line-height mais ça ne change rien). Qu'est-ce que j'ai encore oublié ?

Merci encore de votre aide et merci d'avance.

Marco85
26/11/2006, 12h59
Dan_A

hasLayout est indispensable pour ie 6 et 7.
Il est inutile d'avoir un clear:both dans le séparateur et le conteneur...
Il y a un problème de "collapsing margins".

Bonjour,

Merci pour ces explications (même si je ne comprends pas très bien ce que sont les collapsing margins).

Je vous redonne mon code mis à jour :

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
<!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>Test Blocks</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Test menu" href="design.css" />
	</head>
 
	<body>
		<div id="navcontainer">
			<ul id="navlist">
				<li><a id="current" href="#">Item one</a></li>
				<li><a href="#">Item two</a></li>
				<li><a href="#">Item three</a></li>
				<li><a href="#">Item four</a></li>
				<li><a href="#">Item five</a></li>
			</ul>
		</div>
 
		<hr id="separation"/>
 
		<div id="maincontainer">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, 
			adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, 
			mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu 
			massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras 
			vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. 
			Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede 
			pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
		</div>
	</body>
</html>

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
#navcontainer
{
	width: 100%;
	float: left;
	background-color: #fafad2;
}
 
#navcontainer ul li
{
	display: inline;
}
 
#navcontainer ul
{
	margin: 0;
	padding: 0 0 0 265px;
	color: #FFFFFF;
	font-family: garamond, sans-serif;
	font-size: 1.2em;
	letter-spacing: 2px;
	font-weight: bold;
}
 
#navcontainer ul li a
{
	margin: 0;
	padding: 0.1em 0.3em;
	background-color: #fafad2;
	color: #ff9900;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fafad2;
}
 
#navcontainer ul li a:hover
{
	margin: 0;
	background-color: #ff9900;
	color: #fafad2;
}
 
#navcontainer ul li #current
{
	margin: 0;
	color: #fafad2;
	background-color: #ff9900;
}
 
#separation
{
	margin: 0;
	visibility: hidden;
	clear: both;
}
 
#maincontainer
{
	margin: 0 0 0 0; /* marge appliquée */
	background-color: blue;
}

Je n'ai donc pas de clear: both; dans le séparateur et le conteneur suivante mais uniquement dans le séparateur.
Cependant, je voudrais jouer sur la taille de ce séparateur justement parce qu'il est vraiment trop "haut" par défaut. J'ai essayé de jouer avec line-height, margin mais rien n'y fait. Que faut-il utiliser pour placer le maincontainer à 5px (par exemple) du navcontainer ?

Merci d'avance,

Marco85

Code:

1
2
3
4
5
6
7
8
9
10
 
#maincontainer
{
	clear: both;
	padding-top:5px;
	margin: 0;
	background-color: blue;
	height:1%;
}
#maincontainer p {margin-top: 0;}/*utile pour le premier paragraphe*/

en enlevant le séparateur.

Salut Dan_A !!!

Merci de continuer à me répondre (même si j'ai un peu quelques difficultés). Je ne vois aucune marge en appliquant ta méthode, aussi bien avec Firefox qu'avec Internet Explorer. C'est bizarre parce qu'avec le séparateur (que j'ai maintenant enlevé) j'avais quand même une "marge" mais je n'arrivais pas à jouer dessus, elle était fixe.

Au cas où, je redonne mon code actuel avec les modifications que tu m'as conseillé :

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
<!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>Test Blocks</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Test menu" href="design.css" />
	</head>
 
	<body>
		<div id="navcontainer">
			<ul id="navlist">
				<li><a id="current" href="#">Item one</a></li>
				<li><a href="#">Item two</a></li>
				<li><a href="#">Item three</a></li>
				<li><a href="#">Item four</a></li>
				<li><a href="#">Item five</a></li>
			</ul>
		</div>
 
		<div id="maincontainer">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
			ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
			nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat
			in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in
			pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et
			ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
			hendrerit.</p>
		</div>
	</body>
</html>

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
#navcontainer
{
	width: 100%;
	float: left;
	background-color: #fafad2;
}
 
#navcontainer ul li
{
	display: inline;
}
 
#navcontainer ul
{
	margin: 0;
	padding: 0 0 0 265px;
	color: #FFFFFF;
	font-family: garamond, sans-serif;
	font-size: 1.2em;
	letter-spacing: 2px;
	font-weight: bold;
}
 
#navcontainer ul li a
{
	margin: 0;
	padding: 0.1em 0.3em;
	background-color: #fafad2;
	color: #ff9900;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fafad2;
}
 
#navcontainer ul li a:hover
{
	margin: 0;
	background-color: #ff9900;
	color: #fafad2;
}
 
#navcontainer ul li #current
{
	margin: 0;
	color: #fafad2;
	background-color: #ff9900;
}
 
#maincontainer
{
	clear: both;
	padding-top:5px;
	margin: 0;
	background-color: blue;
	height:1%;
}
 
#maincontainer p {margin-top: 0;}/*utile pour le premier paragraphe*/

Merci encore de m'avoir répondu pour ce problème et merci d'avance.

Marco85

27/11/2006, 21h25
Dan_A

S'il faut un espace entre la navigation et le contenu, c'est
margin-bottom:5px;
qu'il faut ajouter maintenant dans #navcontainer
Sinon il faut plus de précisions.