28173 sujets

CSS et mise en forme, CSS3

Bonjour,
j'ai un problème de float de blocs car ceux ci prennent des hauteurs différentes suivant leur contenu (données de BDD). Je positionne mes blocs sur 3 colonnes et si, par exemple, le bloc 2 est plus haut que le 3, le 4 vient se caser sous le 3 (alors qu'il devrait se loger sous le 1)
Si je mets une hauteur tenant compte d'un maximum de contenu cela fait du "vide" s'il le contenu est faible.
Comment faire pour qu'un bloc tiennent compte de la hauteur de son "voisin" de gauche?
Merci....
Salut,

Ton explication est pas super claire pour t'aider concrètement, une page en ligne serait bien plus explicite, ou au moins une page en ligne.

Je pense qu'il faut que tu crée ta structure verticale, et dans chaque élément vertical tu dispose ensuite tes différents éléments lorsqu'il y'en a. Et ne pas tout faire flotter lorsque ce n'est pas nécessaire.
Modifié par Mikachu (03 Mar 2007 - 15:43)
Les flottants ne sont pas prévus au départ pour réaliser des structures en colonnes. Surtout sur trois colonnes et plus. C'est théoriquement faisable (en jouant sur les float et les clear), mais globalement c'est la merde.

La solution la plus simple à mettre en oeuvre : grouper les blocs par trois dans un bloc conteneur non flottant. On s'arrangera pour que ce conteneur non flottant vienne contenir ses trois enfants flottants. Voir à ce sujet :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Si en plus on veut que les trois blocs d'une même ligne aient tous la même hauteur, dépendant du bloc ayant le contenu le plus important, deux solutions :
1. avec la technique des colonnes factices
En gros, on adapte la solution ci-dessus on attribuant une image de fond répétable verticalement pour dessiner les cadres des colonnes. Pour le détail :
http://pompage.net/pompe/colonnesfactices/

2. avec un tableau
Ben voilà, on fait un tableau unique pour tous les blocs, trois cellules par ligne, etc. Et oui, c'est globalement accessible.
il faut peut être que je vous précise que mes blocs ne sont pas distincts.
C'est un bloc unique qui se répètent. Ce sont les informations contenues dans ce bloc qui peuent varier. Les données, issues d'une BDD, sont plus ou moins importantes et c'est ce qui fait varier la hauteur du bloc
Frank_85 a écrit :
il faut peut être que je vous précise que mes blocs ne sont pas distincts. C'est un bloc unique qui se répètent.

Heu... je vois pas trop de quoi tu veux parler, là... Il n'est pas possible d'insérer les informations venant de la base de donnée dans des éléments HTML (par exemple p ou div) distincts ? Tu ne peux pas générer quelque chose d'aussi simple que ceci :
<div>... premier contenu ...</div>
<div>... deuxième contenu ...</div>
<div>... troisième contenu ...</div>
?

Smiley sweatdrop