28172 sujets

CSS et mise en forme, CSS3

[Résolu] Un problème de colonnes : contexte de formatage ?

connecté
Bonjour,

Je suis en train de mettre au point un système de grilles et de colonnes. Ma grille (que j'avais mis au point il y a déjà un moment mais que je viens de recoder en mobile-first) est terminée : Fluid Grid Layout. Elle est à la fois rigide et responsive.

Un autre système de placement, que j'ai dénommé .colomns, se démarque du premier dans le sens ou il s'agit d'un système en display:table-cell et/ou pourcentage. C'est celui-ci qui me pose problème :

J'aimerais qu'un élément enfant de .columns puisse être équivalent en largeur à deux éléments par défaut ou plus si besoin. J'ai donc créé des classes (.c2, .c3, .c4...) à apposer sur les éléments enfants concernés (classe .c2 pour 2 éléments de large, etc).

Cette solution fonctionne très bien au sein d'un formulaire (très exactement au sein de l'élément form) mais je ne peux pas reproduire ce comportement à l'intérieur d'une simple div. J'ai donc essayé de récupérer toutes les caractéristiques css de l'élément form pour les apposer sur la div... sans résultat.

Voici une page d'exemple (édit, exercice corrigé) : .columns

Si vous avez une solution je suis preneur et, d'avance, vous en remercie.
Modifié par Olivier C (02 Jun 2015 - 07:10)
Salut,

Est-ce que ça ne viendrait pas du fait qu'input sans parent form n'a pas de sens et que du coup le comportement de cette balise est anormal ?

EDIT : non ça doit pas être ça...
Modifié par MatthieuR (30 May 2015 - 23:05)
connecté
Non. On pouvait effectivement se poser la question, étant donné que les inputs sont des éléments injectés. Mais j'avais déjà essayé de les remplacer par des divs (+ width:100%) : même résultat.

J'ai gardé les inputs dans le deuxième exemple afin de bien démontrer que le même code, mais pas dans le même élément parent, n'a pas le même comportement, c'est tout.

Pour le deuxième exemple, je cherche à reproduire le comportement du premier exemple à partir d'une modification de l'élément parent, ce qui me permettrait de garder la même classe .columns dans n'importe quel contexte (j'aime bien la logique OOCSS).
Modifié par Olivier C (31 May 2015 - 09:25)
Salut,

Alors ça, c'est vraiment un très étrange phénomène... J'ai tenté quelques trucs (notamment avec overflow pour forcer un contexte de formatage), mais rien de concluant.
connecté
Manumanu a écrit :
Alors ça, c'est vraiment un très étrange phénomène...

Tout a fait. Je pense que la solution est de l'ordre d'un vrai défi.
Effectivement c'est assez particulier, ça serait cool d'avoir l'explication théorique de ce phénomène, Raph, si tu nous lis ^^
connecté
C'est bon, j'ai trouvé : il fallait déclarer un "width: 100%" sur [class^="columns"] > *.

Donc sur les éléments enfants, et non pas sur l'élément parent comme je le croyais de prime abord. Ça semble simple après coup... mais j'ai bien cogité.

Exercice corrigé : Columns

Sujet résolu.
Modifié par Olivier C (01 Jun 2015 - 19:38)
connecté
Oui. À la base, il n'est pas nécessaire de définir une largeur pour les cellules d'un tableau en div.table-layout: fixed... sauf si l'on veut, comme moi, ajouter des classes proposant des règles définissant le double (ou plus) de cette largeur.
Sujet clos
Aller à