28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'expose mon probleme.
J'ai une entete de page contenant un menu, etc.
Sous cette entete, j'ai un menu a gauche de la page.
J'aimerais que le menu reste fixe, lorsque l'on deroule la page.

Hors voila, si je mets les informations a gauche sur position:fixe, lorsque je deroule ma page, l'entete de page disparait (cest bien ce que je veux) mais au lieu d'avoir mon menu a gauche qui monte dans le coin en haut a gauche, il reste fixe, c'est a dire a la meme position avant le deroulement de la page, donc bref, il apparait au milieu.

Mon but, etant d'avoir la partie de gauche toujours visible, lorsque l'on deroule le contenenu de la page. Présentement j'utilise un
<div class="frame"> et je met pour cette section un overflow a auto, donc une barre deroulante apparait, je trouves ca plus ou moins jolis d'avoir 2 barre dans la page...

Auriez-vous une solution ? Suis-je assez clair sur le but que je veux atteindre ?
C'est une question difficile. position: fixed; permet de faire cela, mais il faut que les navigateurs l'implémentent. Et en gros, tous le comprennent sauf Internet Explorer (sauf les vieux navigateurs, quoi...).

On peut donc choisir de mettre un élément en position: fixed (il sera alors fixe par rapport à l'écran). Et dans une feuille de style conditionnelle pour IE (ou, solution moins élégante, avec un hack pour IE), on mettra ce bloc en position: absolute. Il disparaîtra donc dans IE lorsqu'on déroulera la page, et restera fixe avec les navigateurs modernes (dont IE 7 me semble-t-il). C'est ce qu'on appelle une dégradation gracieuse.

Si on veut le même comportement exactement, il faut bidouiller pas mal en CSS.
Dans le body, deux éléments uniquement, tous deux en hauteur 100%, pas de scroll pour l'élément HTML, un scroll pour le deuxième élément qui contient toute la page sauf l'élément "fixe" qui sera dans le menu. Bref, du bricolage pas évident.
salut,
sylvain5090 a écrit :

Suis-je assez clair sur le but que je veux atteindre ?


Non pas du tout...

Exemple :
si
a écrit :

Sous cette entete, j'ai un menu a gauche de la page.


et si
a écrit :

...si je mets les informations a gauche...


alors peut être que lesdites informations s'appellent des liens tout simplement. Ou alors tu parles d'autre chose mais dans ce cas de quoi ?

Pour autant que l'on puisse comprendre ton souhait c'est :
a écrit :

J'aimerais que le menu reste fixe, lorsque l'on déroule la page.


et ton souci c'est :
a écrit :

...il reste fixe...


Je sais bien qu'il est tard mais quand même.
Moi j'ai cru comprende que sylvain5090 voulait que son menu (ou son truc à gauche) reste fixe par rapport à l'écran alors qu'en fait il reste "fixe" par rapport à la page web. Mais c'est vrai qu'il faut pas mal interpréter, et que je m'y suis pris à plusieurs fois, sans être sûr d'avoir compris le truc Smiley cligne
mpop a écrit :
sans être sûr d'avoir compris le truc Smiley cligne


tandis que moi je suis à peu près sur de ne pas comprendre ce qui est souhaité exactement. Comme en plus je soupçonne (je craint en fait) quelque chose d'impossible (mais sans certitude) je préfère demander une mise à plat très claire.
C'est exactement comme Alan le pense Smiley cligne

L'espece de truc a gauche a exactement le meme comportement que je voudrais. Mais je redoute un peu la compatibilite avec les differents navigateurs.
sylvain5090 a écrit :
C'est exactement comme Alan le pense Smiley cligne

L'espece de truc a gauche a exactement le meme comportement que je voudrais. Mais je redoute un peu la compatibilite avec les differents navigateurs.

Lol c'est surtout pas du tout un élément fixe, c'est un élément gigoteur Smiley cligne

La solution qui tue, en pur CSS :
position: move-around-till-the-user-just-goes-away;

Modifié par mpop (08 Mar 2006 - 21:44)
Modérateur
bonjour,

pour garder ton element fixe a l'ecran dans IE, il faut que la fenetre ne depasse pas les 100% de hauteur, le position:fixe ne marche pas dans IE.

tu peut alors place dans cette fenetre ton menu en absolute et le reste dans un element qui occuppe 100% de la hauteur avec un overflow:auto; pour l'empecher de s'etirer (dans Ie) et qu'il affiche une scrollbar.

Cette solution ne convient plus aux autres navigateur qui comprenne fixe correctement.

alors a l'aide des "commentaires conditionnel" tu vas pouvoir faire ta page selon les regles css pour les "navigateur" moderne" et servir a IE une autre "soupe" pour qu'il simule le comportement voulu.

je te propose eventuellement de t'inspirer de cette page (qui au passage fait usage d'un menu d'alsacreations avec de petite modification de comportement).
http://gcyrillus.free.fr/gabarits/simili-frame-extensible-fluide-et-scroll-a-la-roulette-IE-Firefoxe.html

Il me semble qu'il y a aussi dans la faq quelque chose sur ce sujet ... ou sur pompage.net ? place un element en "fixe" ...

++
Modifié par gcyrillus (27 Apr 2006 - 02:03)
Merci gcyrillus j'ai pu faire exactement ce que je voulais grâce à ton lien, vive le CSS, et vive le mode RECHERCHE d'un forum!! Il est parfois plus simple de chercher un problème déjà exposé plutot que d'en recréer un Smiley biggrin

encore merci

EDIT: MDR ça marche vraiment pas sous IE, la structure que donne IE rend impossible la navigation, mais je vais encore regarder ton lien qui propose apparement la solution meme si j'ai pas envie de me casser la tete pour ce navigateur
Modifié par imer (22 Jun 2006 - 10:21)