28173 sujets

CSS et mise en forme, CSS3

Salut a tous,

Ca fait un moment que je galere sur ce probleme, je pense que c est impossible a realise uniquement CSS, mais peut etre aurez vous d'autres idees.
En gros j ai deux colonnes Position:fixe a droite et a gauche (feuille de style separe pour le "hack" IE). Donc le contenu de ma page scroll alors que les deux colonne restent fixes. Mais j ai besoin de mettre a ce design un header, d'une larger de 100% qui lui ne sera pas fixe et sera positionne au dessus des deux colonnes fixes (z-index). Tout marche bien sur FF
LIEN
mais sous IE le header reste fixe (du a la feuille de style IE.css)
Modifié par m4n40 (15 Oct 2006 - 05:04)
Merci pour ta reponse, mais dans la galerie css aucun model ne correspond a ce que je veux optenir. Jette un coup d'oeil au lien de mon precedent post. Le resultat est correct sou FF . Est il possible d obtenir le meme resultat sous IE?

Merci
Si je peux me permettre, l'effet obtenu avec Firefox est assez déstabilisant, avec ces colonnes qui sont cachées par un en-tête qui disparaît lors du défilement tandis qui les colonnes restent fixes. Enfin bref...

Quoi qu'il en soit, j'ai pour ma part renoncé aux bidouillages pour IE6 pour obtenir un effet de position: fixed. Ça n'est pas irréalisable, mais 1) c'est compliqué et 2) je ne pense pas que ce qui soit gagné (pour peu qu'on y gagne quelque chose) au niveau de l'ergonomie compense les effets secondaires (défilement peu fiable, problèmes possibles pour la sélection du texte, etc.).

Du coup, j'opte pour une des solutions suivantes :
1 - on laisse tomber cet effet (surtout s'il n'a pas de justification solide à part « ça serait sympa si... ») ;
2 - on garde l'effet, mais on fait de la dégradation gracieuse pour IE6 (en sachant qu'IE7 permet l'utilisation de position: fixed) en passant les blocs fixes en positionnement absolu.

Dans le cas que tu présente, la page est un peu trop épurée pour que l'on puisse dire si l'effet recherché (et qui donc pose problème) est un gadget, un petit plus appréciable, ou un gain d'ergonomie réel.
Merci pour cette reponse tres constructive mpop. Smiley biggrin

C est vrai que ca parait destabilisant comme je l ai presente dans mon exemple mais ca peut permettre des effets sympas, style une fluide rounded box avec un effet d'ombre qui soit scrollable sur un background fixe ( Smiley sweatdrop je sais, c un peu tire par les cheveux).
Donc aucune solution 100% css pour faire fonctionne ca sous IE6? Il y a t il une solution simple en js (sachant que je n y connait pas grand chose)

Merci pour ton aide
m4n40 a écrit :
Donc aucune solution 100% css pour faire fonctionne ca sous IE6?

Il me semble que si, mais c'est pas mal de bidouille.

Il faut, je pense :
- html et body en overflow: hidden (pas de barre de défilement générale) ;
- un conteneur global qui prendra toute la hauteur (height: 100%;, à appliquer sur html et body également pour que ça marche), en overflow: auto ;
- deux colonnes positionnés en absolu et dont le code sera placé en dehors du conteneur global.

Quelque chose dans ce style. Mais c'est sans garantie... Smiley sweatdrop