bonjour, voila j'ai un problème de barre de navigation celle qui contient l'icone facebook ne reste pas a sa place si on change la résolution de l'écran, je cherche a lui assigner une place fixe comme l'image et la barre de navigation du dessous.

Le HTML

Code html : 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
<!DOCTYPE html>
<html class="no-js" lang="en_US">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<!--   CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="../global/css/web_fr.css"/>
<link rel="shortcut icon" href="../global/img/gfx/favicon.ico"/>
<title></title>
</head>
<body bgcolor=#eaeaea>
<!--                                                   -->
<!--                cadre de fond                    ---->
<!--     modifier selon la longueur de la page       ---->
<!-- ---------------------------------------------------->
<div id="pageBody">
<!--                                                   -->
<!--                 Barre de Social du haut         ---->
<!-- ---------------------------------------------------->
<div class="socialm">
<CENTER><TABLE>
<TR>
<TD><div class="minormenu">
<a href="company/company.html" class=" "><span>Entreprise</span></a>
<a href="career/career.html" class=" "><span>Recrutement</span></a>
<a href="contact/contact.html" class=" "><span>Contacts</span></a>
<a href="../en/index.html" class=" "><span>English</span></a> 
<!-- Socials -->
<a href="http://twitter.com/" class=" "><img src="../global/img/gfx/t.png" /></a> <!-- <span>t</span></a> -->
<a href="http://www.facebook.com/pages/" class=" "><img src="../global/img/gfx/f.png" /><!-- <span>f</span></a> -->
<a href="http://www.linkedin.com/company/" class=" "><img src="../global/img/gfx/in.png" /> </a><span></span></a>
</div></TD>
</TR>
</TABLE></CENTER> </div> 
<!--                                                   -->
<!--                 Barre de naviguation            ---->
<!-- ---------------------------------------------------->
<div class="navbar">
<a href=" " class="active home " style="width:115px"><span>home</span></a>
<a href="products/products.html" class=" " style="width:115px"><span>Produits</span></a>
<a href="solutions/solutions.html" class=" " style="width:115px"><span>Solutions</span></a>
<a href="company/company.html" class=" " style="width:115px"><span>Entreprise</span></a>
<a href="distributors/distributors.html" class=" " style="width:115px"><span>Distributeurs</span></a>
<a href="investors/investor.html" class=" " style="width:115px"><span>Investisseurs</span></a>
<a href="news/news.html" class=" " style="width:115px"><span>News</span></a>
<!-- <a href="evenemets/events.html" class=" last" style="width:115px"><span>Events</span></a> -->
<div class="searchfield">
<form method="get" action="../search/">
<input type="hidden" name="rows" value="20">
<input type="text" name="queryString" autocomplete="off" placeholder="">
<button type="submit"><span>search</span></button> 
</form>
</div>
</div> 
<!--                                                   -->
<!--                 Image de fond                   ---->
<!-- ---------------------------------------------------->
<div id="headimg">
</div>
<!-- cette div ferme le corps body de la page -->
</div>
</body>
</html>

Le CSS

Code css : 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
/*             cadre de fond                   */
/*  à modifier selon la longueur de la page    */  
html, body {width:100%;}
#pageBody {
  background:#e8e8e9; 
  width: 960px; 
  height:1250px; 
  z-index:-1;
  margin:0 auto 0 auto;
}
/*    ---------------------------- barre social  ------------------------ */
 
.socialm {   
  position: relative;
  top: 0px;
  left: 562px;
  width: 445px;
  height: 25px;
  display: block;
  z-index:1;
  border:1;
}
div.minormenu span {
  margin-left: 5px;
  margin-right: 5px;
}
.minormenu a, div.languages a  {
  z-index:1;
  text-align: left;
  font-family: Calibri;
  font-weight : bold;
  text-decoration: none;
  color: #6d6d6f;
  padding: 5px;
  float: left;
  top: 0px;
  font-size: 13px;
  -webkit-transition: color .1s ease-in;
  -moz-transition: color .1s ease-in;
  -o-transition: color .1s ease-in;
  transition: color .1s ease-in;
}
div.minormenu.light a, div.languages.light a{
  color: white;
  opacity: 0.9;
  text-shadow: 0 -1px 0 black;
}
.minormenu.light a:hover, .languages.light a:hover {
  opacity:1;
}
.minormenu a:hover, .languages a:hover {
  color: #000000;
}
/* ---------------------- Nav Barre -----------------------------------------*/
div.navbar {
  position: relative;
  top: 0px;
  left: 50%px;
  width: 960px;
  display: block;
  float: left;
  clear: both;
  border-radius: 0px;
  background: #353d46; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: #353d46 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVhNjE2ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYjI0MmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, #5a616e 0%, #1b242a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a616e), color-stop(100%, #1b242a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #5a616e 0%, #1b242a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #5a616e 0%, #1b242a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #5a616e 0%, #1b242a 100%); /* IE10+ */
  background: linear-gradient(top, #5a616e 0%, #1b242a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#5a616e', endColorstr = '#1b242a', GradientType = 0); /* IE6-8 */
  box-shadow: 0px 0px 0px rgba(255, 255, 255, .35), 0px 0px 0px rgba(0, 0, 0, .35);
}
 
div.navbar a {
   list-style-type: none;
        white-space: nowrap;
  font-family: Calibri;
  /*font-weight : bold;*/
  color: #bcc0c3;
  text-decoration: none;
  color: rgb(188, 192, 195);
  font-size: 18px;
  text-shadow: 0px -1px 0px rgb(0, 0, 0);
  float: left;
  display: block;
  text-align: center;
  padding: 7px 0px 8px 0px;
  margin: 8px 0px;
  border-right: 2px solid rgba(27, 36, 42, .5);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, .15);
  -webkit-transition: width .2s ease;
  -moz-transition: width .2s ease;
  -o-transition: width .2 ease;
  -ms-transition: width .2 ease;
  transition: width .2 ease;
}
 
div.navbar a:hover {
  text-decoration: none;
  text-shadow: 0px 0px 15px #FFFFFF, 0px -1px 0px rgb(0, 0, 0);
}
 
div.navbar a.active {
  color: rgb(242, 152, 8);
  text-shadow: 0px -1px 0px rgb(0, 0, 0);
}
 
div.navbar a.home, div.navbar a[href='http://bbox.com/cn'] {
  background: url("../img/gfx/bboxlogobl.png") no-repeat center center;
  height: 18px;
  /*padding: 0px 0px 0px 0px;*/
  position: relative;
  top: 3px;
  bottom: 0px;
  left: 0px;
}
 
div.navbar a.home span {
  display: none;
}
 
/*searchfield */
.searchfield {
  float: right;
  margin: 15px 10px 0 0;
  overflow: hidden;
  height: 22px;
  background: rgb(90, 97, 110);
  border-radius: 14px;
  box-shadow: 0 0 4px rgba(0, 0, 0, .25) inset, 0 1px 0 rgba(255, 255, 255, .25), 0 -1px 0 rgba(0, 0, 0, .35);
  -webkit-transition: background-color .3s ease;
  -moz-transition: background-color .3s ease;
  -o-transition: background-color .3 ease;
  -ms-transition: background-color .3s ease;
  transition: background-color .3s ease;
}
.seachfield span, .seachfield input[type=text] {
}
.searchfield input[type=text] {
  background: transparent url("../img/gfx/m_glass.png") no-repeat 5px 4px;
  border: 0;
  font-size: 12px;
  height: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: rgb(131, 136, 146);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
  padding-left: 25px;
  float: left;
  width: 70px;
  -webkit-transition: width .2s ease;
  -moz-transition: width .2s ease;
  -o-transition: width .2 ease;
  -ms-transition: width .2s ease;
  transition: width .2s ease;
}
.searchfield input[type=text]:focus {
  color: #FFF;
  outline: none;
}
.searchfield button, .searchfield button span {
  display: none;
}
.searchfield button {
  background: transparent;
  height: 28px;
  width: 28px;
  overflow: hidden;
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
  float: left;
}
/*---------------------------------------     image de fond          ----------------------------------*/
#headimg {
  background:url(../img/head/1.jpg) no-repeat;
  height: 480px;
  width: 960px;
  /*min-width: 960px;*/
  position: relative;
  top: 53px;
  /*left: 50px;*/
  z-index: 1
}