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

oli004 · 4 Octobre 2005

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:

<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"> <!-- début du contenu de la page centrale -->
  <div class="boite">
  <center>
  <div style="height:159px ; background-color:#0000FF">&nbsp; <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">&nbsp;  <br><br><br> marge du bas</div>
   </center>
 </div>
</div> <!-- fin du contenu de la page -->

<div class="menu2"> <!-- menu fixe en haut de l'écran -->
   <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"> <!-- menu fixe en bas de l'écran -->
   <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

Protanim · 4 Octobre 2005

Ca marche sous Opera par contre.

jeroen · 4 Octobre 2005

c'est le

Code:

.content {overflow: auto;}

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

oli004 · 5 Octobre 2005

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.

oli004 · 5 Octobre 2005

en ajoutant des liens interne sur mon header

Code:

 <a href="#haut" target="_self">haut</a>  et  <a href="#bas" target="_self">bas</a>

avec balises de type :

Code:

<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 ?

shrom · 5 Octobre 2005

oli004 a dit:
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.

Borower · 5 Octobre 2005

Code:

<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

oli004 · 5 Octobre 2005

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:

<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>