27500 sujets

CSS et mise en forme, CSS3

Pages :
(reprise du message précédent)

Alan a écrit :
Je crois qu'avec des dimensions en EM et en laissant un peu de jeux, on peut facilement faire face à l'augmentation de la taille du texte. (mais c'est problématique de donner une hauteur si l'on ne sait pas à l'avance la longueur du texte...)

Pour s'adapter à la longueur du texte dans un bloc de hauteur fixe (en EM, par exemple), il y a : overflow:auto. Smiley cligne
Petit test de cette solution :
http://web.covertprestige.info/divers/ajblog/exo1c.html

Alan a écrit :
Ça serait quand même plus simple avec une image !

Oui, c'est d'ailleurs un truc à retenir pour ce genre de cas : mettre une image en encart entre deux colonnes peut permettre de briser un peu les lignes du design, ce qui est parfois bien utile. Smiley smile

Alan a écrit :
Je n'ai pas très bien compris dans ton exemple le rôle de la déclaration visibility:hidden et de la couleur verte pour le fond et le texte : le fait que #encart2 vienne le recouvrir n'est pas suffisant ?

Si si. La couleur verte doit être un reste des tests de mise en place de cette solution. Quant au visibility: hidden, c'est une « sécurité » intéressante en cas de problème de positionnement (on ne verra pas le contenu en double), et ça évite d'avoir un contenu en double avec certains agents-utilisateur (certains lecteurs d'écran qui l'interprètent à tort).
Florent V. a écrit :

Pour s'adapter à la longueur du texte dans un bloc de hauteur fixe (en EM, par exemple), il y a : overflow:auto. Smiley cligne

ah oui, c'est vrai que j'aurais dû le mettre Smiley confused
Florent V. a écrit :

et ça évite d'avoir un contenu en double avec certains agents-utilisateur (certains lecteurs d'écran qui l'interprètent à tort).

bonne idée, je n'y avais pas pensé
Modifié par Alan (18 Jan 2007 - 15:42)
Tant qu'à faire, je propose également mon correctif :

Pour rappel, il fallait réaliser ceci :
upload/2043-un-joli-blo.png

Avec les contraintes suivantes :
a écrit :
Vous avez droit à 5 conteneurs neutres (div) au maximum (n'oubliez pas il y a un footer Smiley cligne ). Vous avez droit à 7 ids d'objets différentes, les classes ne sont pas autorisées. Le code html et le CSS doivent être le plus propres possibles et bien sur Valides.


Bon, laissons un peu de côté les contraintes. Plutôt que de compter les divs, les identifiants, ce genre de chose, on s'intéressera aux objectifs poursuivis. Car comme le dit Léo Ferré :
Léo Ferré, Préface, in Il n'y a plus rien a écrit :
Les écrivains qui ont recours à leurs doigts pour savoir s'ils ont leur compte de pieds, ne sont pas des poètes, ce sont des dactylographes.


J'ai réalisé plusieurs essais pour cet exercice. Deux sont relativement satisfaisants, et répondent à des objectifs différents. Dans les deux cas, j'ai tenté de produire une solution aussi accessible que possible, en pensant en particulier à la fluidité du texte (en volume et en taille).

Je passe rapidement sur la mise en forme des blocs principaux (deux colonnes de contenu, pied de page). On notera juste que j'ai englobé les deux colonnes de contenu par un conteneur global, div#global (qui ne comprend donc pas le pied de page, contrairement à la solution présentée par Aymeric), pour deux raisons :
- cela permet d'éviter le dépassement des éléments flottants grâce un contexte de formatage via la propriété overflow ;
- cela permet également d'utiliser une image de fond pour simuler des colonnes de même hauteur (technique des colonnes factices).

Objectif prioritaire : adaptation parfaite du texte
Le seul moyen d'obtenir une adaptation parfaite du texte des deux colonnes par rapport à l'encart central, c'était d'avoir dans chaque colonne un bloc flottant ayant pile la hauteur de l'encart. Un de ces blocs pourra être l'encart, mais l'autre devra être un bloc de mise en forme.

Le problème, c'est que l'on ne peut pas tout à fait prévoir la taille de l'encart : soit que l'on ne sache pas quelle sera le volume de contenu (dans un CMS par exemple) inséré, soit que l'on ne sache pas quelle sera la taille du texte chez l'utilisateur.

Je place donc mon encart flottant au début de la colonne de droite. Dans la colonne de gauche, je place également un bloc flottant, que je cache via un visibility: hidden. Pour être sûr que ce bloc invisible (mais actif et repoussant le contenu dans la colonne de gauche) ait la bonne hauteur, je suis obligé de dupliquer à l'identique le contenu de l'encart.

Et voilà le résultat : http://web.covertprestige.info/divers/ajblog/exo1b.html
Point fort : adaptation parfaite du texte à gauche comme à droite.
Point faible : contenu dupliqué, visible si on désactive les CSS, visible avec un navigateur textuel comme Lynx, ou encore accessible (en double, donc) avec certains lecteurs d'écrans. Note : une partie des lecteurs d'écran interprète visibility:hidden, et ne rendra pas le contenu dupliqué, ce qui limite les dégats.

Objectif prioritaire : pas de contenu dupliqué, maitrise de la place des éléments dans le flux HTML
Dans une démarche d'accessibilité un peu exigeante, on évitera :
- les contenus dupliqués (qu'ils soient visibles par tout ou partie des utilisateurs) ;
- les contenus dont la place dans le flux HTML (c'est à dire, pour au moins une partie des utilisateurs, la place dans le discours) est dictée par la mise en page.

Pour répondre à la première contrainte, on évitera la duplication du texte de l'encart, et on utilisera plutôt des éléments flottants vides pour créer les retraits. Ce qui impose d'avoir un encart de hauteur fixe, en pixels ou (mieux en l'occurrence) en EM. Avec une hauteur en EM, la taille du bloc d'encart et celle des « cales » placées dans chaque colonne suivra en partie l'agrandissement du texte. Mais pas tout à fait : en agrandissant le texte (ou avec une taille de texte par défaut plus importante) on gagne aussi en nombre de lignes, et le texte dépasse. Dans ce cas, la solution qui me semble la plus accessible est de forcer l'apparition d'une barre de défilement interne avec overflow: auto.

Pour répondre à la deuxième contrainte, et vu que l'encart aura une hauteur fixée en EM, on se contentera de positionner l'encart en absolu, le texte étant repoussé par deux « cales » flottantes et invisibles, une par colonne. On peut alors placer le texte de l'encart où l'on voudra dans div#global (lui-même positionné en relatif pour servir de référent au positionnement absolu) : au début, à la fin, ou encore entre les deux colonnes.

Le résultat : http://web.covertprestige.info/divers/ajblog/exo1d.html
Point fort : pas de contenu dupliqué, encart que l'on peut placer où l'on veut.
Point faible : apparition d'une barre de défilement si on agrandit beaucoup le texte, ou encore si on a plus de texte que prévu.
Modifié par Florent V. (24 Jan 2007 - 16:57)
AymericJ a écrit :
Je peux donc prendre ce texte pour étayer ta réponse? Smiley cligne

Sans problème, si tu n'as pas peur d'allonger ton billet. Smiley cligne
Pages :