Comment supprimer l'espace entre deux blocs ?

**la_guigz** · 25/01/2012, 18h23

bonjour voilà mon problème, j'ai un bandeau et un bloc menu en dessous or ils ne sont pas collés, d'où cela peut-il venir?
Merci

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
Le CSS:
 
body
{
	background-image: url(degrade.gif);
	background-repeat: repeat-x;
	background-position: top left;
}
 
#bandeau
{
width: 790px;
margin:auto;
}
 
ul#menu{
 width: 810px;
 padding:0;
 margin:0;
 list-style-type:none;
 }
ul#menu li {
 margin-left:2px;
 float:left; /*pour IE*/
 }
ul#menu li a {
 display:block;
 float:left;   
 width:116.3px;
 background-color:white;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:5px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 }
ul#menu li a:hover {
 background-color:#D3D3D3;
 border-color:#696969 #DCDCDC #DCDCDC #696969;
 }

Le HTML:

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
 
<body
		<div id="bandeau"><img src="cernybandeau.jpg" /></div>
		<div class="menu">
			<ul id="menu">
				<li><a class="actif" href="index.html">Accueil</a></li>
				<li><a href="legite.html">Le gîte</a></li>
				<li><a href="tourisme.html">Tourisme</a></li>
				<li><a href="tarifs.html">Tarifs</a></li>
				<li><a href="contact.html">Contact</a></li>
				<li><a href="livredor.html">Livre d'or</a></li>
			</ul>
		</div>
</body>

Invité · 25/01/2012, 20h40

Bonjour,
il faut :
- mettre un DOCTYPE valide ;
- ajouter le CSS :

Code :

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

html, body { padding:0; margin:0; }

**la_guigz** · 26/01/2012, 15h33

Salut

merci pour les infos, j'ai essayé mais ça marche toujours pas, il y a un espace d'un ou deux pixels entre le bandeau et le menu

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
		        <link rel="stylesheet" href="test.css" />
        <title>Cerny d'en haut. Gite rural à Montbrun Bocage.</title>
    </head>
	<body>
	<img class="bandeau" src="cernybandeau.jpg" />
	<ul id="menu">
				<li><a class="actif" href="index.html">Accueil</a></li>
				<li><a href="legite.html">Le gîte</a></li>
				<li><a href="tourisme.html">Tourisme</a></li>
				<li><a href="tarifs.html">Tarifs</a></li>
				<li><a href="contact.html">Contact</a></li>
				<li><a href="livredor.html">Livre d'or</a></li>
			</ul>
	</body>

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
html, body
{
 padding:0;
 margin:0; 
}
 
body
{
background-color: green;}
 
.bandeau
{
margin:0;
padding:0;
}
 
ul#menu
{
 padding:0;
 margin:0;
 list-style-type:none;
 }
 
ul#menu li {
 margin-left:2px;
 float:left; /*pour IE*/
 }
 
 ul#menu li a {
 display:block;
 float:left;   
 width:116.3px;
 background-color:blue;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:5px;
 margin:0;
 border:solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:blue;
 }

D'ailleurs j'ai essayé avec le tutoriel tout simple de developpez.net: http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/
si l'on insère un menu tout simple dans le bloc central celui-ci se décale en dessous du bandeau

**buggen25** · 26/01/2012, 16h32

Bonjour;
j'ai mit un doc type valide et ça a fonctionné, voici le code final, essaye cela
Feuille de style

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
 
html, body
{
 padding:0;
 margin:0; 
 background-color: green;
}
 
 
.bandeau
{
margin:0;
padding:0;
}
 
ul#menu
{
 padding:0;
 margin:0;
 list-style-type:none;
 }
 
ul#menu li {
 margin-left:2px;
 float:left; /*pour IE*/
 }
 
 ul#menu li a {
 display:block;
 float:left;   
 width:116.3px;
 background-color:blue;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:5px;
 margin:0;
 border:solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:blue;
 }

Le code html est le suivant :

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
<!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 charset="utf-8" />
		        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
		        <link rel="stylesheet" href="test.css" />
        <title>Cerny d'en haut. Gite rural à Montbrun Bocage.</title>
    </head>
	<body>
	<img class="bandeau" src="cernybandeau.jpg" />
	<ul id="menu">
				<li><a class="actif" href="index.html">Accueil</a></li>
				<li><a href="legite.html">Le gîte</a></li>
				<li><a href="tourisme.html">Tourisme</a></li>
				<li><a href="tarifs.html">Tarifs</a></li>
				<li><a href="contact.html">Contact</a></li>
				<li><a href="livredor.html">Livre d'or</a></li>
			</ul>
	</body>
	</html>

Cordialement

**la_guigz** · 26/01/2012, 21h57

Merci pour les infos, en fait ça a marché quand j'ai par hasard affecté un { height } au menu.

Comment supprimer l'espace entre deux blocs ?

CSS

Discussions similaires

Partager

Partager