html5 et menu bar fixe

Version imprimable

19/06/2013, 15h08
keokaz

html5 et menu bar fixe
Bonjour,

j'aimerais mettre un menu fixe noir comme celui de Google,
ce menu doit-il être dans la balise header pour du html5 ?
Code:

1 2 3 4 5 6 <header> <nav id="fix_menu_top"> menu fixe qui reste coller en haut de page </nav> </header>
Ou en dehors de la balise header ?
Code:

1 2 3 4 5 6 7 8 <nav id="fix_menu_top"> menu fixe qui reste coller en haut de page </nav> <header> //....... </header>
je me suis dit que comme c'est un menu qui bouge pas et qui reste toujours ici, il serait peut-être mieux qu'il soit en dehors de la balise header ?

Qu'en pensez-vous ?

J'avais l'intention de mettre dans la balise header un autre menu en bas d'une bannière.
Code:

1 2 3 4 5 6 7 8 9 <nav id="fix_menu_top"> menu fixe qui reste coller en haut de page </nav> <header> <div>banniere</div> <nav>autre menu</nav>//....... </header>
je vous remercie d'avance pour la réponse :)
19/06/2013, 15h53
Bisûnûrs

J'aurais juste une réponse :

Il ne faut pas confondre aspect visuel et sémantique HTML.
19/06/2013, 17h03
keokaz

Merci de ta réponse,
donc si je comprend bien, la barre noire que je souhaite mettre, je peux donc la mettre où je veux ?

ce je souhaite mettre dedans :

- un titre selon le contexte de la page visitée (page accueil, page article 1, page article 2) ;
- le nom de la personne qui se connecte ;
- formulaire mot de passe et login ou bouton déconnecté ;
- un lien vers la page d'accueil.

je pense que tous cela ne sert pas à la sémantique donc n'importe où ?
20/06/2013, 01h57
Muchos

NAV indique un contexte de navigation. Ce que tu souhaites mettre dedans n'est pas lié à la navigation —et un lien "Accueil" ne justifie pas l'usage de NAV.
Selon moi, un balise ASIDE est toute dédiée. Et vu le contenu, tu peux la placer toute à la fin.

Merci de ta réponse,

cela n'est pas évident de choisir la bonne balise,

donc je dois mettre tout bas la balise "aside",
voici mon code html

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
42
43
44
45
46
47
48
49
50
51
52
 
            <!DOCTYPE html>
        <meta charset="utf-8">
        <head>
            <title>Accueil</title> 
            <link rel=stylesheet type="text/css" href="../info/mystyle/css/bst.css">
            <link rel=stylesheet type="text/css" href="../info/mystyle/css/bst_rsp.css">
            <link rel=stylesheet type="text/css" href="../info/mystyle/css/context_fixe.css">
            <script src="../info/bst/js/bootstrap.min.js"></script>
            <script src="../info/jq/js/jquery.js"></script> 
                    </head>
        <body> 
<header>
//ma banniere
//navigation avec la balise nav
</header>
 
<article>
//section + aside de l'article 
</article>
                    <aside class="navbar navbar-fixed-top" >
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <div class="nav-collapse">
                        <ul class="nav">
                            <img class="pull-left" id="logo_ico" src="../info/mystyle/img/px/logo_ico.png">
                            <li><a href="#">HOME</a></li>
                            <li><a href="#">contact</a></li>
                            <li><a href="#">page : Accueil  </a></li>
                        </ul>
                                <form  class="navbar-search pull-right " action="">
            <input style="height:12px" type="text" class="search-query input-medium" placeholder="votre@email.fr ">
           <input style="height:12px"  type="password" class="search-query input-small" placeholder="Password">
            <button id="valid_log" ><i class=" icon-search"></i></button>
        </form>
 
        <ul class="nav pull-right"  id="inscrire">
            <li><a href="#">s'inscrire</a></li>
        </ul>
                            </div><!-- /.nav-collapse -->
                </div><!-- /.container -->
            </div><!-- /.navbar-inner -->
        </aside><!<<<@!1!@>>>-- /.navbar -->   
 
<footer>
 ma balise de fin
</footer>