Gestion des SPAN en CSS

Version imprimable

Bonjour,

Voici mon menu CSS :
Le rendu en image : http://img31.imageshack.us/img31/7794/menulz.jpg

Code:

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
 
.contextMenu{
    display:none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    position: absolute;
	background:#FAFAFA url(menubg.gif) repeat-y left top;
    border: 1px solid #979797;
    width:auto;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    font-size: 13px;
}
 
.contextMenu ul{
       list-style: none;
        padding: 0;
        margin: 0;
}
 
.contextMenu li{
  margin: 0px;
    padding: 3px;
 
}
.contextMenu ul span{
        display: block;
	padding: 1px 5px;
	padding-left: 28px;
        text-decoration: none;
        color: #000;
        background-repeat: no-repeat;
}
 
.contextMenu ul li span:hover, .contextMenu ul li span:focus {
	color: #FFF;
	background-color: #AECFF7;
	cursor: pointer;
	cursor: hand;
}
 
.separateur{
    border-top: 1px solid #E0E0E0;
    height: 1px;
    width: 182px;	
}

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<div class="contextMenu" id="Menu1">
      <ul>
        <li class="cut"><span id="cut">1 Cut</span></li>
		<li class="separateur"></li>
        <li class="copy"><span id="copy">1 Copy</span></li>
        <li class="paste"><span id="paste">1 Paste</span></li>
		<li class="separateur"></li>
        <li class="delete"><span id="delete">1 Delete</span></li>
      </ul>
</div>

J'ai trois problèmes :
1) Je voudrais que mon separateur s'arrête au bord vertical de l'image "menubg.gif" (CF image trait rouge)

2) Le hover "bleu ciel" dans le SPAN je voudrais qu'il prenne toute la largeur horizontalle de la cellule SPAN (CF image trait vert)

3) la séparation verticale entre le séparteur et une option menu soit à égale distance (CF image trait bleu)

Merci par avance.

25/07/2012, 19h10
NoSmoking

Bonjour,

Citation:

1) Je voudrais que mon separateur s'arrête au bord vertical de l'image "menubg.gif" (CF image trait rouge)

- avec une en background des séparateurs

Citation:

2) Le hover "bleu ciel" dans le SPAN je voudrais qu'il prenne toute la largeur horizontalle de la cellule SPAN (CF image trait vert)

- suppression des padding

Citation:

3) la séparation verticale entre le séparteur et une option menu soit à égale distance (CF image trait bleu)

- voir du coté de line-height

Pourquoi ajouter un élément SPAN dans les LI?

Bonjour,

Citation:

Citation:
1) Je voudrais que mon separateur s'arrête au bord vertical de l'image "menubg.gif" (CF image trait rouge)

- avec une en background des séparateurs

Je ne comprend pas trop... C'est-à-dire ???

Citation:

Pourquoi ajouter un élément SPAN dans les LI?

Parceque sinon je ne sais pas gérer les icones de gauche :aie:

J'utilise ça comme CSS :
Code:

1 2 3 4 5 6 .context-menu li.cut SPAN { background-image: url(icons/cut.png); } .context-menu li.copy SPAN { background-image: url(icons/copy.png); } .context-menu li.paste SPAN { background-image: url(icons/paste.png); } .context-menu li.edit SPAN { background-image: url(icons/edit.png); } .context-menu li.delete SPAN{ background-image: url(icons/delete.png); }
Comment faire pour sortir les SPAN alors ?

Merci

exemple rapide

Code:

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>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
ul{
  width:150px;
  border:1px solid #e0e0e0;
}
li{
  background-repeat:no-repeat;
  padding-left:20px;
  list-style:none;
}
ul li:hover{
        color: #FFF;
        background-color: #AECFF7;
        cursor: pointer;
        cursor: hand;
}
.sourire{
  background-image:url(http://www.developpez.net/forums/images/icons/icon7.gif);
}
.nosourire{
  background-image:url(http://www.developpez.net/forums/images/smilies/icon_sad.gif);
}
</style>
</head>
<body>
<ul>
  <li class="sourire">sourire</li>
  <li class="nosourire">no sourire</li>
</ul>
</body>
</html>

Citation:

- avec une en background des séparateurs

:oops: il manque un mot, image en l'occurrence -> - avec une image en background des séparateurs

31/07/2012, 00h56
seb-65

Bonjour NoSmoking;

Si je veux utiliser

Code:

background-image: url("images/fond_mnu.png")

dans

Code:

ul li:hover

je ne vois plus les images sourire et nosourire

En fait le "fond_mnu.png" s'affiche bien, le texte sourire est visible mais pas l'icone de gauche sourire :aie:

Une idée de comment faire ?

Merci

je comprends mieux ton besoin de SPAN, tu peux néanmoins t'en passer en mettant tes icones dans la propriété CSS list-style-image de tes LI.

l'exemple
Code:

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 <!DOCTYPE HTML> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>[...]</title> <style type="text/css"> ul{ width:150px; border:1px solid #e0e0e0; padding:0px; } li{ padding-left:5px; list-style-position:inside; } ul li:before{ content:" "; /* éloigne le texte de l'icone */ } ul li:hover{ color: #FFF; cursor: pointer; background-image:url(http://www.developpez.net/forums/images/gradients/gradient_tcat.gif); } .sourire{ list-style-image:url(http://www.developpez.net/forums/images/icons/icon7.gif); } .nosourire{ list-style-image:url(http://www.developpez.net/forums/images/smilies/icon_sad.gif); } </style> </head> <body> <ul> <li class="sourire">sourire</li> <li class="nosourire">no sourire</li> </ul> </body> </html>
Si tu dois assurer une compatibilté IE7 il te faudra ajouter des espaces insécables,  , devant le texte des LI, le pseudo élément :before n'étant pas pris en compte dans cette version de IE.

31/07/2012, 12h04
seb-65

Bonjour,

Avec "list-style-image" cela fonctionne, merci 8-)

Par contre je n'arrive pas bien à centrer les icones par rapport au texte du menu, j'ai l'impression que le "vertical-align:middle;" ne passe pas sur les images en "list-style-image" :calim2:

c'est la limite avec les list-style-image, mais tu peux ajuster tes images.

Une autre approche et de mettre une image en début de tes LI, un peu dans le sens de tes SPAN de départ.

Code:

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
ul{
  width:150px;
  border:1px solid #e0e0e0;
  padding:0px;
}
li{
  padding:0px;
  margin:0;
  list-style-type:none;
  line-height:1.5em
}
li img{
  vertical-align:middle;
  margin-right:10px;
}
ul li:hover{
  color: #FFF;
  cursor: pointer;
  background-image:url(http://www.developpez.net/forums/images/gradients/gradient_tcat.gif);
}
</style>
</head>
<body>
<ul>
  <li><img src="http://www.developpez.net/forums/images/icons/icon7.gif">sourire</li>
  <li><img src="http://www.developpez.net/forums/images/smilies/icon_sad.gif">no sourire</li>
</ul>
</body>
</html>

...une autre approche est de mettre tes textes dans des balises A et de leur appliquer l'image en background, et sur le hover tu appliques une image en background mais sur le LI cette fois.

Code:

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
ul{
  width:150px;
  border:1px solid #e0e0e0;
  padding:0px;
}
li{
  padding:0px;
  list-style-type:none;
  list-style-position:inside;
}
li a{
  color: #000;
  text-decoration: none;
  padding-left:30px;
  line-height:1.25em;
  background-position: 0 center;
  background-repeat: no-repeat;
}
ul li:hover{
  cursor: pointer;
  background-image:url(http://www.developpez.net/forums/images/gradients/gradient_tcat.gif);
}
ul li:hover a{
  color: #FFF;
}
.sourire a{
  background-image:url(http://www.developpez.net/forums/images/icons/icon7.gif);
}
.nosourire a{
  background-image:url(http://www.developpez.net/forums/images/smilies/icon_sad.gif);
}
</style>
</head>
<body>
<ul>
  <li class="sourire"><a href="#sourire">sourire</a></li>
  <li class="nosourire"><a href="#nosourire">no sourire</a></li>
</ul>
</body>
</html>

je pense qu'avec la galerie que je t'ai mis tu devrais t'en sortir.