Focus clavier dans un div "position : fixed"
Bonjour,
j'ai commencé à faire un joli petit site Web dans lequel toutes les pages ont cette structure :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<body>
<div id="divMenu">
<div class="menu_horizontal">
<!-- contenu du menu -->
</div>
</div>
<div id="divInformations">
<div class="informations_horizontal">
<!-- contenu du menu -->
</div>
</div>
</body> |
Les classes de style sont définies dans mon fichier style.css :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
.menu_horizontal, .menu_vertical {
position : fixed;
top : 0px;
left : 0px;
display : block;
text-align : center;
font-size : 160%;
vertical-align : middle;
background-repeat : no-repeat;
background-attachment : fixed;
}
.informations_horizontal, .informations_vertical {
padding-left : 0.5em;
padding-right : 0.5em;
right : 0px;
position : fixed;
bottom : 0px;
height : auto;
display : block;
overflow : auto;
background-image : url("images/fond_samourai.jpg");
background-repeat : no-repeat;
background-attachment : scroll;
}
.informations_horizontal {
top : 128px;
left : 0px;
background-position : center top;
}
.menu_horizontal {
background-image : url("images/kanji_horizontal_large_h_128_fond.jpg");
background-position : center top;
}
.menu_horizontal, .tab_menu_horizontal {
width : 100%;
} |
(J'omets intentionnellement <html> et <head> : s'il est nécessaire de les préciser, dites-le moi et je les envoie.)
Ça me fait un chouette menu qui reste en haut de la page même quand je scrolle vers le bas, c'est très bien. Mais ... quand la page s'affiche, si le contenu de la zone principale (divInformations, donc) a une taille supérieure à la hauteur de la fenêtre de mon navigateur, je n'arrive pas à scroller avec les touches de flèches (haut, bas, page-up, page-down). Il faut que je commence par cliquer dans la zone principale et là, ça marche très bien.
Est-il possible de faire en sorte que le navigateur comprenne que les touches du clavier doivent s'appliquer directement à la zone principale ? J'ai essayé de la déclarer en premier dans le code HTML (puisque le placement est uniquement fonction du style), sans succès. J'ai aussi essayé de chercher "html css focus" sur le Web, mais apparemment j'utilise les mauvais mots-clefs parce que les solutions proposées par d'aimables internautes ne résolvent pas mon problème. (Non qu'elles le doivent, du reste. Ce sont des solutions pour un souci proche, mais pas le même que le mien.)
Par ailleurs, ces pages sont purement informatives et ne contiennent donc pas de balise <form>. J'ai essayé de créer un pseudo-formulaire qui ne contiendrait qu'un input hidden (avec l'attribut tabindex à "1"), mais sans succès. Pareil avec une balise <a> qui pointe vers la même page mais sans contenu, avec l'attribut tabindex à "1".
PS : j'ignore si je devrais poster ça dans le forum HTML ou CSS, mais comme il me semble que CSS ne gère pas trop le focus et que par ailleurs certaines solutions que j'ai vues et testées sans succès utilisaient Javascript, HTML me paraît plus général.
