Positionnement avec inline-block

1 pièce(s) jointe(s)

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;

Pièce jointe 184868

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.

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.

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:

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:

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.

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.