Marge précisée mais inexistante

**Marco85** · 25/11/2006, 17h51

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

). 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 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
<!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 CSS :

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

**Dan_A** · 25/11/2006, 19h25

Essaie

Code css :

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

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

**Auteur** · 25/11/2006, 19h31

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

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

1
2
 
        <hr style="visibility: hidden; clear: both">

**Marco85** · 26/11/2006, 12h04

Bonjour à vous,

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

Code HTML :

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

<hr id="separation"/>

Code CSS :

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

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

**Dan_A** · 26/11/2006, 12h59

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

**Marco85** · 27/11/2006, 12h53

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

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

**Dan_A** · 27/11/2006, 19h55

Code css :

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

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.

**Marco85** · 27/11/2006, 20h35

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

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

**Dan_A** · 27/11/2006, 21h25

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.

Marge précisée mais inexistante

CSS

Discussions similaires

Partager

Partager