Question sur les colonnes factices

Bonjour tout le monde,

Voilà, je suis entrain de faire un design où on a besoin d'une zone à deux colonnes qui s'étirent l'une et l'autre par rapport au contenu de l'autre ou l'une

Après de nombreux tests (le coup du height 100%...qui marche plutôt pas mal d'ailleurs), j'ai rencontré quelques soucis avec Firefox et j'ai besoin (envie) que ce soit compatible avec les 2 navigateurs.

Bref, je me suis finalement penché sur la solution des colonnes factices. Ca marche très bien, MAIS je fais en sorte que tout le site ait des tailles en em pour l'accessibilité et faire propre.

Du coup, quand je fais mon test habituel d'augmenter la taille de la police dans mon navigateur, je vois bien que l'image en background ne suit pas, et l'affiche n'est plus joli.

Avez-vous déjà plancher la dessus? Si oui, je suis interessé par votre expérience.

Merci d'avance...
Modifié par frodum (29 Aug 2008 - 12:04)

frodum a écrit :
(le coup du height 100%...qui marche plutôt pas mal d'ailleurs)

Il n'y a pas de «coup» du height: 100%. Il y a une gestion des hauteurs en pourcentages qui répond à des contraintes assez strictes.

frodum a écrit :
MAIS je fais en sorte que tout le site ait des tailles en em pour l'accessibilité et faire propre

Si tu parles de tailles de texte en EM, c'est très bien. Si tu parles de dimensions (hauteurs et largeurs) en EM, et surtout de largeurs en EM, eh bien c'est très probablement une connerie. (Car inutile et difficilement gérable.)

frodum a écrit :
je vois bien que l'image en background ne suit pas

Euh... ben oui, il n'est écrit nulle part qu'une image de fond en CSS suit la largeur de l'élément auquel elle est appliquée.

Mon conseil: revoir le design.

Florent V. a écrit :

Il n'y a pas de «coup» du height: 100%. Il y a une gestion des hauteurs en pourcentages qui répond à des contraintes assez strictes.

Ok. C'était pour ne pas rentrer dans les détails

Florent V. a écrit :

Si tu parles de tailles de texte en EM, c'est très bien. Si tu parles de dimensions (hauteurs et largeurs) en EM, et surtout de largeurs en EM, eh bien c'est très probablement une connerie. (Car inutile et difficilement gérable.)

Je parle des deux effectivement. Je me force à le faire pour le texte. Je considère maintenant que c'est une obligation quand je réalise des pages web. Redimensionner le texte dans des conteneurs "taillés" en px, donne des effets pas jojo. Donc je m'efforce de me mettre à la place d'une personne mal voyante qui, en agrandissant la police, voit tout le site s'agrandir (comme un zoom). Je te l'accorde c'est difficilement gérable, mais quand il s'agit d'un design pas trop compliqué, au moins j'essaie et je vois ce que ça donne.

Florent V. a écrit :

Euh... ben oui, il n'est écrit nulle part qu'une image de fond en CSS suit la largeur de l'élément auquel elle est appliquée.

Oui, mais je me demandais si des pistes avaient été étudiées en ce sens, car peu de personne en parle.

Florent V. a écrit :

Mon conseil: revoir le design.

Le design est pas trop compliqué en fait: header, 2 colonnes, footer.
Je pense fixer la largeur du site (donc pas em) pour éviter cet effet.

En tout cas, merci pour la réponse rapide.

Il y a peu, je pensais que tout était possible en web (JS + DOM + CSS + HTML). Je m'aperçois de plus en plus que si l'on souhaite faire propre et accessible, il faut bien penser son design sous peine de se confronter à des problèmes insurmontables. Ou alors, il faut faire des concessions.
Avec l'expérience, on doit réussir à anticiper ce genre de problématique je présume.
Modifié par frodum (29 Aug 2008 - 14:25)

frodum a écrit :
Donc je m'efforce de me mettre à la place d'une personne mal voyante qui, en agrandissant la police, voit tout le site s'agrandir (comme un zoom).

Les personnes non voyantes qui ont besoin d'un zoom très important utilisent des logiciels dédiés appelés loupes d'écran.
De plus, à l'heure où les principaux navigateurs proposent un zoom homothétique (zoom en hauteur et largeur du design et du contenu), «simuler» ce zoom avec des largeurs en EM me semble particulièrement inutile.

frodum a écrit :
Redimensionner le texte dans des conteneurs "taillés" en px, donne des effets pas jojo.

Il n'y a généralement pas à «tailler» les conteneurs en pixels, mis à part, parfois, pour la largeur. Pour les hauteurs, on travaillera en height: auto (par défaut) autant que possible. Pas besoin d'utiliser des PX ou EM ou autre unité, car on laisse le contenu (en taille «normale» ou agrandie) dicter la hauteur des éléments.

frodum a écrit :
Oui, mais je me demandais si des pistes avaient été étudiées en ce sens, car peu de personne en parle.

Il y a des bidouilles possibles avec l'élément IMG en HTML, et du CSS, mais ça ne rend pas vraiment bien. De manière générale, les navigateurs ne sont pas capables de rééchantillonner les images de manière décente, comme le feraient des logiciels dédiés à l'édition d'images. Donc on évite ce genre de bidouille, et on travaille:
- soit avec un design fixe (largeur en pixels, extensibilité en hauteur);
- soit avec un design fluide (largeur en pourcentages par exemple, et extensibilité en hauteur aussi), en prévoyant la manière dont les images de fond se placeront (centrées, alignées à gauche ou à droite, etc.), et en jouant sur des images répétées ou des images fondues vers une couleur unie.

frodum a écrit :
Il y a peu, je pensais que tout était possible en <quelque chose>.

Ha ha.

frodum a écrit :
Avec l'expérience, on doit réussir à anticiper ce genre de problématique je présume.

Tout à fait. On apprend aussi à arbitrer entre divers objectifs.

Tu peux peut-être éviter la méthode des colonnes factices en adaptant ce tuto d'Alsacréations. La partie sur "Quatre colonnes fluides de même hauteur centrées horizontalement" pourrait t'aider.

Merci pour vos réponses.

Osbern > Merci pour le lien, je vais aller étudier cela.