28172 sujets

CSS et mise en forme, CSS3

Souci avec la propriété "display"

Bonsoir,

Je rencontre un souci de décalage de bloc pour lequel j'ai affécté inline-block à sa propriété display.

Pourriez-vous m'indiquer pourquoi le fait d'ajouter des paragraphes dans un bloc décale vers le bas, comme s'il y avait des insertions, le bloc qui est à droite ?

La question posée comme ça ne doit pas sembler très claire et j'espère que le code vous permettra d'y voir plus clair et de m'orienter.

D'avance merci.

Vierlo.

HTML

	<body>
		<section id="snh">
			<div id="nh_texte">
				<p>Paragraphe nh_texte</p>			
				<p>Petit paragraphe supplémentaire pour test</p>			
				<p>Et encore un petit paragraphe supplémentaire pour test</p>
		
			</div>
			
			<div id="nh_photo">
				<p>Paragraphe nh_photo</p>
			</div>
		</section>
	</body>


CSS

html
{
	color: rgb(150, 150, 150);
	text-align: center;
}

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

p
{
	background-color: blue;
}

#snh
{
	background-color: rgb(100, 100, 100);
	width: 100%;
	height: 500px;
}

#nh_texte
{
	display: inline-block;
	background-color: black;
	width: 450px;
	height: 500px;
}

#nh_photo
{
	display: inline-block;
	background-color: red;
	width: 450px;
	height: 500px;
}
Modérateur
Bonjour,


Je n'ai pas testé mais je pense savoir d'ou ça vient. Tu peux rectifier le tir avec la propriété vertical-align qui va positionner verticalement tes inline-block l'un par rapport à l'autre. Vertical-align:top les alignera totu les deux par rapport à leur top.

#nh_texte
{
	display: inline-block;
	vertical-align:top; /* ici */
	background-color: black;
	width: 450px;
	height: 500px;
}
#nh_photo
{
	display: inline-block;
	vertical-align:top; /* et là */
	background-color: red;
	width: 450px;
	height: 500px;
}


J'anticipe un peu au cas où, tu rencontreras certainement le problème des espaces entres les block : http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

Bon weekend !
Modifié par _laurent (11 Apr 2015 - 10:41)
Merci _laurent,

J'avais en effet réussi à placer les blocs correctement avec vertical-align top; mais j'aimerais comprendre le pourquoi de ce placement.

L'inspecteur d'élément ne montre aucune sortie des <p> du bloc de gauche, hors le positionnement du bloc de droite laisse penser le contraire.

J'ai consulté le lien que tu m'as indiqué mais n'y trouve malheureusement aucune explication Smiley decu

J'espère d'autres pistes et si de mon côté je trouve, je l'indiquerai ici.
Modérateur
Ah c'était pour comprendre pas pour régler le probleme ?

La propriété vertical-align est par défaut en baseline : http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Autrement dit et si j’interprète bien les block vont aligner leur baseline == "ligne de base" == dernière ligne (c'est un concept dont j'arrive pas à trouver une définition précise sur le net pour bien t'expliquer dsl...).
Or, ton premier bloc à plusieurs lignes (avec ou sans <p>, teste avec juste du texte sur plusieur lignes) donc les "baseline" de chaque block ne sont pas alignées (le premier bloc a une baseline à la dernière ligne et le second bloc a la première ligne). Les block alignent leur baseline et sont donc décalés.

Tu peux aussi voir que si tu met le même nombre de ligne dans chaque bloc ils seront bien alignés.
De nouveau merci _laurent,

C'était bien évidemment pour régler le problème, chose faite avec le vertical-align: top;, mais également pour comprendre ce comportement qui pour moi était étrange - les deux blocs étant bien distincts.

J'ai bien compris ton explication pour laquelle je te remercie. Cela dit, j'ai du mal à concevoir ce principe dans la logique. Je vais m'y faire Smiley smile

En tout cas, bien vu pour l'alignement correct avec un nombre identique de lignes dans chaque bloc.
Sujet clos
Aller à