Discussion :

[Istrella]

Bonjour,

J'ai un petit souci avec un bout de CSS pour ce site : www.oliotechnology.fr/test2/

Il s'agit du menu de gauche auquel je souhaite appliquer une image de fond à chaque lien.
J'arrive à appliquer la même image pour tous les liens, mais ce n'est pas ce que je veux.
Comme il y a des menus et des sous-menus, je voudrais les différencier avec chaque fois une image de fond différente pour chaque classe.

Mais rien à faire, ça veut pas prendre !

Ci-dessous, j'ai tenté de placer une image sous le premier lien de ma liste (j'ai arrêté après la première classe. Les autres sont de construction quasi identiques) :

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
 
#cheminfer2 {
margin-left:0px;
padding:0px;
}
#cheminfer2 li {
text-align:center;
}
#cheminfer2 li a {
height:20px;
width:100%;
}
#cheminfer2 li a:link,
#cheminfer2 li a:visited {
display:block;
}
 
 
#cheminfer2 .Menu {
margin-left:0px;
padding:0px;
}
#cheminfer2 .Menu li {
display:block;
height:50px;
width:100%;
background-image:url(images/menughaut.jpg);
background-repeat:none
}
#cheminfer2 .Menu li a:link, 
#cheminfer2 .Menu li a:visited {
color:#FF0000;
}

et le code html :

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
 
<ul id="cheminfer2" class="Menu">
<li><a href=http://www.oliotechnology.fr/test2/index.php?id_page=3>Produits</a>
</li>
<ul class="sousMenu">
<li><a href="index.php?id_page=9">presses</a>
</li>
<li><a href="index.php?id_page=10">Filtres</a>
</li>
<li><a href="index.php?id_page=11">Granuleurs</a>
</li>
<ul class="sousMenu2">
<li><a href="index.php?id_page=22">GR75E</a>
</li>
<li><a href="index.php?id_page=23">GR300E</a>
</li>
<li><a href="index.php?id_page=24">GR45D</a>
</li>
<li><a href="index.php?id_page=25">GR220D</a>
</li>
</ul>
<li><a href="index.php?id_page=12">broyeurs</a>
</li>
<li><a href="index.php?id_page=13">Déchiqueteurs</a>
</li>
<li><a href="index.php?id_page=14">Pièces</a>
</li>
</ul>
</ul>

Quelqu'un peut-il me dire ce que j'ai fais de travers ? Parce que là, j'ai eubeau chercher, je ne vois pas !

Merci encore pour votre aide précieuse !

[Auteur]

bonjour,

tu as écris :

Code :

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

1
2
 
<ul id="cheminfer2" class="Menu">

et dans ton 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
 
#cheminfer2 .Menu {
margin-left:0px;
padding:0px;
}
#cheminfer2 .Menu li {
display:block;
height:50px;
width:100%;
background-image:url(images/menughaut.jpg);
background-repeat:none
}
#cheminfer2 .Menu li a:link, 
#cheminfer2 .Menu li a:visited {
color:#FF0000;
}

il y a "doublon" avec #cheminfer2 .Menu. Puisque cette partie de CSS s'applique aux sous menus tu dois écrire :

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
 
.menu .sousMenu{
margin-left:0px;
padding:0px;
}
.menu .sousMenu li {
display:block;
height:50px;
width:100%;
background-image:url(images/menughaut.jpg);
background-repeat:none
}
.menu .sousMenu li a:link, 
.menu .sousMenu li a:visited {
color:#FF0000;
}

.menu : classe parent
.sousMenu : classe enfant de menu
li : élément de liste enfants de .sousMenu
a : lien enfant des éléments de liste.

[Istrella]

Merci pour ta réponse !

Mais je n'ai pas trop compris, je pense, ces histoire de classes lorsqu'elles sont multiple.

Est-ce que ça veut dire que j'arriverai, si je souhaite que chaque sous menu soit différent, à quelque chose comme cela ? :

Code :

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

1
2
3
.Menu .sousMenu .sousMenu2 .sousMenu3 {
[...]
}

Ou seulement simplement quelque chose comme ça :

Code :

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

1
2
3
4
 
.sousMenu2 .sousMenu3 {
[...]
}

[trotters213]

bè normalement ouè, par exemple dans ta css tu va avoir des trucs de ce style (tiré d'un site perso) :

Code :

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

1
2
#siteNav li ul li a{...}
#siteNav li ul li a:active{...}

Tiens 1 lien sympa pour les CSS :
http://www.tuteurs.ens.fr/internet/w.../css.html#s2_1

[Istrella]

Ok, tout ça commence à devenir un peu plus clair, et ça a grandement allégé mon code ! Merci !

Autre petit souci :

Je n'arrive pas à centrer verticalement mes liens sur les images en Background de mes boutons.

J'ai essayé "vertical-align", ça ne change rien.

Avec un padding-top, j'arrive à centrer mon lien, mais les images se décalent les unes par rapport aux autres.

Et sinon je ne vois pas.
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
.Menu {
margin-left:0px;
margin-top:0px;
padding-left:0px;
text-align:center;
}
.Menu li {
list-style-type:none;
}
.Menu li a {
display:block;
height:50px;
padding-top:15px;
background-image:url(images/menughaut.jpg);
background-repeat:no-repeat;
}
 
.Menu .sousMenu {
margin-left:0px;
padding-left:0px;
}
.Menu .sousMenu li a {
background-image:url(images/menug1.jpg);
background-repeat:no-repeat;
height:30px;
padding-top:5px;
}
 
.Menu .sousMenu .sousMenu2 {
margin-left:0px;
padding-left:0px;
}
.Menu .sousMenu .sousMenu2 li a {
background-image:url(images/menug2.jpg);
background-repeat:no-repeat;
height:30px;
padding-top:5px;
}
 
.Menu .sousMenu .sousMenu2 .sousMenu3 {
margin-left:0px;
padding-left:0px;
}
.Menu .sousMenu .sousMenu2 .sousMenu3 li a {
background-image:url(images/menug3.jpg);
background-repeat:no-repeat;
height:30px;
padding-top:5px;
}

HTML :

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
<ul class="Menu">
<li><a href=http://www.oliotechnology.fr/test2/index.php?id_page=3>Produits</a>
</li>
 
<ul class="sousMenu">
<li><a href="index.php?id_page=9">presses</a>
</li>
<li><a href="index.php?id_page=10">Filtres</a>
</li>
<li><a href="index.php?id_page=11">Granuleurs</a>
</li>
<li><a href="index.php?id_page=12">broyeurs</a>
</li>
<li><a href="index.php?id_page=13">Déchiqueteurs</a>
</li>
<li><a href="index.php?id_page=14">Pièces</a>
</li>
 
<ul class="sousMenu2">
<li><a href="index.php?id_page=31">Granuleurs</a>
</li>
 
<ul class="sousMenu3">
<li><a href="index.php?id_page=32">page 1</a>
</li>
<li><a href="index.php?id_page=33">page 2</a>
</li>
</ul>
</ul>
</ul>
</ul>

Une idée quelqu'un ?

Merci !

[trotters213]

toujours dans ton CSS, essaie en mettant
{
padding:auto;
margin:auto;
text-align: center;
}