Discussion :

[siamesealmeida]

Bonjour!
Je suis nouvelle sur ce site et en développement web aussi, vous m'excuserez si je fais une erreur grosse comme le monde.
Je suis en train de développer mon site et je bloque sur le menu, l'objectif est de placer une grande image qui contient le menu normal et le menu hover.
Les sections du menu sont toutes différentes.

Voici mon code HTML raccourci:

Code html :

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

1
2
3
4
5
<div id="bloc2">   
				<nav> <ul id=menu> 
<li><a href="lien1.html" title="lien1"> lien1 </a> </li>
  <li > <a href="lien2" title="lien2">lien2 </a> </li>
</ul> </nav> </div>

Pour le CSS, j'avais deux options, la première:

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
#bloc2 { 
		 background-color: white;
		 display: inline-block;
         width: 269px;
         height: 770px;
 
}
#menu {
  width: 265px;
  height: 63px;
  list-style: none;
  margin: 0;
  padding: 0;
 
}
nav li a{ width: 265px;
  height: 63px;
  display: block ;
  background: url('images/menu.jpg') left top no-repeat;
  color: #fff ;
  font: 1em "Trebuchet MS",Arial,sans-serif ;
  line-height: 1em ;
  padding: 4px 0 ;
  text-align: center ;
  border: 1px solid #050e06 ;
  margin-bottom: 1px ; }
 
nav li a:hover, #menu li a:focus, #menu li a:active {
  background: url('images/menu.jpg') right top no-repeat;
}

Ca ne fonctionne pas, ça m'affiche seulement la toute première case et la case à sa droite qui est grisée en le repetant tout au long du menu.

Et la deuxième:

Html =>

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="bloc2">  
 
 <nav> 
            <ul> 
            <li id="it1"><a href="item1.html"> item 1 </a> </li> 
            <li id="it2"> <a href="item2.html"> item 2 </a> </li>
            <li id="it3"> <a href="item3.html"> item 3 </a> </li>
 
           </ul>
        </nav>
</div>

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
nav {*
	background-image: url('menu.jpg'); 
        width: 265px;
  height: 63px;
  margin: 0;
  padding: 0;
}
 
nav ul { 
	list-style-type: none; 
	margin: 0; 
	padding: 0;
	width: 300px;
	margin-left: auto; 
	margin-right: auto; 
 
	 }
	nav ul li { 
		display: inline; 
	} 
	nav ul  li a { 
 
		width: 265px; 
		height: 63px;
		float: left; 
		background-image: url('menu.psd');
		text-indent: -9999px;
 
	}
	#it1 a { 
		background-position: 0 0; 
	}
	#it2 a { 
		background-position: -63px 0;
	} 
	#it3 a { 
		background-position: -63px 0; 
	}

En comptant que le deuxieme ne fonctionne pas du tout.
Précision: Mon navigateur est Chrome et je teste aussi sur Mozilla. Je travaille sur Notepad ++.

Merci d'avance de votre aide.

[siamesealmeida]

Bon ben j'ai trouvé toute seule !

Je met des id dans les balises <a> plutôt que dans les balises <li> et ça fonctionne!

Désolée du dérangement.