28172 sujets

CSS et mise en forme, CSS3

Adapter une largeur à un nombre d'occurrence.

Salut,

Voila, j'ai sur mon site une div d'une largeur fixe, contenant une liste d'un à trois éléments.
Il s'agit des résumés d'articles, puisés dans une table SQL, affichés sous la forme de trois, deux ou une seule colonne(s).
J'aimerais que, quoi qu'il arrive, la totalité de la largeur de ma division contenante soit utilisée.

Y'a t'il une astuce pour gérer cela en CSS?
Ou bien dois je par exemple créer une class par nombre d’occurrence, et appeler celle qui va bien a la construction de ma page?


Merci Smiley cligne
Salut,

Pourrais-tu donner ton code html stp pour pouvoir donner une réponse avec plus de précision ?
Salut kinkaz,

Je vais tenter de te faire ça !
Voici l'HTML généré pour une liste contenant 3 occurences :


<div class="menu articles">
	<h2>Derniers articles</h2>
	<ul>
		<li class="hentry_list">
			<h3 class="entry-title"><a>Titre</a></h3>
			<div class="introduction entry-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (...)
			</div>
		</li>
		<li class="hentry_list">
			<h3 class="entry-title"><a>Titre</a></h3>
			<div class="introduction entry-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (...)
			</div>
		</li>
		<li class="hentry_list">
			<h3 class="entry-title"><a>Titre</a></h3>
			<div class="introduction entry-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (...)
			</div>
		</li>
	</ul>	
</div>



Quelques brides de CSS :


.hentry_list	{ width: 19em;  float : left; }



Ce qui me donne effectivement 3 colonnes de 19em de largeur.
Mais j'aimerais, lorsque je n'ai que deux articles, avoir par exemple deux colonnes de 29em de large.
Et enfin une largeur de 100% lorsque je n'ai qu'un seul article.

Je ne sais pas s'il est possible de faire ça en full CSS ou si je dois créer trois classes différentes, à appeler selon le nombre d'articles retournés.
OK, alors... Si tu sais tes entrées ne comporteront que du texte, tu peux opter pour la méthode en display: table;
De cette manière, chaque entrée se comporte comme une cellule et donc prend la largeur que tu as donnée à la table. S'il n'y a que 2 éléments li, cela redimensionne automatiquement en 50% - 50% de largeur, s'il y en a 3, en 33.3% enfin le concept est là Smiley smile

Ton code CSS ressemblerait à ceci : 


.menu.articles {
display: table;
width: 960px;
}
h3 { padding: 5px; }
ul { display: table-row; } /* alignement avec l'élément h3 */
.hentry_list	{ 
display: table-cell; 
padding: 10px;
overflow: hidden;
}


Note : la propriété display table fonctionne partout sauf sur IE<8. Pour les versions 6 et 7, tu peux utiliser ce genre de choses : http://tanalin.com/en/projects/display-table-htc/
Modifié par kinkaz (07 Mar 2012 - 17:16)
a écrit :
Si tu sais tes entrées ne comporteront que du texte, tu peux opter pour la méthode en display: table;


Mes entrées sont susceptibles de contenir des images (mais dont la taille est connue), est ce embêtant?
C'est embêtant dans le sens les images risque d'être coupées si elles sont plus larges que la colonne... Et ceci à cause du overflow: hidden (c'est justement pour éviter que le contenu déborde de sa colonne).

Il faut donc soit que tu prévoies que la largeur maximum de l'image soit la largeur de la colonne la plus petite (ici 33.3%), ou alors que via php tu redimensionnes l'image lors de l'envoi !
Modifié par kinkaz (07 Mar 2012 - 17:30)
Toutes mes images sont de taille inférieur à la moitié d'une colonne lorsqu'il y en a 3 normalement. Ca ne devrait pas poser de problème!

Par contre, j'ai remarqué que les largeurs des colonnes ne sont pas égales, ce qui n'est pas top. =o
Un exemple par l'image :

http://marion-maxime.com/Divers/3_colonnes.jpg

Une idée du pourquoi du comment?
Est-ce du au fait que le contenu de la colonne de gauche est sensiblement plus court que les autres?
C'est lié à ça oui, tu peux rajouter un min-width: 33%; au .hentry_list et normalement tout devrait rentrer dans l'ordre...
Sur IE il faut voir pour une technique qui rend le min-width fonctionnel correctement (ce n'est pas toujours le cas)
Yop kinkaz,

Effectivement, ça marche pas mal avec min-width. Sauf sous IE (version 9).
Par contre, en remplaçant min-width par width, et en lui affectant une grande valeur, ça fonctionne aussi sous IE, et ce même si la largeur spécifiée pour une seule colonne est aussi grande que le conteneur.

Est-ce bon à savoir ou bien un comportement bizarre, qui marche dans ce cas, mais qui reste à éviter?
Modérateur
Bonjour, si tu mets width: 3000px sur chaque colonne, et que le tableau fait 300px, elles ne feront que 100px au final, c'est normal. Dans un affichage de tableau, une ligne, colonne ou cellules ne peuvent dépasser. Le moteur doit donc réduire la taille et égalise.

Width: 33.3% fonctionne très bien! en même temps ça n'apporte rien d'utiliser un min-width dans ce cas, vu que les colonnes ne pourraient pas être plus grandes...

EDIT: en revoyant précisément ta demande, il faut justement tirer parti de cet effet en mettant width: 100%, tu t'assures que la largeur soit toujours égale quel que soit le nombre de colonnes.
Modifié par kustolovic (08 Mar 2012 - 18:27)
Salut kustolovic,

Effectivement, utiliser un simple "width" avec une valeur de 33% fonctionne.
Je pensais que j'allais être embêté s'il ne devait apparaitre que deux ou une seule colonne dans ma table.
Mais apparemment non, lorsque je sors 2 articles, j'ai bien deux colonnes égales sur toute la largeur de ma table, outrepassant les 33%.
Sujet clos
Aller à