Positionnement avec inline-block

**thenewby** · 06/08/2015, 21h20

Bonjour,

Je rencontre actuellemnt un problème d'alignement de 3 inline-block.
Je voudrai que le bloc de gauche soit collé à gauche, celui de droit collé à droite, et celui du milieu centré.
Mon site fait 1000 pixels de large (dans body).
Ci-joint une image montrant ce que j'ai pour l'instant, sachant qu'en css, j'ai mis cela pour les 3 blocs :
display: inline-block;
vertical-align: top;

Nom : ludik.png
Affichages : 219
Taille : 315,2 Ko

Nom : ludik.png
Affichages : 219
Taille : 315,2 Ko

j'ai essayé de rajouter par exemple pour le bloc de droite :
margin-right: 0px;
Je ne sais pas si le choix inline-block est le plus adapté. Peut-être qu'avec flex se serai mieu ?

Merci.

**NoSmoking** · 07/08/2015, 12h02

Bonjour,
display: inline-block entraine l'apparition, entre tes éléments, de whitespace, toujours bien pénible, je dirais dans un premier temps mets tes éléments en float:left.

Sans code HTML/CSS des éléments concernés il sera difficile de te fournir plus d'aide.

**thenewby** · 10/08/2015, 23h10

Je ne pense pas que les whitespace soit en cause, ça ne devrai pas empêcher le bloc de droite de se placer tout à droite.

Voici mon code HTML :

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="resources/css/style.css">
		<title> ludikétampes </title>
	</head>
 
	<body>
 
		<header>
			<img src="resources/images/logo.png" alt="Logo du site ludikétampes.">
		</header>
 
		<nav>
			<ul>
				<li> <a href="#">actualités</a> </li>
				<li> <a href="#">nos jeux</a> </li>
				<li> <a href="#">photos</a> </li>
				<li> <a href="#">qui sommes nous</a> </li>
				<li> <a href="#">et les autres</a> </li>
			</ul>
		</nav>
 
		<div id="div_left">
			<ul>
				<li> <img src="resources/images/div_left/illustration_partenaire.png" alt="image humouristique d'un partenaire."> </li>
				<li> <img src="resources/images/div_left/le_comptoir_du_dessin.jpg" alt="Logo de notre partenaire le comptoir du dessin."> </li>
				<li> <img src="resources/images/div_left/twikin.png" alt="Logo de notre partenaire twikin."> </li>
				<li> <img src="resources/images/div_left/esprit_jeu.jpg" alt="Logo de notre partenaire esprit jeu."> </li>
			</ul>
		</div>
 
		<section>
 
			<article>
				<h1> MEREVILLE LE SILO </h1>
 
				<h2> calendrier </h2>
				<p> de 15h30 à 23h </p>
				<ul class="ul_dates">
					<li> 11 / 04 / 2015 </li>
					<li> 09 / 05 / 2015 </li>
					<li> 13 / 06 / 2015 </li>
				</ul>
 
				<h2> le Silo de Boigny </h2>
				<p> <!-- all missing information must be hidden if emty ! -->
					<span class="span_streetNumber"> 1 </span> <span class="span_street"> rue du Pont de Boigny </span>
					<br>
					<span class="span_ZIPCode"> 91660 </span> <span class="span_city"> Méréville </span>
					<br>
					<p class="p_additionalInformation">
						<br>
					</p>
					<a href="#">www.lesilo.com</a>
				</p>
 
				<img src="resources/images/acceuil/silo.jpg" alt="silo de mereville." />
			</article>
 
			<article>
				<h1> A LA BIBLIOTHEQUE </h1>
 
				<h2> calendrier </h2>
				<p> de 14h30 à 18h les samedis </p>
				<ul class="ul_dates">
					<li> 25 / 10 / 2014 </li>
					<li> 13 / 12 / 2014 </li>
					<li> 28 / 02 / 2015 </li>
				</ul>
				<p> de 18h30 à 22h les vendredis </p>
				<ul class="ul_dates">
					<li> 26 / 09 / 2014 </li>
					<li> 28 / 11 / 2014 </li>
					<li> 30 / 01 / 2015 </li>
				</ul>
 
				<h2> bibliothèque Diane de Poitiers </h2>
				<p> <!-- all missing information must be hidden if emty ! -->
					<span class="span_streetNumber"> 4 </span> <span class="span_street"> rue Sainte Croix </span>
					<br>
					<span class="span_ZIPCode"> 91150 </span> <span class="span_city"> Etampes </span>
					<br>
					<p class="p_additionalInformation"> 
						<br>
					</p>
					<a href="#">www.lesilo.com</a>
				</p>
 
				<img src="resources/images/acceuil/bibliotheque.jpg" alt="bibliotheque de mereville." />
			</article>
 
		</section>
 
		<footer>
			<h1> siège social </h1>
			<p>
				<span class="span_palce"> LUDIKETAMPES </span>
				<br>
				<span class="span_streetNumber"> 137 </span> <span class="span_street"> rue Brunard </span>
				<br>
				<span class="span_ZIPCode"> 91150 </span> <span class="span_city"> Etampes </span>
				<br>
			</p>
			<h1> président </h1>
			<p> Jérémiah Dourneau </p>
			<h1> secrétaire & communication </h1>
			<p> Régis Farganel </p>
			<h1> trésorier </h1>
			<p> Ludovic Cazenave-Vergez </p>
			<h1> nous contacter </h1>
			<a href="http://www.facebook.com/LudikEtampes" target="_blank"> <img src="resources/images/footer/logo_facebook.png"> </a>
		</footer>
 
	</body>
</html>

Voici mon code CSS :

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
 
body {
	background-color: RGB(51,51,51);
	width: 1000px;
	margin: auto;
}
 
header {
	border: solid 1pt grey;
}
 
ul {
    list-style: none; /* no bullet for ul, defaut position, no image */
}
 
nav ul {
	display: flex;
    justify-content: space-between; /* or space-around : give a left marge and a right marge */
	padding: 0; /* suppress left padding */
	/* margin: 0; */
	border: solid 1pt blue;
}
 
a {
	text-decoration: none; /* no underline text */
}
 
#div_left, section, footer {
	display: inline-block;
	vertical-align: top;
}
 
#div_left {
	padding-left: right;
	margin-left: 0px;
	border: solid 1pt red;
}
 
section {
	border: solid 1pt yellow;
}
 
footer {
	padding-right: right;
	margin-right: 0px;
	border: solid 1pt green;
}
 
#div_left ul  {
	padding-left: 0; 
	margin-left: 0px;
}
 
#div_left ul  img {
	padding-left: 0; 
	margin-left: 0px;
}

Ce n'est pas terminé mais pour l'instant j'essaye de résoudre ce problème.

**Bisûnûrs** · 18/08/2015, 11h27

Tu confonds les marges et les alignements. Dire à un élément qu'il n'a pas de marge à sa droite ne signifie pas qu'il va s'aligner à la toute droite de son parent.

Positionnement avec inline-block

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager