Mis à 100 % mais pourtant plus large que la page
Bonsoir
J'ai un gros problème absolument pas logique sur une page que je suis en train d'écrire ...
Voici le HTML :
Code:
1
2
3
4
5
6
7
8
| <ul class="menu">
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="....">...</a></li>
<li><a href="#">...</a></li>
</ul> |
Et le 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
| body {
background-color:#fff;
margin:0;
padding:0;
}
.menu {
list-style:none;
border-top:#65bb01 solid 5px;
background-color:#4c4c4c;
width:96%; height:45px;
margin:auto;
}
.menu li { float:left; }
.menu li a {
display:block;
color:#fff;
font-size:13px;
font-weight:bold;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
margin-top:8px;
padding:6px 10px 6px 10px;
border-right: 10px solid #4c4c4c;
border-left: 10px solid #4c4c4c;
cursor:pointer;
}
.menu li a:hover {
background-color:#636363;
}
.menu li.current a {
background-color:#65bb01;
} |
Bref rien de spécial.
Or, le problème est lié à
Code:
1
2
3
4
5
6
7
| .menu {
list-style:none;
border-top:#65bb01 solid 5px;
background-color:#4c4c4c;
width:96%; height:45px;
margin:auto;
} |
puisque si je met la propriété width à 100 %, le menu est plus large que la page, du coup j'ai une scollbar horizontale. Je suis donc obligé de mettre à 96 % maximum mais cela créé un espace blanc à gauche et à droite.
Encore plus étrange,
Code:
<div style="width:100%; background:red;">...</div><br/>
m'affiche le cadre rouge sur toute la largeur de la page, sans scollbar ...
Donc je ne comprend pas pourquoi une fois 100 % donne une page plus large et l'autre fois exactement de la même largueur.
Savez vous résoudre mon problème ?
Merci d'avance
