Ergonomie : en-tête et pieds de page...

Bonjour,

En fait j'ai déjà posé la même question mais je l'ai mal formuler et n'ai donc pas
eu de réponse approprié.

Objectif : refonte de mon site web en CSS. > http://www.tangooz.ch/
Mon problème : concerne en fait les en-tête et des pieds de page.
Mon but : les garder toujours visibles (haut / bas), donc indépendantes de l'ascenseur.

J'ai cherché dans les tutoriels sur le forum mais n'ayant rien trouvé, je pense que je ne cherche
pas avec les bons mots-clés.

Outils utilisé : Dreamweaver 8 sous win LSD.

Merci pour votre aide.
Modifié par tangOOz (16 Mar 2008 - 08:59)

Bonjour,

Solution 1: utiliser des frames.
Inconvénients: problèmes éventuels d'ergonomie, d'accessibilité et de référencement.

Solution 2: utiliser position: fixed.
Inconvénients: non compatible IE6 (à dégrader en un simple positionnement statique pour ce navigateur, via un commentaire conditionnel), problèmes éventuels d'ergonomie.

Et si je peux me permettre, un élément de réponse t'avait déjà été donné dans
http://forum.alsacreations.com/topic-1-33381-1-Comment-faire-un-menu-qui-ne-disparait-pas-.html

Merci pour ta très rapide réponse !
donc la solution "deux" serait la meilleure alternative on dirait.
Le problème c'est que IE6 est encore beaucoup utilisé.

Ou encore de faire un site ou il n'y a pas besoin de monter ou de descendre, pour l'ergonomie c'est le mieux je pense non ?
Je vais déjà essayer avec "fixed" !

merci et A +

Oui effectivement, je ne pensais pas que c'était ça, navré.
J'ai recherché fixed sur le site mais pas de titre concernant les en-tête et pieds-de page. Mais j'ai surement mal cherché... O_o
Et c'est pour cela que j'ai reformulé.

ne pourrais ton pas arrivé au meme résultats que fixed avec les positions absolu en faisant 3 div? se partageant la hauteur en % avec le div central scrollable?

@tangooz: je n'ai pas testé cette solution. donc as essayer avec prudence.

@florentV et autre pro du CSS: voilà ce que j'aurais imaginé. peut-être naïvement. cette solution est-elle viable? (ensuite que les machins scrollable se soit moche est une autre histoire).
Modifié par CPascal (16 Mar 2008 - 13:21)

CPascal a écrit :
ne pourrais ton pas arrivé au meme résultats que fixed avec les positions absolu en faisant 3 div? se partageant la hauteur en % avec le div central scrollable?

Hmm... oui, effectivement. Il faudra pour cela utiliser position: absolute; top: Ypx; bottom: Zpx; pour le bloc principal, où Y et Z sont les hauteurs de l'en-tête et du pied de page. Par contre, là encore, c'est un mécanisme qui marche dans IE depuis la version 7, mais la 6 posera encore problème. Pour IE6, on pourra dégrader le rendu en positionnement statique (normal).

Après, il faudra peser les problèmes d'accessibilité (quelques uns) et d'ergonomie (un peu plus) pour les deux solutions, le positionnement fixe et le positionnement absolu avec défilement dans le bloc interne. Mais les deux solutions conservent un handicap ergonomique: en gardant ces deux éléments à l'écran en permanence, on diminue d'autant la hauteur de la zone d'affichage du contenu. Dans certains cas (contenu long et écran en 800x600 ou même en 1024x768), ça peut être assez inconfortable. Ces mises en page avec bandeaux fixes ne sont réellement intéressantes que pour des interfaces d'application web.

Je ne comprends pas tout mais j'essaie de ne pas paniquer !
A mon niveau, le plus important est de proposer un site web clair et accessible et surtout relatif aux moyens techniques à ma disposition...

Il y a aussi la solution de la simplicité;je vais faire en sorte que tout tienne sur une page, donc gérer les infos essentielles propre à chaque pages.
Par la suite j'essaierai de faire quelques chose de plus élaboré.
Merci pour votre aide.
Modifié par tangOOz (18 Mar 2008 - 09:08)

La solution simple :

#header
{
position: absolute;
top: 0;
/* le reste pour ie6 */
width: 100%;
left: 0;
/* taille de ton div */
height: ZZZZZpx;
}

#footer
{
position: absolute;
bottom: 0;
/* le reste pour ie6 */
width: 100%;
left: 0;
/* taille de ton div */
height: YYYYpx;
}

#contenu
{
height: 100%;
min-height: 100%; /* pour etirer le bg du bloc de contenu, sinon tu n'en as pas besoin, de ces deux la */
padding: ZZZZZZpx <VALEURS DE GAUCHE ET DROITE> YYYYYYpx;
}

Mais tu devrais d'abord bien lire le post de Florent et y réfléchir

Salut,
Merci pour l'info mais il y a quelques chose qui ne marche pas.
J'ai fais un copier/coller de tes données entre les balises body mais sa ne donne rien, cela créé une erreur.
Je ne dois pas les placer au bon endroit je pense.
Je crois que je vais m'en tenir à ce que j'ai dis plus haut.
Plus c'est compliqué, plus sa prend du temps et je n'en ai pratiquement pas malheureusement, c'est très frustrant en fait car j'adore ça !

tangOOz a écrit :
je vais faire en sorte que tout tienne sur une page

Ce n'est pas un impératif ergonomique fort. En d'autres mots: ça n'est pas grave si le contenu n'est pas entièrement visible dans la zone de visualisation du navigateur, ou si un menu de navigation en haut de page disparait lorsqu'on défile vers le bas. N'importe quel utilisateur ayant passé un peu de temps sur Internet ne sera pas gêné par ce type d'interface.

Il y a des choses bien plus intéressantes et bien plus importantes à travailler.