28173 sujets

CSS et mise en forme, CSS3

Div fixed et opera

Bonjour à tous,

Je viens de mettre a jour le site web d'une entreprise et ai modifié un peu le design. Je travaille maintenant sur la compatibilité entre les navigateurs...
Je rencontre ce problème :
Pour Firefox (et donc opéra?), j'ai une div conteneur qui contient une autre div (le menu) et un tableau.
Mon conteneur est placé au centre de l'écran en CSS (margin auto + width:800px). Ma div de menu est elle fixée en hauteur (position:fixed, pour la fixer quelquesoit le défilement de la page), mais elle se déplace à l'horizontal en fonction de la taille de la fenetre puisque placée dans mon conteneur...

Mon souci est que tout ceci marche très bien avec IE et FF mais pas Opéra
Smiley sweatdrop Ce dernier place mon menu complètement à gauche de la fenetre (il sort donc de son conteneur) mais reste bien fixé à la vertical (quelque soit le défilement...)

Quelque saurait me dire ce qu'il se passe??

Merci d'avance
On peut voir la page ?

Pas de page en ligne, pas de chocolat. Smiley lol
Modifié par Florent V. (26 Apr 2007 - 11:28)
Désole je travaille en local pour le moment (toutes mes modifs doivent etre validées avant mise en ligne - vous comprendrez avec les images...) Smiley cligne
Ci-joint donc les captures d'écran du résultat sous FF et Opéra (j'espère que cela suffira Smiley cligne

FF:

Opera:
Modifié par PeF (26 Apr 2007 - 16:14)
PeF a écrit :
Désole je travaille en local pour le moment

Ce qui t'empêche par exemple de créer une page de test, anonymisée si besoin, reproduisant le problème ?

Le problème était plutôt clair tel que décrit dans ton premier message (même si les images aideront peut-être certains à visualiser le problème). MAIS, sans code HTML et CSS, impossible de dire quoi que ce soit de façon précise. On peut juste constater, en regardant l'image : ah oui tiens, il y a un problème.

Ce qui te fait une belle jambe je suppose. Smiley cligne

Bref, une page de test en ligne serait l'idéal pour que l'on puisse te filer un coup de main. Au pire, coller ici le code HTML et CSS (du moins les parties concernées), mais c'est une solution qui ne permet pas de tester directement des modifications sur la page. Smiley ohwell
Non je ne peut vraiment pa mettre de page en ligne désolé...

Mais voici à quoi ressemble le code utilisé :

HTML pour la page :

<body>
<div class="container">
  <div id="divMenu"> 
          .... [menu]....
  </div>
  <table width="750" height="100%" >
          ...[contenu]....
  </table>
</div>
</body>


Pour la CSS:

#divMenu {
	position:fixed;
	z-index:100;
	top:100px;
}

#divMenu a:hover {
	font-weight:bold;
}

.container {
	margin-left:auto;
	margin-right:auto;
	width:820px;
	text-align:justify;
}

#menu {
	width:200px;
}


Voilà...
PeF a écrit :
Non je ne peut vraiment pa mettre de page en ligne désolé...

Je me cite rapidement :
Florent V. a écrit :
Ce qui t'empêche par exemple de créer une page de test, anonymisée si besoin, reproduisant le problème ?

Pas ta page, mais une page de test reproduisant le problème. Smiley cligne

C'est une solution qui demande un peu de temps (20 minutes pour préparer la page anonymisée et la mettre en ligne sur un hébergement neutre), mais qui est de loin la plus efficace :
- les personnes tentées de t'aider auront ce qu'il faut pour ça ;
- réaliser la page de test pourrait même te faire trouver le problème directement.

Penses-y pour une prochaine fois, par exemple.
#divMenu a:hover {
	font-weight:bold;
}

Ne pas faire varier la graisse ou la taille des caractères au survol. Ça peut entrainer des déplacement des éléments de la page, ce qui est rarement sympa.
Voir la bonne pratique Opquast correspondante : http://fr.opquast.com/bonnes-pratiques/fiche/190


Quant à ton problème de positionnement :
- positionner le conteneur global en relatif pour qu'il joue le rôle de référent pour ses enfants et descendants positionnés en absolu (div.container {position: relative;}) ;
- donner une coordonnée horizontale à div#divMenu (div#divMenu {left: 0;}).

Ça devrait normalement arranger les choses.
Merci Florent V. pour tes conseils, ca a résolu mon souci Smiley biggrin Smiley biggrin

Quant à la création de la page de test, je tacherai de le faire la prochaine fois Smiley cligne

A+
N'hésites pas à marquer le titre de ton sujet comme [Résolu], alors. Smiley smile
(Pour modifier le titre du sujet : éditer le premier message.)
Sujet clos
Aller à