[RESOLU] besoin d'aide sur ce css qui bloc molette de souris

le Mar Oct 04, 2005 21:24

Bonsoir tout le monde,

je vous soumets un petit probleme que je rencontre avec une css. me permettant d'avoir un header et un footer fixe.

mon soucis est que la molette de souris est innactive sur firefox alors que le fonctionnement est correcte sous ie.

voici une page de test avec le cas de figure rencontré : http://www.amicarte.fr/essai-header-et-footer-fixes.php

et voici le code source :

Code: Tout sélectionner: <html> <head> <meta http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <style type="text/css"> body { overflow-y: hidden ; margin: 0; padding: 0; } .content { position: center ; height: 100%; overflow: auto} .menu1 { position: absolute ; bottom: 0 ; right: 8px ; width: 100% ; height: 111px ; } /* header */ .menu2 { position: absolute ; top: 0 ; right: 8px ; width: 100% ; height: 156px ; } /* footer */ body>.menu1 {position:fixed} .boite { width:100% ; height:1200px } p {margin: 0 0 10px 0;} </style> </head> <body> <div class="content">  <div class="boite"> <center> <div style="height:159px ; background-color:#0000FF">  <br><br><br> marge du haut</div> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> essai <br> <div style="height:111px ; background-color:#00FF00">  <br><br><br> marge du bas</div> </center> </div> </div>  <div class="menu2">  <div align="center" style="background-color:#FF0000 "> ici se trouve mon header, il est fixe, fait 159 pixels de haut et cache la marge bleue</div> </div> <div class="menu1">  <div align="center" style="background-color:#FF0000 ">ici se trouve mon footer, il est fixe, fait 111 pixels de haut et cache la marge verte </div> </div> </body> </html>

Qu'en pensez-vous

le Mar Oct 04, 2005 22:23

Ca marche sous Opera par contre.

le Mar Oct 04, 2005 22:43

c'est le

Code: Tout sélectionner: .content {overflow: auto;}

qui déconne sous ff.
Il sert à quoi ici ??

le Mer Oct 05, 2005 0:02

c'est le
Code:
.content {overflow: auto;}

qui déconne sous ff.
Il sert à quoi ici ??

Et bien essai de l'enlever ou de le modifier, tu veras ce qui se passe.
Il est necessaire au defilement sous ie.

le Mer Oct 05, 2005 16:16

en ajoutant des liens interne sur mon header

Code: Tout sélectionner: <a href="#haut" target="_self">haut</a> et <a href="#bas" target="_self">bas</a>

avec balises de type :

Code: Tout sélectionner: <a name="haut"></a> en haut de mon document <a name="bas"></a> en bas de mon document

sur mon document, ça fonctionne.

Il semble en fait qu'à l'ouverture de la page, le navigateur ne sait pas comment se positionner, d'où disfonctionnement de la barre de navigation. Avez-vous une idée pour que le navigateur saches ou il se trouve dès l'ouverture ?

le Mer Oct 05, 2005 16:57

oli004 a écrit:Il semble en fait qu'à l'ouverture de la page, le navigateur ne sait pas comment se positionner, d'où disfonctionnement de la barre de navigation. Avez-vous une idée pour que le navigateur saches ou il se trouve dès l'ouverture ?

Un petit javascript qui met le focus sur window au chargement de la page.

le Mer Oct 05, 2005 18:20

Code: Tout sélectionner: <style type="text/css"> body { margin: 0; padding: 0; } .content { position: center ; height: 100%; } .menu1 { position: absolute ; bottom: 0 ; right: 8px ; width: 100% ; height: 111px ; } /* header */ .menu2 { position: absolute ; top: 0 ; right: 8px ; width: 100% ; height: 156px ; } /* footer */ body .menu1 {position:fixed} body .menu2 {position:fixed} .boite { width:100% ; height:1200px } p {margin: 0 0 10px 0;} </style>

Je pense que c'est ce que tu veux
Dis le moi STP

le Mer Oct 05, 2005 20:43

Merci Borower, je me suis inspiré de ta proposition qui, avec une petite inversion fonctionnait très bien sous FF mais plus sous IE !

Voici donc une version adaptée et fonctionnelle tout browser

Code: Tout sélectionner: <style type="text/css"> body { margin: 0; padding: 0 } * html body {overflow:hidden} body>.menu1 {position:fixed} body>.menu2 {position:fixed} .content { position: center ; height: 100%} * html .content { position: center ; height: 100%; overflow:auto} .boite { width:100% ; height:1200px } .menu1 { position: absolute ; bottom: 0 ; right: 8px ; width: 100% ; height: 111px } /* footer */ .menu2 { position: absolute ; top: 0 ; right: 8px ; width: 100% ; height: 156px } /* header */ </style>

[RESOLU] besoin d'aide sur ce css qui bloc molette de souris

[RESOLU] besoin d'aide sur ce css qui bloc molette de souris

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne