DIV : menus fixes et texte défilant sans limite de hauteur

Bonjour,
Je m'attèle à la rénovation de notre site en implémentant les standards XHTML/CSS.

Je trouvé le site Alsacreations extrêmement bien fait pour le quasi-débutant que je suis avec les <DIV>.

J'ai bidouillé à partir des gabarit de Alsacreations et je suis PRESQUE
arrivé à mes fins sauf que ...

(Dans la suite les numéros de modèles sont en référence à la page :
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
)

Ce que je cherche à faire c'est un en-tête et des menus toujours visibles et un texte dont la hauteur s'adapte à la taille de fenêtre du navigateur et que l'on puisse faire défiler.

Donc je voulais avoir l'apparence du modèle 10 en combinant les effets des
modèles n°13 et 14 (header/menu fixes)
Le n°12 ne convient pas car il limite la hauteur du texte : pénalisant si on
a un grand écran.

Je n'ai pas réussi à combiner 13 et 14 (le scroll disparait ou de
multiples scrollbar apparaissent ou le header ne reste pas fixe... en
plus dans le 13 le header a une hauteur variable car définie en %). Par
contre en partant de 10 et en utilisant les positions fixes j'ai obtenu
l'apparence que voulait.
Mais la scrollbar est sur la fenêtre du navigateur...

SAUF QUE : quand on se positionne dans le texte à l'aide d'un lien vers
une ancre (dans mon exemple cliquer sur les liens du pied de page), le
div #centre se positionne sur l'ancre mais en haut de la zone de visualisation et non pas au niveau de départ du #centre (à 80px du haut).

J'ai mis mon travail ici :
http://www.ecologielibidinale.org/modele10b.htm

ça marcherait surement si la scrollbar était sur le #centre (comme
modèles 13 et 14) mais je n'ai pas réussi à obtenir cela sans fixer la hauteur du #centre mais alors pb du n°12)

Ce problème n'est pas du aux éléments fixed (on peut d'ailleurs les enlever pour voir plus clair)

J'ai trituré les positionnements (fixed,absolute...) dans tous les sens mais je n'ai pas trouvé de solution.

Voilà si quelqu'un trouve la solution, je pense que cela ferait un nouveau modèle intéressant à ajouter sur votre site .
Modifié par Monique (22 Jan 2009 - 21:54)

Autre "solution" mais avec d'autres inconvénients...

Cette fois je suis reparti du modèle n°13 et j'ai conservé le principe des hauteurs en %.

Voir le résultat ici :
http://www.ecologielibidinale.org/modele13b.htm

Deux problèmes :
- Header, menu haut et pied de page sont en % donc de hauteur variable.
- impossible de mettre du padding dans les DIV sinon des décalages apparaissent entre les divisions !

Finalement j'ai fait un compromis, en abandonnant l'idée du header et menu-haut fixe.
Seuls les menus latéraux restent fixes.

De plus pour ne pas qu'ils attirent trop l'oeil (pb de lisibilité du texte qui est au centre) je les ai un peu "grisé".

Le résultat est là :
http://www.ecologielibidinale.org/fr/miel-cadre-fr.htm

-les 2 feuilles de style sont à part (voir dans la source du fichier)
-j'ai retiré les essais mentionnés dans mes posts précédents

Je pense que mon résultat est intéressant et mériterais de devenir un nouveau modèle CSS à proposer sur ce site (moyennant adaptations ou simplifications éventuelles).

miel a écrit :
Je pense que mon résultat est intéressant et mériterais de devenir un nouveau modèle CSS à proposer sur ce site (moyennant adaptations ou simplifications éventuelles).

Je ne suis pas objectif, étant l'auteur des nouveaux gabarits Alsacréations, mais j'aurais tendence à dire que... non.

Ta mise en page souffre des problèmes suivants:
- un manque de lisibilité ergonomique avec une mise en page trois colonnes où le statut des différents contenus n'est pas facilement identifiable (pourquoi diable y a-t-il trois menus de navigation? et quelles sont leurs relations hiérarchiques? je n'y comprends rien, je dois cliquer où?);
- une barre de défilement interne, et les barres de défilement internes (propres à un bloc précis et pas à l'interface générale du navigateur) c'est le mal;
- l'apparition d'autres barres de défilement internes sur les colonnes latérales avec un petit écran (ou en augmentant la taille du texte)...ce qui fait qu'on se retrouve avec trois contenus ayant chacun leur barre(s) de défilement, et qu'on perd encore plus en lisibilité.

Merci de ces commentaires.

1.

a écrit :
Florent a écrit :
- un manque de lisibilité ergonomique avec une mise en page trois colonnes où le statut des différents contenus n'est pas facilement identifiable

Cet aspect est propre à notre site - je vais réfléchir à comment mieux faire apparaître la spécificité de chaque menu - je n'envisageais pas nécessairement l'idée d'inclure tous les menus dans le modèle (j'ai parlé de simplification).

2.

a écrit :
- une barre de défilement interne, et les barres de défilement internes (propres à un bloc précis et pas à l'interface générale du navigateur) c'est le mal;

Pour que seul le centre défile et pas le reste, je n'ai pas trouvé d'autre solution. D'ailleurs pourquoi serais-ce forcément "le mal" ? Simplement parce que ce n'est pas habituel pour un site ? Je pense que la barre est visible est que les gens l'utiliseront.

D'ailleurs la barre spécifique à un bloc tu trouve ça très souvent quand tu rédige un email ou un post sur un forum (comme ici même )

D'ailleurs les "anciens" modèles
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
le faisait déjà (n°11 à 14), même si dans leur cas la barre est à droite puisqu'il n'y a pas de colonne de droite.

3.

a écrit :
- l'apparition d'autres barres de défilement internes sur les colonnes latérales avec un petit écran (ou en augmentant la taille du texte)...ce qui fait qu'on se retrouve avec trois contenus ayant chacun leur barre(s) de défilement, et qu'on perd encore plus en lisibilité.

Je suis d'accord que la multiplication des barres est génante.

Cela dépend de la quantité de texte qui est mis dans les colonnes.
Par exemple sur notre site, les barres n'apparaissent pas pour une taille de fenêtre de 1024x738 + un grossissement de 1 cran (dans Firefox).
Donc si on fait attention à ne pas en mettre trop ce problème ne doit apparaître que dans un nombre très limité de cas de figures.

Pour éviter l'apparition de ces barres il suffit de mettre overflow:hidden; pour les colonnes latérales. On se retrouve alors dans le cas de figure habituel où le contenu est partiellement masqué - à ceci près que comme il n'y a pas de barre sur la fenetre du navigateur il faut augmenter la taille de la fenetre pour voir ce qui est caché. Donc si on utilise cette option, il vaut mieux limiter encore le contenu pour l'adapter à une taille de 800x570.

4. CONCLUSION provisoire

Ma configuration est en réalité assez proche de ton gabarit n°9
http://www.alsacreations.com/gabarits/modele09.html
mais avec un avantage important : les menus (ou plus généralement les contenus) latéraux restent toujours visibles quand on défile le texte. Et la zone d'affichage du texte principal n'est pas limitée en hauteur.
Et cela seuls les "anciens" modèles n°13 et 14 le font mais avec uniquement 1 zone fixe, au lieu de 2 zones fixes dans ma configuration.

J'ai fait cela car cela m'ennuie d'avoir à toujours remonter la barre de défilement pour retrouver les menus quand j'ai fini de parcourir un texte et que je veux passer à un autre.

Bien sur cet avantage s'accompagne de quelques inconvénients que tu as pointé.
Mais justement le proposer comme modèle permettrait aux concepteurs d'avoir le choix d'une autre option.

Il y aussi peut-être une autre façon d'obtenir le résultat que je cherchais, il faut creuser...

miel a écrit :

J'ai fait cela car cela m'ennuie d'avoir à toujours remonter la barre de défilement pour retrouver les menus quand j'ai fini de parcourir un texte et que je veux passer à un autre.

Bien sur cet avantage s'accompagne de quelques inconvénients que tu as pointé.
Mais justement le proposer comme modèle permettrait aux concepteurs d'avoir le choix d'une autre option.

Il y aussi peut-être une autre façon d'obtenir le résultat que je cherchais, il faut creuser...

Un peu de lecture ?

Cdt,
Sylvain

Déjà, il faut se poser en amont les questions suivantes:

1. Quels contenus sont suffisamment critiques pour rester toujours visibles à l'écran?
Tout contenu affiché en permanence prend une place symbolique très importante et, dans certains cas, réduit l'espace disponible pour l'affichage des contenus. Dans certains cas, garder un élément en permanence à l'écran est une erreur, par exemple dans la plupart des cas pour un en-tête ou un pied de page. À l'inverse, garder un menu de navigation bref toujours visible, ou éventuellement des onglets, peut être intéressant.

2. Y a-t-il un intérêt ergonomique à utiliser une barre de défilement interne?
Il est souvent préférable d'utiliser la barre de défilement globale du navigateur. On pourra alors garder des éléments à l'écran grâce au positionnement fixe (position: fixed). Attention toutefois aux cas où de très nombreux éléments sont fixes, et où la barre de défilement ne fait finalement défiler qu'un contenu assez isolé au centre de la page... la barre de défilement étant éloignée du contenu qui défile réellement, ça peut être perturbant. Corrolaire: éviter de garder des éléments fixes à droite de l'écran, car ils feraient obstacle entre le contenu qui défile et la barre de défilement globale.

Notons que les barres de défilement interne céleumal dans les cas suivants: a) le contenu à faire défiler ne contient pas de lien ou autre élément susceptible de recevoir le focus (auquel cas, impossible de naviguer au clavier dans ce bloc de contenu); b) la zone prévue pour le défilement est trop petite; c) la zone prévue pour le défilement a une hauteur de plus de 300px et autre que 100% de la hauteur du viewport (risque fort de double barre de défilement, assez perturbant).
Il est vrai qu'ici on n'est pas dans l'un de ces cas; la seule situation gênante est alors la présence de multiples barres de défilement.

(Pour rappel, beaucoup de portables et netbooks ont des rapports 16/9, et des hauteurs d'affichage dans le navigateur qui peuvent être aussi réduites que 400-500px. À garder à l'esprit.)

Ça me rappelle de mauvais souvenirs de frames tout ça.
Et sinon les couleurs, les marges, les polices c'est délibéré ?

Merci de ces réflexions.

En réponse à dew :

Seule la couleur jaune pâle du fond est "contractuelle".
Les menus sont de teintes atténuées pour ne pas capter le regard pendant le lecture du texte.

En ce qui concerne la police j'ai simplement mis font-family:sans-serif car j'ai lu quelque part que sans-serif est plus lisible que serif sur un écran.
(et que c'est l'inverse sur papier donc je vais mettre serif pour le media print)
Il me semble que prendre une police précise est de peu d'intérêt car rien n'assure que l'internaute aie cette police installée sur sa machine.

miel a écrit :

Il me semble que prendre une police précise est de peu d'intérêt car rien n'assure que l'internaute aie cette police installée sur sa machine.

hi hi hi !

Dans le même ordre d'idée (et en forçant un peu le trait) :
* pourquoi mettre de la couleur car rien n'assure que l'internaute utilise un navigateur graphique ?
* pourquoi mettre du contenu car rien n'assure que l'internaute soit intéressé par ce que tu as envie de dire ?

Blague à part (...ah ben si en fait ! Toujours dans la blague ! ) : en voyant ta page je crois bien que tu viens de réinventer le web des années 90 et les pages persos de Lycos !!! En bref des frames et un css minimaliste. Pour comprendre ce qui me fait dire ça je te joins un aperçu (portable 16/9) :


Bon mais blague à part (cette fois-ci c'est pour de vrai) : la propriété font-family sert justement à faire en sorte de cibler le plus grand nombre possible de configurations. Cela fonctionne en déclarant plusieurs polices en leur donnant une priorité (qui correspond au sens de lecture). Par exemple sur le forum :

font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif

Tu remarqueras que l'on garde Sans-Serif pour la fin car c'est ce qui nous laisse le moins de latitude possible puisqu'on ne sait pas à l'avance quelle sera en définitive cette police et donc comment elle s'harmonisera avec la charte graphique générale. Donc c'est facile à faire et c'est tout de même mieux (joli, lisible...). Ce qui est beaucoup moins facile est de choisir les polices sensées être "équivalentes" d'un système à l'autre.

<teasing (encore un)>Florent vient justement d'écrire un article là-dessus</teasing>

Bonne continuation.
Modifié par Heyoan (24 Jan 2009 - 04:21)

Heyoan, je vois le pb pour les écrans larges.
J'ai limité la largeur du texte à 1000 px car si les lignes sont trop longues ça devient difficile à lire.

Comment faire pour que la colonnes de droite reste collée à celle du centre ?
(sans pour autant fixer la largeur de la colonne centrale)

J'ai essayé max-width:[largeur maxi cumulée des trois colonnes] pour le conteneur (qui contient les 3 colonnes) mais ça ne change rien.