petite soucis esthethisme dans mon menu

**bullrot** · 17/06/2010, 15h48

Bonjour a tous.

Voila j'ai crée 4 div
: avec un header , un menu , un sous menu et un footer
voici le 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
<!DOCTYPE html PUBddC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>		
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
 
  <link rel="stylesheet" type="text/css" href="styles2.css">	 
</head>			
 
 
<body>	
 
<div id="header"> 
 
</div>	
 
<div id="menu">
 
   <li><a>test</a></li>
	<li><a>iiii</a></li>
</div> 
 
<div id="submenu">
ici le sous menu
 
</div>
 
<div id="contenu">
<p>contenu
</p>
 
</div>	 
<div id="footer>ici footer</div>		 
 
</body>
</html>

j'ai ensuite créé un .css pour mettre tout ca en forme.... j'arrive presque a ce que je veux .... le probléme est que quand je "hover" au dessus d'un lien.... il entoure donc le lien d'une autre couleur mais on dirait qu'il ne va pas jusque le lien suivant.. il reste un petit ecart.... et je n'arrive pas a trouver d'ou vient cet écart....

je vous met le code .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
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
html {
 
	   background-color:#ffffff;
	   } 
 
body {
 
 
	   }   
 
 
/* Header
----------------------------------------------- */ 
 
div#header {
 
  height: 170px;
}
 
 
#menu {
 	background:#2b3b93;
 	width:100%;
 	padding:12px 12px 12px;
 	font:bold 85% "Trebuchet MS",Verdana,Sans-serif;
 	line-height:1em;
 	color:#fff;
  	}
 
#menu li {
	display:inline;
  margin:0;
  padding:0;
  background-image:none;
  line-height:normal;
  text-indent:0;
  display:inline;
  margin:0;
  padding:0 0 0 0;
  border-collapse:collapse;
  background-image:none;
  line-height:normal;
  text-indent:0;
  }
#menu a, #menu strong {
	/*	float:left; */
	margin:0;
	text-indent:0;
  padding:12px 12px 12px;
 
 
  text-transform:uppercase;
  text-decoration:none;
  border-collapse:collapse;
  color:#fff;
  }
#menu a:hover {
  background:#396392;
  text-decoration:none;
  }	
 
#menu .current a, #menu .current strong { 
  background:#a6d2de ;
  }

**devyan** · 17/06/2010, 16h01

Bonjour,

L'espace que tu constate est dû à l'indentation de ton code html.
Si tu mets tous les LI sur la même ligne sans les séparer il n'y a plus d'espace à l'affichage

Code :

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

<li><a>test</a></li> <li><a>iiii</a></li>

devyan

P.S. : LI sans UL ça ne respecte pas la norme HTML et encore moins la DTD que tu utilises ...

**bullrot** · 17/06/2010, 16h10

Effectivement ca fonctionne.... vraiment bizarre... lol

n'y a t-il pas une astuce pour contrer cela ? car tout mes <li> sont cré dinamyquement avec du php... si je dois tout coller mon code devient vraiment illisible .... et comme mon site est encore en develloppement....

suis-je obligé de mettre un <ul> dans mon code ?