28172 sujets

CSS et mise en forme, CSS3

[Résolu] Blocs harmonieusement répartis sur une ligne

Bonjour à tous,

[EDIT : J'ai rajouté une architecture basique du code que je vise (basé sur la proposition d'Heyoan)]

Utilisateur fréquent d'Alsacréations, c'est la première fois que je ne trouve pas la réponse à ce que je cherche, d'où ma venue sur le forum. Mon problème est le suivant :

J'ai une page contenant plusieurs blocs ayant tous une largeur fixée, tous la même (200px). Je souhaite mettre mes blocs les uns à la suite des autres, en en mettant autant que possible par ligne (par exemple avec un float:left;, ça marche).

Ce que je souhaite en plus (et c'est ça que je n'arrive pas à faire), c'est que mes blocs soient disposés harmonieusement sur la ligne : si la fenêtre fait 700px (par exemple), je souhaite avoir 3 blocs de 200px par ligne, avec disons 25px de vide à gauche du premier, 25px entre chaque bloc puis 25 px à droite du dernier (3*200+4*25=700). De même, s'il n'y a pas la place de mettre deux blocs par ligne, je voudrais que tous les blocs soient centrés.

En bonus, j'aimerais que si la dernière ligne n'est pas pleine (deux blocs alors qu'on pourrait en mettre 3 par exemple), j'aimerais que les blocs qui sont là s'alignent sous ceux du dessus.

Pour info, chaque bloc contient une photo plus une légende en dessous.

J'ai pensé à l'attribut display:table-cell; mais le tutoriel qui en parle me laisse penser qu'il faut que le nombre de colonnes soit fixé par avance, ce qui est l'exact contraire de ce que je cherche ! Smiley eek

Merci d'avance ! Smiley smile 


<html>
<head> 
<title>Test</title> 
<style type="text/css" media="screen"> 
#global { 
    width: 80%; 
    padding: 10px 0; 
    text-align: center; 
    border: 1px solid #000; 
} 
 
#global div { 
    width: 200px; 
    display: inline-block; 
    vertical-align: top; 
    border: 1px solid #000; 
    margin: 10px; 
}
</style> 
</head> 
<body> 
<div id="global"> 
    <div> ... </div> 
    <div> ... </div> 
    <div> ... </div> 
    <div> ... </div> 
    <div> ... </div> 
    <div> ... </div> 
</div> 
</body> 
</html>

Modifié par BGT (05 Mar 2010 - 20:09)
Hello et bienvenue,

là tout de suite je ne vois pas trop comment faire simplement pour le margin mais tu pourrais partir sur ça :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
#global {
	width: 700px;
	padding: 10px 0;
	text-align: center;
	border: 1px solid #000;
}

#global div {
	width: 200px;
	display: inline-block;
	vertical-align: top;
	border: 1px solid #000;
	margin: 10px;
}

</style>
</head>
<body>
<div id="global">
	<div>
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari?</p>
	</div>
	<div>
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari?</p>
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari?</p>
	</div>
	<div>
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari?</p>
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari?</p>
	</div>
	<div>
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari?</p>
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari?</p>
	</div>
	<div>
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari?</p>
		<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari?</p>
	</div>
</div>
</body>
</html>
Lire http://covertprestige.info/css/inline-block/ pour la compatibilité.
Modifié par Heyoan (05 Mar 2010 - 01:40)
Merci ! Smiley biggrin

En fait, ça c'est très proche de ce que j'ai pour l'instant (j'aurais dû poster le code que j'ai déjà...). Un petit détail cela dit : quand je dis "si la largeur est 700px" je veux dire " si la largeur de la fenêtre de l'utilisateur fait 700px". C'est-à dire que je ne veux pas fixer 700px comme tu le fais dans ton exemple (sinon, je calcule les margin nécessaires et le tour est joué), mais que &#462; s'adapte automatiquement au navigateur.
BGT a écrit :
je ne veux pas fixer 700px comme tu le fais dans ton exemple.
Alors j'ai envie de dire : retire cette déclaration ! Smiley langue
Hello,

Le type de positionnement que tu demandes est très spécifique (j'en veux pour preuve que pour le définir il faut plusieurs phrases et mentionner le type de rendu que l'on attend dans telle ou telle situation, pour la dernière ligne de contenu, etc.), et rien n'est prévu en CSS 2.1 pour obtenir exactement ce rendu.

- utiliser float ne te permet pas de centrer ou d'espacer dynamiquement tes éléments;
- utiliser display:table-cell (ou un tableau de mise en page) oblige à connaitre à l'avance le nombre d'éléments à afficher par ligne pour coder des lignes de N cellules;
- utiliser display:inline-block et sur le conteneur un text-align:justify se rapproche de ce que tu souhaites, mais les espacements créés par la justification ne seront pas pris en compte pour la dernière ligne, ce qui casse l'effet si la dernière ligne n'est pas complète.

En CSS3, il y a peut-être un peu d'espoir, ça serait à explorer. Je dis ça sans garantie, et par ailleurs je doute que la ou les propriétés concernées soient largement supportées.

La solution consisterait donc, je pense:
- à utiliser float et une marge pour un espacement «par défaut»;
- puis à rajouter une surcouche JavaScript qui va calculer la largeur, et réattribuer des marges aux éléments flottants pour obtenir une répartition harmonieuse.
Merci Florent pour cette réponse détaillée. Je cherchais en fait à savoir si c'était faisable simplement en CSS. Je vais essayer ta solution avec display:inline-block et text-align:justify.

En fait, je trouve que le comportement que je demande est relativement naturel et je me disais qu'il existait sans doute un moyen de le rendre en CSS. Je souhaite avoir un code léger donc je vais éviter de passer par Javascript, en étant un peu moins strict sur mes exigences puisque ça a l'air nécessaire !
Bonjour,

Le text-align justify , ne centre pas réellement comme te l'indique Florent et une ligne 'incomplete' se calera dans le sens d'affichage de ta page , c'est donc okay si cette derniere ligne non centrée te convient.

Si le centrage l'emporte sur tes marges de 25px , alors tu peut aussi te contenter d'un text-align:center avec des marges laterales en pourcentage sur tes elements formaté en inline-block.

Si tu conserve une marge de 25px laterales et le text-align:center ; cette marges devient alors l'espace minimale entre tes elements et leur conteneur parent . la marge entre chacun des éléments, elle, restera fixée a 25px.

Une derniere chose peut aussi jouer dans l'écart de ces éléments selon l'indentation de ton code et les navigateurs : c'est la taille de police et le letter-spacing par défaut .

Si un centrage naturel et fluide dans le flux est facile a obtenir , l'écart entre tes éléments et leur bloc parent n'est pas gérable .

GC
Bon, finalement voilà pour quoi j'ai opté. C'est en gros la solution de gc-nomade :


<html>
<head> 
<title>Test</title> 
<style type="text/css" media="screen"> 
#global { 
    width: 80%; 
    padding: 0;
    margin: 0;
    text-align: center; 
    border: 1px solid #000; 
} 
 
#global div { 
    width: 200px; 
    display: inline-block; 
    vertical-align: top; 
    border: 1px solid #000; 
    margin: 0 10px; 
}
</style> 
</head> 
<body> 
<div id="global"> 
    <div> ... </div> 
    <div> ... </div> 
    <div> ... </div> 
    <div> ... </div> 
    <div> ... </div> 
    <div> ... </div> 
</div> 
</body> 
</html>


Merci !
Sujet clos
Aller à