Les colonnes factices...

Salut à tous !

Avez-vous déjà fouillé dans les
gabarits Alsacréations ?
J'ai remarqué que certains gabarits, comme le gabarit 10 utilisent la méthode des "colonnes factices".
Cette méthode consiste à faire prendre à un bloc (menu en général) de prendre la même taille qu'un autre bloc (bloc de contenu en général).
Le mieux pour comprendre, c'est d'aller voir l'exemple ci-dessus.
Malheureusement, cette méthode utilise une image de fond, ce qui n'est pas pratique si on veut modifier les couleurs.
Pour voir une autre méthode toute simple et
mon exemple en action, allez regarder directement mon exemple !

Alors, qu'en pensez-vous ?

Bonjour,

Ta solution ne fonctionne absolument pas sous IE8 (et je n'ose même pas essayer sous IE6)...

Accessoirement, d'autres solutions sont détaillées dans l'article : Comment faire des blocs de même hauteur ?

Bonjour,

Laurie-Anne> ça fonctionne sous IE6 ... Je te l'ai toujours dit t'aurais dû garder ton IE6 soi(t)-disant tout pourri plutôt que d'embêter tes collègues pour avoir IE8

Nan de mémoire, IE8 veut juste un préfixe -ms (-ms-filter) comme le W3C le demande depuis 10 ans ... (*)

zatuxa> euh oui OK, ça fonctionne dans ce cas précis.
Mais il faut que le navigateur supporte les gradients CSS3 donc ce n'est pas aussi universel que l'image de fond (bon là on parle d'Opera chépasquelleversion, de Fx3.0 et vieux Webkit c'est acceptable), que ce fond soit graphiquement un dégradé ce qui est BEAUCOUP moins souple qu'une image de fond (et pour IE tu n'as droit qu'à 2 couleurs unies pour les 2 colonnes, pas de dégradé avec N étapes).
AMHA tant qu'à utiliser les gradients CSS3, autant utiliser display: table-cell; par la même occasion ... et une alternative toute simple pour IE<9

(*) par contre c'est pas centré, m'enfin c'est pas le sujet ici
Modifié par Felipe (13 Mar 2011 - 19:59)

Aïe, IE...
Je l'avais oublié.
Je viens de tester sous IE9, le dégradé a l'air de marché grâce au filter.
Mais beaucoup de bugs d'affichages, je ne comprends quand même pas : pourquoi ça marche partout sauf sous IE ?

Pour l'instant, il est clair que l'image de fond est la méthode la plus "accessible".
Même si à la place on peut quand même facilement manipuler les background-color (le dégradé, c'est du gadget).

Felipe> C'est centré sur Firefox, Opera, Chrome, sauf sous IE, effectivement.

Bonjour,

Utilisation des dégradés CSS3 intéressante, mais pas vraiment utile. Pour un résultat plus compatible et relativement facile à obtenir, on pourra utiliser display:table-cell (et tant pis pour cette antiquité d'IE7).

Deux remarques:
- La page n'a pas de Doctype. Allons bon...
- La page ne déclare pas le codage de caractères, et à le mauvais gout d'être codée en ISO-8859-1. Dans mon navigateur configuré avec de l'UTF-8 par défaut, c'est tout cassé.