28173 sujets

CSS et mise en forme, CSS3

Hello,

J'ai 3 colonnes (div) positionnées dans un autre div.
Je voudrais que sa dimension s'ajuste en fonction de la longueur des différéntes colonnes, i.e. qu'il ait toujours une longueur égale à la longueur de la colonne la plus longue.

J'ai réussi à positionner mes colonnes, mais le bloc ne s'adapte à la longueur que pour la colonne qui n'est pas définie en absolute.

http://apassant.net/tmp/cols.php

Comme je ne suis pas sur d'avoir utilisé la bonne démarche pour construire mes colonnes, s'il y a des choses à changer, n'hésitez pas (D'ailleurs, je n'ai pas réussi à faire afficher mes colonnes dans l'ordre ou j'ai placé mes div dans le code, c'est possible ?)

Merci du coup de main
terraces a écrit :
D'ailleurs, je n'ai pas réussi à faire afficher mes colonnes dans l'ordre ou j'ai placé mes div dans le code, c'est possible ?

En positionnant les trois blocs en float: left; c'est possible.

Pour la question des blocs en positionnement absolu, il faut savoir que le positionnement absolu fait sortir l'élément du flux normal de la page. C'est à dire que les autres éléments se comportent comme si les éléments en positionnement absolu n'étaient pas là. Ce n'est donc pas un type de positionnement à utiliser à la légère.

Pour un exemple de structure en largeur variable avec trois colonnes : voir ici.

Pour la question des colonnes de même hauteur, il existe un tutoriel sur la question dans les tutoriels d'Alsacréations. Mais il faut savoir qu'il ne peut s'agir que de bidouillage : en effet, tes trois blocs ne sont pas des cellules de tableaux, et ne sont pas liés entre eux. Tu auras beau les placer côte-à-côte, cela ne leur dit pas qu'ils doivent tenir compte de la hauteur des uns et des autres.
mpop a écrit :

En positionnant les trois blocs en float: left; c'est possible.

Pour la question des blocs en positionnement absolu, il faut savoir que le positionnement absolu fait sortir l'élément du flux normal de la page. C'est à dire que les autres éléments se comportent comme si les éléments en positionnement absolu n'étaient pas là. Ce n'est donc pas un type de positionnement à utiliser à la légère.

Pour un exemple de structure en largeur variable avec trois colonnes : voir ici.


Merci, j'ai changé ma position absolute par des floats à droite et à gauche en suivant ton lien.
Par contre avec 3 float:left;, je conserve bien l'ordre, mais je perds logiquement mon "contour".

Je vais regarder les bidouilles pour essayer d'adapter ça à la taille, merci. (c'est bien à celui-la que tu faisais référence ? http://tutorials.alsacreations.com/cellules/ )
Je n'arrive pas à faire tourner les hacks proposés sur mes colonnes, la seule solution que j'ai trouvé est d'utiliser un table à la place du div container et lui assigner une longueur de 100%.

Si j'utilise les mêmes propriétés de longueur en gardant le div, celui-ci ne descend pas jusqu'en bas des colonnes.

Ca semble correct comme approche ? (J'aurai préféré sans tableau, mais bon ...)
terraces a écrit :
Si j'utilise les mêmes propriétés de longueur en gardant le div, celui-ci ne descend pas jusqu'en bas des colonnes.

Tu veux dire que les flottants étant… flottants, ils dépassent du bloc conteneur ? Si c'est le cas, alors c'est tout à fait logique. Il faut dire au bloc conteneur de venir englober les flottants.
Cf : éléments flottants qui dépassent de l'élément parent.

Tiens, je connaissais pas la version anglaise des tutoriaux d'Alsacréations. On en apprend tous les jours.