Discussion :

[noobyyy]

bonjour, comment créer un menu avec css ?

sous forme :

<ul>
<li></li>
<li></li>
<li></li>
</ul>

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
 
.header-menu ul
{
	border: 0px;
	background-image: url(../images/fd_menu.png);
	background-repeat: repeat-x;
	height: 50px;
	max-height: 50px;
	width: 1280px;	
}
 
.header-menu ul li
{
	display: inline ;
	background-image: url(../images/m-hover.png);
	height: 50px;	max-height: 50px;	
	width: 105px;	max-width: 105px;
}
.header-menu ul li:hover
{
	display: inline ;
	background-image: url(../images/m-hover.png);
	height: 50px;	max-height: 50px;	
	width: 105px;	max-width: 105px;
}

j'aimerai mettre un fond du menu avec .ul
mettre un fond pour chaque .li
un fond hover pour .li:hover

et comment mettre une image entre chaque li ? (séparation img)

Merci

[noobyyy]

edit :

je reconnais mon erreur et j'ai réussi avec le code suivant :

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
 
.header-menu ul
{
	border: 0px;
	background-image: url(../images/fd_menu.png);
	background-repeat: repeat-x;
	height: 50px;
	max-height: 50px;
	width: 1280px;	
}
 
.header-menu li {
	display: inline;
}
 
.header-menu li a {
	display: inline-block;
	width: 191px;
	height: 50px;
	color: #6A6967;
	background: transparent url(../images/m-hover.png) 0 0px no-repeat;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
}
 
.header-menu li a:hover, .header-menu li a:focus {
	background: transparent url(../images/m-hover.png) 0 -50px no-repeat;
	color: white;
	font-weight: bold;
}

cependant comment mettre un fond tout a gauche dans ul
exemple image de départ du menu et de même une image de fin pour le menu ?