28220 sujets

CSS et mise en forme, CSS3

[Résolu (façon de parler)] Position : fixed sous Opéra

Bonjour,

J'ai un écart de rendu entre Opéra d'une part, FF et Safari d'autre part. Voyons de quoi il s'agit :
J'ai un grand container centré horizontalement positionné en relatif. Je souhaiterais qu'il contienne une boîte au positionnement fixe de la manière suivante :
- fixe par rapport à la fenêtre (cas du media=screen) dans la hauteur
- fixe par rapport au container dans la largeur, et collé à gauche du container.

Voici une tentative d'implémentation. Je répète le code dans le post :
<style type="text/css" >
body  {padding-top:100px}
#container {position:relative;width:500px;height:1000px;margin-left:auto;margin-right:auto;background-color:#f3AD97}
#pas-bouger{position:fixed;top:120px;width:100px;height:100px;background-color:#f3cDa7}
</style>

<body >
<div id="container">
	<div id="pas-bouger">j'aimerais bien que cette boite soit fixe</div>
</div>
</body>
C'est le positionnement sur l'axe horizontal qui pose problème. Je pensais ne pas spécifier la propriété left de façon à ce que la boîte positionnée en absolu (position : absolute ou fixed) prenne la place de la boite équivalente positionnée en static (dixit, je le croyais, CSS2.1). FF et Safari semble de cet avis, mais sous Opéra, la boîte se promène à une distance du bord du container équivalent à la marge du container (qui dépend donc de la taille de la fenêtre).
J'ai également remarqué qu'Opéra se ralliait à l'opinion générale dès que mon container était positionné en static. Malheureusement, je dois me résoudre conserver mon container en relatif pour différentes raisons hors de la problématique exposée.
Du coup j'ai 2 questions :
- le comportement d'Opéra reflète-t-il la norme CSS2.1, et si oui quel raisonnement faut-il faire pour le comprendre ?
- Y aurait-il un moyen de maîtriser le positionnement horizontal de cette boîte ?

Merci d'avance à tous ceux qui pourront apporter un éclairage à cette affaire.
Modifié par Xavier (03 Oct 2005 - 16:38)
Bonjour.
Etant donné que tu as une largeur definie et des margins auto pour ton container, tu peux supprimer toutes les infos de positionnement qui peuvent etre causes d'erreurs puisqu'interpretées differment par les U-A .
La largeur+les marges suffisent amplement pour positionner ton <div>
Bonjour,

C'est effectivement un bug (lourd) d'Opera, corrigé dans Merlin, le nouveau moteur de rendu de la future version 9.0.

Dans ton cas, et en attendant celle-ci, je ne vois pas de contournement possible.

jp949 : d'après le message de Xavier, la position relative du conteneur est nécessaire pour d'autres raisons, probablement liées au reste de son contenu.
Modifié par Laurent Denis (03 Oct 2005 - 08:37)
@ jp949>d'accord avec toi mais je n'utilise pas position:relative sur mon container pour le positionner, mais pour la gestion d'éléments descendants.

Merci Laurent pour ta réponse. (Au fait Laurent est-il bien ton prénom ?)

Du coup il me vient une question, je sais qu'elle va déplaire... mais je ne peux pas la retenir, c'est plus fort que moi : existe-t-il un hack ciblant les versions récentes d'Opéra qui me permettrait d'opter pour un position:absolute sous Opéra et fixed sous FF, Safari...?
je viens de tester sous opera en enlevant ton position:relative; a ton container ca passe comme sous IE ou FF
@ jp949> Oui bien sur, et je l'ai déjà noté plus haut. Mais je répète que des contraintes autres m'obligent à conserver position:relative. Tu imagines bien que je ne vais pas laisser ce container vide, j'ai effectivement des éléments descendants qui nécessitent ce positionnement relatif.
Xavier a écrit :

Merci Laurent pour ta réponse. (Au fait Laurent est-il bien ton prénom ?)


oui

Xavier a écrit :

Du coup il me vient une question, je sais qu'elle va déplaire... mais je ne peux pas la retenir, c'est plus fort que moi : existe-t-il un hack ciblant les versions récentes d'Opéra qui me permettrait d'opter pour un position:absolute sous Opéra et fixed sous FF, Safari...?


Il y a des cas où, en effet, un hack CSS est dificilement contournable, si l'effet voulu est jugé indispensable.

Le problème est d'en trouver un fiable pour Opera jusqu'à la version 8.x.

Une possibilité : jouer sur le support des media queries, qu'Opera est pour l'instant le seul navigateur desktop à implémenter (Il n'y a aucune raison de penser que FF, Safari ou IE s'en préocupent dans un avenir très proche, étant donné que ce ne sont pas des navigateurs multi-supports, contrairement à Opera qu'on retrouve sur le Web-Tv, les mobile, PDA etc.)

Pour qu'une CSS ne soit lue que par Opera 7 et 8, utiliser :

@media screen and (min-width: 550px){
   ... ici les règles CSS ...
}


Mais attention: il ne survivra pas à Opera 9 pour ce problème de position fixe. Et doit être employé avec précautions, voir http://archivist.incutio.com/viewlist/css-discuss/53146
Modifié par Laurent Denis (03 Oct 2005 - 13:04)
Laurent Denis a écrit :
si l'effet voulu est jugé indispensable
Non il ne l'est pas. J'étais déjà prêt à accepter la dégradation (légère qui plus est) de design pour IE, les autres navigateurs suivront, à moins que je ne me concentre sur ma contrainte position:relative pour voir s'il est acceptable de la faire sauter.
Laurent Denis a écrit :
Une possibilité : jouer sur le support des media queries...
J'avais déjà entendu parlé de l'astuce, sans l'avoir compris jusqu'à aujourd'hui.
Utiliser un hack reposant sur un bug du parseur d'un navigateur n'est déjà pas idéal, compter sur le périmètre fonctionnel d'une liste de navigateurs me fait réfléchir.

Merci en tout cas pour ces informations. Smiley smile

Et voici un débat en prime.
Modifié par Xavier (04 Oct 2005 - 00:01)
Sujet clos
Aller à