Espacement entre mes div indésirable

**Opal_m** · 06/08/2018, 17h55

Bonjour à tous,

Je suis nouveau en HTML & CSS, j'ai essayé de trouver une réponse à mon(mes) problèmes mais mes lacunes en vocabulaire ne m'ont pas permis de formuler correctement ma demande.. et donc de trouver une réponse.

Voilà mon problème, j'aimerais crée 4 bloc qui occupe 100% de la longeur d'une page, cependant lorsque je code la ligne, l'ensemble de la ligne fait 100% de la largeur de la page, chacun des 4 éléments 25%. Cependant il y a un petit espace entre chaque bloc ce qui fait que les 4 elements s’étendent sur 2 lignes ..

Mon:

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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE HTML>
<html>
 
<head>
<meta charset="UFT-8">
<title>Liste d'accès aux différentes leçons !</title>
 
<link rel="stylesheet" href="css/styles.css" />
 
</head>
 
<body>
<div id="conteneur">
 
	<div class="Intro" >
		<div class="bloc">
		</div>
		<div class="slider">
		</div>
	</div>
 
	<div class="ligne entete">
		<div class="bloc">
		</div>
		<div class="slider">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne entete">
		<div class="bloc">
		</div>
		<div class="slider">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
</div>
</body>
 
</html>

Mon:

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
body,html{height:100%;
width:100%;}
 
#conteneur{
width: 100%;
height: 100%;
margin : 0px;
padding : 0px;
border: 1px solid red;
background-color: hsl(0, 100%, 50%,0.2);
position: relative;
}
 
body,.bloc,.slider{ 
margin:0px;
padding:0px; 
}
 
.bloc{
	display : inline-block;
	width: 25%;
	border : 1px solid green;
	background-color: hsl(150, 100%, 50%,0.2);
	height: 300px;
}
 
.slider{
	display : inline-block;
	border : 1px solid blue;
	width:75%;
	background-color: hsl(250, 100%, 50%,0.2);
	height: 300px;
}

Aussi j'avais une seconde question, je débute dans le développement web (non professionnel juste par loisir) je comprends approximativement HTML CSS3 et Java, serait il possible de me diriger vers un post où il est expliqué comment avoir une hauteur variable pour mes blocs(div). Je souhaiterais en effet avoir 4 carrés identiques qui remplisse une ligne !

Merci beaucoup,

Je vous remercie d'avance,

Cordialement,

PS : j'ai lu un commentaire du type: "J'ai mis un Overflow:auto; sur ma div .center

"

**NoSmoking** · 07/08/2018, 16h47

Bonjour,
commence par supprimer TOUS les display:inline-block de tes éléments c'est ce qui génère un « whitespace ».

Regarde ce que j'en dis sur Espace entre éléments « inline »

Même si dans le lien on traite de <ul><li> c'est tout à fait applicable à ton cas.

La solution du display:flex sur le conteneur « ligne » devrait même résoudre ta deuxième interrogation, de même que la solution display:table-cell sur les conteneurs « block » et « slider ».

Une discussion = une question

Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

**Manequin** · 07/08/2018, 17h06

Bonsoir, fait simple Opal_m
code 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
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
 
<!DOCTYPE html>
<html>
		<head>
			<meta charset="utf-8" />
			<link rel="stylesheet" href="style.css" />
			<title>Accueil</title>
			<script type="text/javascript" src="date_heure.js"></script>
		</head>
		<body>
 
			<div id="bloc_page">
 
					<center>
							<table border="0" class="table">
								<tr>
									<td>
										<div>
											<h1 id="temoignages">Témoignages
 
											</h1>
										</div>
 
									</td>
 
									<td>
										<div>
											<h1 id="contacts">Nos Contacts</h1>
										</div>
									</td>
 
									<td>
										<div>
											<h1 id="coordonnees">Nos coordonnées</h1>
										</div>
									</td>
 
									<td>
										<div>
											<h1 id="partenaires">Nos partenaires</h1>
										</div>
									</td>
								</tr>
							</table>
					</center>
			</div>
 
	</body>
</html>

Code css:

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
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
 
 
#bloc_page
{
 
	margin:auto;
	width: 900px;
	background-color:rgb(255,255,255) ;
	border-radius: 10px 10px;
	border: 3px solid #00005C ;
 
 
} 
 
#temoignages 
{
	width: 20%;
	display: inline-block;
	width: 200px;
	height: 100px;
	text-align: center;
	position: right;
	background-color: rgb(60,60,255);
	box-shadow: 0px 2px 5px #1c1a19;
	border-radius: 5px;
	padding: 10px;
	color: white;
	font-family: "Trebuchet MS";
	font-size: 1em;
	vertical-align: top;
 
} 
 
 
#contacts{
	width: 20%;
	display: inline-block;
	width: 200px;
	height: 100px;
	text-align: center;
	position: right;
	background-color: rgb(0,128,0);
	box-shadow: 0px 2px 5px #1c1a19;
	border-radius: 5px;
	padding: 10px;
	color: white;
	font-family: "Trebuchet MS";
	font-size: 0.9em;
	vertical-align: top;
 
} 
 
#coordonnees{
	width: 20%;
	display: inline-block;
	width: 200px;
	height: 100px;
	text-align: center;
	position: right;
	background-color: rgb(255,255,0);
	box-shadow: 0px 2px 5px #1c1a19;
	border-radius: 5px;
	padding: 10px;
	color: white;
	font-family: "Trebuchet MS";
	font-size: 0.9em;
	vertical-align: top;
 
} 
 
#partenaires{
	width: 20%;
	display: inline-block;
	width: 200px;
	height: 100px;
	text-align: center;
	position: right;
	background-color: rgb(255,0,0);
	box-shadow: 0px 2px 5px #1c1a19;
	border-radius: 5px;
	padding: 10px;
	color: white;
	font-family: "Trebuchet MS";
	font-size: 0.9em;
	vertical-align: top;
 
}

Cordialement.

**NoSmoking** · 07/08/2018, 17h49

@Manequin :

pas d'élément <table>, avec la même structure que proposé il suffit d'appliquer le CSS suivant :

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
div {
  box-sizing: border-box;     /* AJOUT pour prise en compte bordure dans width et height */
}
#conteneur {
  position: relative;
  width: 100%;
/*  height: 100%;             /* OUT pas judicieux */
  margin: 0;
  padding: 0;
  border: 1px solid red;
  background-color: hsla(0,100%,50%,0.2); /* hsla et non hls */
}
body, .bloc, .slider {
  margin: 0;
  padding: 0;
}
 
.Intro,
.ligne {
  display: flex;              /* AJOUT */
}
.bloc {
/*  display: inline-block;    /* OUT */
  width: 25%;
  height: 300px;
  border: 1px solid green;
  background-color: hsla(150,100%,50%,0.2); /* hsla et non hls */
}
.slider {
/*  display: inline-block;    /* OUT */
  width: 75%;
  height: 300px;
  border: 1px solid blue;
  background-color: hsla(250,100%,50%,0.2); /* hsla et non hls */
}

**Manequin** · 07/08/2018, 18h33

Merci @NoSmoking pour ces ajouts dans mes connaissances.

Cordialement.

**Opal_m** · 08/08/2018, 10h06

Merci à tous pour votre aide je débute dans le "développement web", y'aurait il des sites à me recommander ? (référencement),

Vos réponses m'ont été d'une grande aide !

Espacement entre mes div indésirable

CSS

Vue hybride

Discussions similaires

Partager

Partager