problème avec les blocs div

**polo42** · 21/09/2006, 15h12

je ne comprend pas pourquoi mes blocs div ne collent pas entre eux. Sous mozilla firefox ils ne collent pas et sous IE ils collent...

vive la standardisation!!
enfin bon, si vous pouviez m'aider, voila mon code:

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
92
 
html,body {
background-image: url(sainté_site.jpg);
}
h1 {
font-family: arial, verdana, 'times new roman'; 
font-height: lighter;
color: #CC9933;
}
h3 {
font-family: arial, verdana, 'times new roman';
font-height: lighter;
color: #CC9933;
}
h3.p1 {
font-family: arial, verdana, 'times new roman';
font-height: lighter;
color: #CC9933;
border-bottom: 2px solid gray;
}
div#menu {
width: 800px;
height: 20px;
margin-left: auto;
margin-right: auto;
}
div#titre {
width: 700px;
height: 150px;
margin-left: auto;
margin-right: auto;
padding-left: 100px;
 
}
div#paragraphe {
width: 800px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
border-left: 2px solid #CC9933;
border-right: 2px solid #CC9933;
}
 
div#paragraphe p {
display: block;
font-family: arial, verdana, 'times new roman';
color: #3366cc;
text-align: left;
margin: 0 15px;
border-bottom:
} 
div#paragraphe h3{
font-family:arial, verdana, 'times new roman';
font-height: lighter;
color: #CCCCCC;
text-align: left;
margin-left: 15px;
margin-right: 15px;
padding-top: 15px;
}
div#bandeau {
width: 800px;
height:50px;
margin-left: auto;
margin-right: auto;
background-color: #CCCCCC;
}
ul#menu {
margin-top: 0;
padding: 0;
font-family: arial, verdana, 'times new roman';
list-style-type: none;
}
#menu a {
display: block;
width: 120px;
border-style: solid;
border-width: 1px;
border-color: #CCCCCC;
color: blue;
background: none;
text-decoration: none;
text-align: center;
margin: 0 5px;
}
#menu a:hover{
background-color: white;
}
#menu li {
float: left;
}

merci à vous

**Sheriff** · 21/09/2006, 18h53

salut !
et où se trouve le code des div ?
(J'ai eu le même problème avec des images et il ne s'agissait que des espaces et les retour chariot que je laissait entre les balises...)
@+

**polo42** · 21/09/2006, 19h20

voila mon code avec mes balises div tel qu'il est. j'ai supprimé les retours chariots et rien n'y fait.

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
 
<!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" lang="fr">
<head>
<title>Paul.Carrot</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="titre">
<h1>Paul Carrot</h1>
<h3>Géomatique, Environnement</h3>
</div>
<div id="menu">
<ul id="menu">
	<li><a href="...">Actualités</a><li>
 	<li><a href="quisuisje.htm">Qui suis-je?</a></li>
	<li><a href="...">La géomatique</a></li>
	<li><a href="..">Le webmapping</a></li>
	<li><a href="...">Cours</a></li>
	<li><a href="...">Me contacter</a></li>
</ul>
</div>
<div id="paragraphe">
<h3 class="p1">Actualités</h3>
<p>Mon stage de Master 2 SIG viens de se terminer et je suis actuellement en train de préparer ma soutenance.
Je suis actuellement en recherche d'emploi.</p> 
<h3 class="p1">Pourquoi ce site ?</h3>
<p>Ce site a pour but de présenter mon travail universitaire et personnel. Il regroupe ainsi quelques cours concernant les logiciles SIG téléchargeablent en PDF. Ces cours ont été réalisés durant mon master 2 à Saint-Etienne.
Ce site a également pour but de me faire pratiquer le <a href="...">WebSIG</a> et la programmation web (voir le lien).</p>
</div>
<div id="bandeau">
<p> hehehehehehehhehe</p>
</div>
</body>

merci

**polo42** · 22/09/2006, 09h19

j'ai enlevé tous les retour chariot et le problème est toujours là. si quelqu'un pouvait me mettre sur la piste, ce serait gentil.
merci.

**MasterOfChakhaL** · 22/09/2006, 09h51

un identificateur doit être unique.

Tu as des éléments qui ont le même id (menu par exemple)
Tu peux également définir des classes dans tes balises (<element class="laClasse" ...) et définir leur propriétés css grace au sélecteur .laClasse

Quand je vois que tu définis <div id="paragraphe">, moi, je me dis pourquoi ne pas plutôt utiliser p... Ca me parait plus logique.

De manière générale, ca ne sert à rien de définir trop de div.
Par exemple, ton div autour du menu ne me parait pas indispensable.

Ensuite, pour ton probleme ie vs firefox, il faut que tu saches qu'ils n'interprêtent pas la largeur des blocks de la même manière. Les margin et padding posent des problèmes récurrents. C'est pourquoi, on conseille souvent de commencer ses css par

Code :

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

1
2
3
4
* {
  maring:0;
  padding: 0;
}

(le sélecteur * concerne tous tes éléments définis dans ta page)

**polo42** · 22/09/2006, 10h09

Merci beaucoup, ça marche. J’ai gardé les blocs div et ça marche grâce à

Code :

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

1
2
3
4
* {
margin: 0;
padding:0;
}

J'ai gardé le bloc div du menu car sans cela, le menu se superpose et deviens un menu vertical lors du rétrécissement de la fenêtre.
Encore merci à tous.

problème avec les blocs div

CSS

Vue hybride

Discussions similaires

Partager

Partager