Discussion :

[encoremoi21258]

Bonsoir

J'ai un gros problème absolument pas logique sur une page que je suis en train d'écrire ...

Voici le HTML :

Code html :

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

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 :

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
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 :

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

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 html :

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

<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

[CosmoKnacki]

C'est à cause de ton padding-left, mets le à zéro. En fait les balises ul ont un padding par défaut qui réserve une place pour la puce.

[encoremoi21258]

Merci beaucoup
Résolu à la vitesse de l'éclair.

Bonne soirée