Faire une barre de navigation de page(BootStrap)

**cyllares** · 05/03/2016, 17h15

Bonjour, j'ai récemment commencer un site web sur lequelle je pourrais mettre mes projets. Je suis un débutant en web mais j'ai de bonnes bases en C#. Je profite de ce site pour apprendre à utiliser JavaScript et Sql et approfondir mes connaissances en HTML/CSS, comme vous avez pu le constater dans le titre, j'ai un problème avec la création d'une barre de navigation. J'utilise BootStrap donc la classe nav et tout va à merveille pour l'affichage, mais quand c'est pour affiché les différentes pages rien ne marche

. J'imagine qu'il faut utiliser du JavaScript mais si oui je ne sais pas comment l'inclure.

Rentrons dans le vif du codeつ ◕_◕ ༽つ:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
 
 
 
<html lang="en">
<head>
  <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="cssstyle.css">
 
  <title>SoftRabbit - Cyllares Projects</title>
 
</head>
 
<body>
 
<div class="row">
 <h1 class="col-md-offset-1 col-md-4">SoftRabbit - Cyllares</h1>
</div>
<h3>Projects Website</h3>
 
 
<nav class="navbar navbar-default">
  <div class="container-fluid">
 
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">home</a></li>
      <li><a href="#menu1">menu1</a></li>
      <li><a href="#menu2">menu2</a></li>
    </ul>
  </div>
</nav>
  <div id="home">
 
    <table class="table-md-offset-3 col-md-4">
 
       <thead>
 
           <tr>
 
               <th>News</th>
 
           </tr>
 
       </thead>
 
       <tbody>
 
           <tr>
 
               <td>sup</td>
 
           </tr>
 
       </tbody>
 
   </table>
 
  </div>
  <div id="menu1">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2"class="">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>
 
 
<script src="jquery.js"></script>
 
<script src="jquerythings.js"></script>
</body>
</html>

Étant un débutant je me doute que le code n'est pas très bien optimisé donc si vous avez des suggestions laissez un commentaire.

Cordialement, Cyllares

Merci de votre lecture ◕‿↼

**Inikaam** · 07/03/2016, 09h51

Bonjour cyllares,

Pour débuter sur les bonnes bases, voici déjà un conseil pour ton code

:

La hiérarchie des éléments doit être respectée. Tu utilises h1 et h3, probablement à cause de leur taille par défaut. Il est important pour le référencement naturel de ton site que le titre qui soit "en dessous" d'un h1 soit toujours un h2, puis h3, etc. La forme, ça se change en CSS sans soucis.

Pour ce qui est de ton problème, tout dépend de ce que tu cherches à obtenir. Si j'en crois ton code, le menu de ta navbar ne possède que des liens internes à ta page, autrement dit ils ne font que mener aux ancres que tu as définies plus bas. Cherches-tu à faire un site en one page ou bien souhaitais-tu changer de page ?

Faire une barre de navigation de page(BootStrap)

CSS

Vue hybride

Discussions similaires

Partager

Partager