[Résolu] Ajuster la largeur d'un conteneur au contenu

Bonjour,

certainement une question récurente mais à laquelle je n'ai toujours pas trouvé de solution.

Soit un conteneur avec un nombre quelconque de bloc internes positionné en float:left (des images par exemple). Ces "sous-blocs" sont créé en php depuis un répertoire par exemple). Au bout de 5 images, un saut de ligne est généré normalement et les images suivantes s'affiche à la ligne.

Jusque là, pas de problème.

Le pb vient lorsqu'il y a moins de 5 images en tout (disons qu'il y en a 2). Elles se retrouvent alors "collées" à gauche (normal puisqu'elles sont en float: left).

J'aimerais que la largeur du conteneur soit adapaté au contenu afin de lui affecter des marges automatique pour que l'ensemble soit centré.

Tous mes essais se sont soldés par des échecs et mon conteneur prend, soit toute la largeur disponible, soit un largeur nulle.

Bref, je sèche lamentablement !
Modifié par Ricou13 (24 Apr 2006 - 16:28)

Bonjour Ricou13,

Je pense qu'au lieu de mettre un float: left aux "blocs internes" tu devrais essayer d'en mettre un au bloc conteneur (ou un float: right; selon où tu veux le positionner) avec un text-align: center;

À priori, ton conteneur est un élément de type bloc (je suppose que c'est une div, ou peut-être un paragraphe). Par défaut, un élément de type bloc prend toute la largeur disponible, du moins s'il est en positionnement statique (par défaut).

Pour qu'il ne prenne que la largeur utile :
– bloc en positionnement absolu ;
– bloc flottant ;
– bloc en rendu de type en-ligne (display: inline;).

Pour la troisième solution, c'est surtout une idée comme ça, je ne l'ai pas vraiment testée. Si quelqu'un pouvait confirmer ou infirmer…
Mais bon, des marges automatiques sur un bloc en rendu inline, ça risque d'être pas super utile. Flottant et marges automatiques, j'ai un doute également.

Quoique, avec un conteneur en rendu inline et si le parent du conteneur est en text-align: center, ça devrait se center automatiquement, sans que l'on ait besoin des marges automatiques.

Bonjour blue,

Cela ne marchera pas car si tu mets le conteneur en flottant, il sera, certes, adapté à la largeur du contenu mais il sera positionné à droite ou à gauche mais pas au centre. Il aurait fallut un "float: center"

Un petit dessin valant mieux qu'un grand discours : voici un exemple
(les bordures rouge de la page et bleue du conteneur ne servent qu'à visualiser l'emplacement des blocs)

Le premier conteneur possède 4 images et l'affichage est satisfaisant.
Je voudrais que le second affichage (qui n'a que 2 images) soit centré.

J'ajoute également le code (pour quand je supprimerais l'exemple de mon serveur)

HTML

<div id="page">
	<p>Lorem ipsum dolor sit amet, consectetuer ...</p>
	<br/>
	<p><strong>Affichage de 4 images</strong></p>
	<div class="conteneur"> 
		<a href="#" class="thumblink"><img src="img1.jpg" /><br/>Image 1</a>
		<a href="#" class="thumblink"><img src="img2.jpg" /><br/>Image 2</a>
		<a href="#" class="thumblink"><img src="img3.jpg" /><br/>Image 3</a>
		<a href="#" class="thumblink"><img src="img4.jpg" /><br/>Image 4</a>
		<div style="clear:both"> </div>
	</div>
	<p>Fusce quis elit convallis justo feugiat eleifend. Quisque ... </p>
	<br/>
	<p><strong>Affichage de 2 images</strong></p>
	<div class="conteneur"> 
		<a href="#" class="thumblink"><img src="img1.jpg" /><br/>Image 1</a>
		<a href="#" class="thumblink"><img src="img2.jpg" /><br/>Image 2</a>
		<div style="clear:both"> </div>
	</div>
	
	<p>Fusce quis elit convallis justo feugiat eleifend... </p>
</div>

CSS

	<style type="text/css">
		* { margin:0; padding:0; }
		body { font: 0.8em arial; }
		#page { width:550px; border:1px solid red; margin: 0 auto; padding:20px;}
		.conteneur { 
			border:1px solid blue;
			margin: 20px;
			}
		a.thumblink {
			float: left;
			border:1px solid orange;
			margin: 0.5em 0.8em;
			text-align: center;
			padding: 0.2em;
			text-decoration: none;
			width: 140px;
			color: #000; 
			}
		a.thumblink img {
			border-width: 0;
			}
	</style>

Salut mpop,

Je ne vois pas bien comment appliquer tes 2 premières solutions.
Quant à la troisième, je ne l'ai jamais utilisé.

PS : Si vous avez la barre "Web Developer" sous FF, vous pouvez modifier la feuille de style directement en ligne sur mon exemple.
Trop cool, cette barre

bonjour,

peut-etre qu'un solution "alternative" peut te convenir, regarde la solution proposer par alan dans ce topic.
http://forum.alsacreations.com/topic-4-12639-1-Rsolu-Cherche-solution-Mise-en-page-IE--OK--Pas-FF.html
elle ne te permettra pas de "dimensionner" le conteneur" , mais de centrer son contenu, ... a l'aide de liste.

++

Salut gcyrillus,

effectivement, cela me semble une bonne solution. Je vais me pencher sérieusement sur les "table-cells" et compagnie.

Par contre, je ne comprend pas pourquoi son span.cadre a 2 display à la suite. A moins que l'un d'eux soit ignoré par FF ou IE. J'avais déjà regardé ce type de display, il y a longtemps, mais je crois me souvenir d'être resté sur un échec du fait d'un souci de compatibilité ou aun truc de ce genre.

Salut,

S'il y a deux display, c'est justement pour raison de compatibilité. Display:table-cell;, c'est pour FF et inline-block pour les autres. Et pour IE, il faut appliquer le inline-block uniquement sur un élément inline.

Par rapport à ton exemple, il suffit juste d'ajouter une liste, pas besoin de span ou autre. tu peux appliquer les display sur l'élément A.

Le margin qu'il y a sur a.thumblink n'aura plus d'effet sur Firefox. Il faudra alors utiliser border-spacing sur UL (ou bien sur LI, le résultat sera le même).
Mais attention, il faut les donner (bizarrement) dans le sens inverse: {border-spacing:(horizontal)px (vertical)px;}.

Par exemple, pour

a.thumblink {
	margin: 6px 9px;
}

il faudra

ul { 
	border-spacing: 9px 6px;
}

Pour avoir le même résultat, il faut apparement un border-spacing vertical moins important, comme de 3px

voici un exemple (j'ai repris ta page)
Modifié par Alan (23 Apr 2006 - 09:51)

Bon ben j'allais proposer du display: table; et des choses du genre, mais je vois qu'on m'a devancé

Pour l'utilisation du display: inline;, je pense que ça pourrait être possible pour quelque chose de plus simple (images sans légende, conteneur sans bordure, etc.).
Modifié par mpop (23 Apr 2006 - 11:04)

mpop a écrit :
Bon ben j'allais proposer du display: table;

Salut,
Ce n'est pas incompatible et c'est vrai qu'un display:table + margin:auto serait la meilleure solution pour que la largeur s'ajuste. Mais évidemment pour IE, il y a de bonne chance que ce ne soit pas pour cette décennie..
Modifié par Alan (23 Apr 2006 - 11:27)

Etant donné qu'IE ne connait pas display:table, je me suis amusé à essayer (donc plus par expérience que pour proposer une solution) de centrer le conteneur en float (dont la largeur s'ajuste en fonction du contenu donc)

Avec un positionnement relatif, j'ai décalé le conteneur de 50% (left:50%) et son contenu (UL) dans l'autre sens, de 50% également (right:50%).

Le résultat est visible ICI

Ca marche très bien, mais les problèmes viennent encore d'IE. Si l'élément parent (#page ici) a du padding horizontal, alors ça n'est plus bien centré. Une solution serait alors d'ajouter une marge négative au conteneur. Là ça marche.
Deuxième problème, il semble que si je met LI en float, IE perd la boule. D'après un essai, c'est quand même jouable, mais il faudrait remettre un DIV entre le .conteneur et le liste en partageant différemment les déclarations. Là je n'ai pas utilisé de float pour éviter ce problème.
Enfin, et toujours pour IE, si le conteneur est bien centré, a.thumblink ne l'est bizarrement plus...
Modifié par Alan (23 Apr 2006 - 12:17)

Merci Alan pour tout ce boulot

Au final, pas vraiment de solution en l'absence de support des différentes propriétés utilisées par les différents navigateur ?
On peut peut-être proposer quelque chose de propre et qui se dégraderait gracieusement dans les navigateurs un peu à la traîne ?

Bonjour,

Merci pour vos réponse et spécialement à Alan qui a dû passer du temps pour faire tous ces tests.

J'aurais dû me douter qu'il fallait passer par autre chose que des div pour faire ce genre d'opération mais comme j'utilise les listes à 95% pour des menu, je n'avais pas pensé à m'en servir. Et pourtant, on peut faire des affichages en ligne comme pour une série de float et on peut aligner l'ensemble sur ul.
Tres fort !!!

Je me suis basé sur le premier modèle car, en fait, le conteneur ne servait à rien d'autre qu'à faire ce centrage en adaptant sa largeur au contenu et en le centrant. Je l'ai d'ailleurs supprimé. J'ai donc tripatouiller le code dans tous les sens pour se rapprocher au plus prêt de ma page réélle. J'ai également fais un peu de ménage dans les noms de classe et réorganisé le CSS dans un ordre logique pour plus de clarté.

Voici où j'en suis
Couleurs des cadres : bleu = UL, vert = LI, Orange = A

En mettant la légende dans une balise P, elle se place parfaitement sous l'image.

Mon dernier problème vient du positionnement des li lorsque certains ont un texte plus long que les autres : ils sont alignés vers le bas.
J'ai donc mis un "vertical-align: top" sur les li et c'est nickel sous IE mais c'est une horreur sous FF (c'est le monde à l'envers )

D'ailleurs, on peut voir que les LI (cadres verts) sous FF semble "vides" comme quand on sort le contenu d'une DIV du flux normal.

Bon, ben... la seule solution que j'ai trouvé consiste à mettre une hauteur fixe aux balises A.

Voici le code HTML

	<ul class="thumbs">
		<li><a href="#"><img src="img1.jpg" /><p>Image 1</p></a></li>
		<li><a href="#"><img src="img1.jpg" /><p>Façonneuse B40 acier vernis rouleaux asymétriques</p></a></li>

		<li><a href="#"><img src="img1.jpg" /><p>Image 3</p></a></li>
		<li><a href="#"><img src="img1.jpg" /><p>Image 4</p></a></li>
	</ul>

Et le code CSS

* { margin:0; padding:0; }
body { font: 0.8em arial; }
#page { 
	width:560px; 
	border:1px solid red; 
	margin: 0 auto; 
	padding:20px;
	}
ul.thumbs { 
	text-align: center;
	border-spacing: 10px 10px;	/* Valeurs horizontales puis verticales (?) */
	border: 1px solid blue;
	margin: 20px;
}
ul.thumbs li { 
	display: inline;
	border: 1px solid green;
}
ul.thumbs li a {
	display: table-cell;			/* Pour FF */
	display: inline-block;		/* Pour les autres navigateurs */
	border:1px solid orange;
	margin: 6px 9px;
	text-align: center;
	text-decoration: none;
	width: 140px;
	height: 200px;
	color: #000; 
	padding: 0.2em;
}
ul.thumbs li a img {
	border: 1px solid #a9a9a9;
	}

Bien que ce ne soit pas une solution satisfaisante, elle est acceptable si le nombre de lignes des légendes ne varie pas trop.

Merci

Modifié par Ricou13 (24 Apr 2006 - 16:27)

Ricou13 a écrit :
Bien que ce ne soit pas une solution satisfaisante, elle est acceptable si le nombre de lignes des légendes ne varie pas trop.

Ou si la taille du texte ne varie pas trop… mais là, on n'a aucune prise dessus.

Effectivement. Mais de toute façon, à part un design très épuré, il y a toujours une déformation de la mise en page qui apparait vers la troisième ou quatrième augmentation de police.
Modifié par Ricou13 (24 Apr 2006 - 21:37)