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:
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.
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; }
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.
Partager