|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
oli004
WRInaute accro
Inscrit le: 06 Jan 2005
Messages: 1913
Localisation: France, departement 03 (Allier)
|
 Posté le : Mar Oct 04, 2005 22:24 Sujet du message: [RESOLU] besoin d'aide sur ce css qui bloc molette de souris |
|
|
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"> <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> <!-- 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
Dernière édition par oli004 le Mer Oct 05, 2005 21:44; édité 1 fois |
|
| |
|
 |
Protanim
WRInaute occasionnel
Inscrit le: 02 Avr 2005
Messages: 170
|
| Posté le : Mar Oct 04, 2005 23:23 Sujet du message: [RESOLU] besoin d'aide sur ce css qui bloc molette de souris |
|
|
| Ca marche sous Opera par contre. |
|
| |
|
|
jeroen
WRInaute accro
Inscrit le: 30 Aoû 2002
Messages: 2269
|
| Posté le : Mar Oct 04, 2005 23:43 Sujet du message: [RESOLU] besoin d'aide sur ce css qui bloc molette de souris |
|
|
c'est le
| Code: |
| .content {overflow: auto;} |
qui déconne sous ff.
Il sert à quoi ici ?? |
|
| |
|
|
oli004
WRInaute accro
Inscrit le: 06 Jan 2005
Messages: 1913
Localisation: France, departement 03 (Allier)
|
| Posté le : Mer Oct 05, 2005 1:02 Sujet du message: [RESOLU] besoin d'aide sur ce css qui bloc molette de souris |
|
|
| Citation: |
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
WRInaute accro
Inscrit le: 06 Jan 2005
Messages: 1913
Localisation: France, departement 03 (Allier)
|
| Posté le : Mer Oct 05, 2005 17:16 Sujet du message: [RESOLU] besoin d'aide sur ce css qui bloc molette de souris |
|
|
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
WRInaute passionné
Inscrit le: 05 Juil 2004
Messages: 866
|
| Posté le : Mer Oct 05, 2005 17:57 Sujet du message: [RESOLU] besoin d'aide sur ce css qui bloc molette de souris |
|
|
| 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. |
|
| |
|
|
Borower
WRInaute accro
Inscrit le: 18 Avr 2005
Messages: 2128
Localisation: Lyon
|
| Posté le : Mer Oct 05, 2005 19:20 Sujet du message: [RESOLU] besoin d'aide sur ce css qui bloc molette de souris |
|
|
| 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
WRInaute accro
Inscrit le: 06 Jan 2005
Messages: 1913
Localisation: France, departement 03 (Allier)
|
| Posté le : Mer Oct 05, 2005 21:43 Sujet du message: [RESOLU] besoin d'aide sur ce css qui bloc molette de souris |
|
|
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> |
|
|
| |
|
|
| |
|
|
