Petite colle sur la navigation dans une page

Invité · 03/04/2016, 16h20

Bonjour,

J'ais un site tout en une page (disons un article

)
Seulement voila, mon "client" ( Ami ... ) veut que le menu soit figé en haut de la page !
pas de problème, je peux mettre sur chaque paragraphe de ma page, qui est dans un DIV, un gif tranparent de la hauteur du menu ..

Pas trop top ! et en prime dans l'action "Responsive Web design" mon menu passe de in-line a du "ligne par ligne" coté menu !
donc une hauteur bien plus grande ...

J’espère que vous m'avez suivi

et si en prime vous avez une botte secrète pour résoudre cela , ce serait SUPER !!

En fait je pensait naïvement qu'il était possible au lieu de remonter le scroll jusqu'a la tête de la page, de remonter jusqu’à une encre un peut plus bas ....

Merci d'avance pour vos idés.

Invité · 03/04/2016, 17h58

Bonjour,

Il faudrait voir le code, et des copies d'écran.

sinon, un margin-top sur chaque section(de la hauteur du menu).

Ou juste sur celui cliqué -> via JavaScript

Invité · 03/04/2016, 18h56

Whaou trop content de te lire depuis le temps !
Alors voila tout en un , tu copie colles dans toto;htm et c'est parti pour le test

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<STYLE type="text/css">
<!--
html,body{height:100%;}
body {margin:0;font-family:Georgia,"TimesNewRoman",Times,serif;color:#000000;font-size:20px;}
ul { list-style-type: none;margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%;z-index: 70;}
li {float:left;width:12%;text-align:center;}
li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}
li a:hover:not(.active) {background-color: #111;}
.active {background-color: #4CAF50;}
div.arrondi {width : 100%;background-color : #333333;border-radius : 10px;text-align:center;font-family:Georgia,"TimesNewRoman",Times,serif;
   color:#ffffff;font-size:20px;}  
div.cale {text-align:center !important;}
div.Lcentre {height : auto;width : auto;max-width : 750px;margin : auto;text-align : center;}
span.LaFonte_blog {  font-family: "Times New Roman", Times, serif; color :#333333; font-size :24px  ! important; }
/* =================alternative================= */
@media screen and (max-width:900px)
{
ul { list-style-type: none;margin: 0; padding: 0; overflow: hidden; background-color: #333;  width: 100%;z-index: 70;}
li {float:none;width:100%;}
li {clear:both;}
}
@media (max-width: 640px) 
{
  body, element1, element2 {width:auto;margin:0;padding:0; }
  img, table, td, blockquote, pre, textarea, input, iframe, object, embed, video {max-width:100%; } 
  img {height: auto; width: auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
  ul { list-style-type: none;margin: 0; padding: 0; overflow: hidden; background-color: #333;  width: 100%;z-index: 70;}
  div.cale {margin-top: 260px !important;}
  li {float:none;width:100%;}
  li {clear:both;}
  element1, element2 {float: none;width: auto; }
 .hide_mobile {display: none !important; }
 body:before {content:"Version mobile du site";display:block;color:#999999;text-align:center;font-style:italic; }
}
-->
</STYLE>
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<script type="text/javascript">
var ancien= "1";
function menu(id) {
  document.getElementById(ancien).className="Nactive";
  document.getElementById(id).className="active";
  ancien= id;
}
</script>
<div>
<ul>
 <li><a href="#haut" id="1" class="active" onclick="menu(this.id)">Accueil</a></li>
 <li><a href="#presentation" id="2" class="Nactive" onclick="menu(this.id)" >Présentation</a></li>
 <li><a href="#etudes" id=3 class="Nactive" onclick="menu(this.id)" >Etudes</a></li>
 <li><a href="#certificats" id="4" class="Nactive" onclick="menu(this.id)" >Certificats</a></li>
 <li><a href="#projets" id="5" class="Nactive" onclick="menu(this.id)" >Projets</a></li>
 <li><a href="#experiences" id="6" class="Nactive" onclick="menu(this.id )" >Expériences</a></li>
 <li><a href="#skills" id="7" class="Nactive" onclick="menu(this.id )" >Compétences</a></li>
 <li><a href="#contact" id="8" class="Nactive" onclick="menu(this.id);" >Contact</a></li> 
</ul>
</div>
  <div id="haut" class="cale"> 
  <div class="arrondi"><br /><br /> <br /><br /></div>  
  <img src="http://www.fox-infographie.com/forum/xxxx.jpg" alt="moi" width="100%" ><br />
  </div>
 
  <div id="presentation" class="cale">
  <div class="arrondi"><br /><br />Presentation<br /><br /></div>
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  </div>
 
  <div id="etudes" class="cale">
   <div class="arrondi"><br /><br />Etudes<br /><br /></div>
   <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
   <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
   <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
   <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
   <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  </div>
 
  <div id="certificats" class="cale">
  <div class="arrondi"><br /><br />Certificats<br /><br /></div>
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  </div>
 
  <div id="projets" class="cale">
  <div class="arrondi"><br /><br />Projets<br /><br /></div>
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  </div>
 
 <div id="experiences" class="cale">
  <div class="arrondi"><br /><br />Expériences<br /><br /></div>
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
 </div>
 
 <div id="skills" class="cale">
  <div class="arrondi"><br /><br />Skills<br /><br /></div>
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  </div>
 
 
 <div id="contact" class="cale">
  <div class="arrondi"><br /><br />Contact<br /><br /></div>
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  <br />xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
  </div>
 
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 
</body>
</html>

Invité · 03/04/2016, 19h22

Hello

1/ Version "desktop" :

Code :

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

<div class="arrondi"><br /><br />Expériences<br /><br /></div>

J'ai envie de dire : LOL !

Tu ne penses pas d'un padding serait plus approprié que des <br> ?
+ mettre un padding-top au divs. "cale" :

Code html :

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

1
2
3
 
<div id="experiences" class="cale">
   <div class="arrondi">Expériences</div>

Code css :

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

1
2
div.cale { padding-top:40px; } /* hauteur du menu */
div.arrondi { padding:30px; }

2/ Version "phone" :
Le mieux est de :

masquer le menu + d'afficher un picto "hamburger" (carré avec trois traits dedans) en position:fixed (en haut à droite ou à gauche, achoix )
au clic sur le picto : ouvrir/fermer le menu (en JavaScript/jquery)

N.B. Pour des transitions moins "brutales", je te conseille :