problème pour transposer li a b

**Benat64** · 04/06/2008, 13h23

Bonjour à tous,

Je voudrais utiliser la classe b mais pas dans du <li>.
Je suis en train de faire un menu horizontal avec des niveaux et en css.

Le menu horizontal est en <div> et c'est la dedans que je voudrais rajouter la classe b afin de changer le côté droit du menu sélecionné.

L'adresse du menu exemple est glossy horizontal menu/

Cela est-il possible ?
Merci de votre aide
Benoit

**Candygirl** · 04/06/2008, 13h30

Je crains n'avoir pas très bien compris la question

Une class peut être attribuée sans souci à différents éléments.

Tu ferais mieux de donner ton code à toi plutôt qu'un exemple générique.

**Benat64** · 04/06/2008, 13h51

Désolé pour mon explicaion peu claire.

Donc le code est celui-ci pour la partie 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
				<script language="javascript" type="text/javascript" src="menu.js"></script>
				<link rel="stylesheet" type="text/css" href="lookxp.css">
				<script language="javascript" type="text/javascript" >
						espace_entre_menus = 0;
						largeur_menu=110;
						largeur_sous_menu=170;
						top_ssmenu=25;
				</script>
				<div id="conteneurmenu">
					<script language="Javascript" type="text/javascript">
					// pour éviter le clignotement désagréable
					preChargement();
					</script>
 
		<div id="menu1" class="menu"
			onmouseover="MontrerMenu('ssmenu1');"
			onmouseout="CacherDelai();">
			<a href="http://www.asfo-adour.org" onmouseover="MontrerMenu('ssmenu1');"
			onfocus="MontrerMenu('ssmenu1');">Accueil<span>&nbsp;:</span></a>
    </div>
<!-- ----------------------------------------- -->
    <div id="menu2" class="menu"
		onmouseout="CacherDelai();"
		onmouseover="MontrerMenu('ssmenu2');">
      <a href="Asfo/main.php?do=modulGuide"
		onfocus="MontrerMenu('ssmenu2');">Guide<span>&nbsp;:</span></a>
    </div>
<!-- ----------------------------------------- -->
    <div id="menu3" class="menu"
		onmouseover="MontrerMenu('ssmenu3');"
		onmouseout="CacherDelai();">
      <a href="#"
		onFocus="MontrerMenu('ssmenu3');">Pr&eacute;sentation &raquo;<span>&nbsp;:</span></a>
    </div>
	<ul id="ssmenu3" class="ssmenu"
		onmouseover="AnnulerCacher();"
		onmouseout="CacherDelai();"
		onFocus="AnnulerCacher();"
		onblur="CacherDelai();">
	<li>
		<a href="Asfo/accueil.php"><img src="Asfo/art/menu/lookxpfaq.gif" align="absmiddle" alt="" />Qui sommes-nous ?<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="Asfo/moyens.php"><img src="Asfo/art/menu/tools.gif" align="absmiddle" alt="" />Les moyens<span>&nbsp;;</span></a>
	</li>
	<li>
		<a href="Asfo/lieux.php"><img src="Asfo/art/menu/word.gif" align="absmiddle" alt="" />Les lieux<span>&nbsp;;</span></a>
	</li>
	</ul>

Le fichier css est :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/***** menu CSS *****/
@media print {
	.menu, .ssmenu {
		visibility:hidden;
	}
}

.menu {
	position : relative;
	background: url(menuhorizontal/menub_bg.gif) repeat-x;
	color:black;
	font-size:12px;
	font-weight:bold;
/*	border:1px solid #9F7F85; */
	padding: 0 0 0 14px;
	margin: 0 auto 0 auto;
	width:130px;
	height: 46px;
}
.menu {
	text-align:center;
}
.menu a{
	float: left;
	display: block;
	color:#000;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding:0 0 0 16px; 
	height: 46px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;	
}
.menu a b{
	float: left;
	display: block;
	padding: 0 24px 0 2px; 
}
.menu.current a, .menu a:hover{
	color: #fff;
	background: url(menuhorizontal/menub_hover_left.gif) no-repeat; 	background-position: left;
	height : 100%;
}
.menu a b, .menu a:hover b{
	color: #fff;
	background: url(menuhorizontal/menub_hover_right.gif) no-repeat right top;
	height : 100%;
}
.ssmenu {
	background-image: url('img/lookxpback1.gif');
	background-attachment:left;
	background-repeat:repeat-y;
	color:black;
	font-size:12px;
	font-weight:bold;
}

.menu span, .ssmenu span {
	display:none;
}

.ssmenu ul, .ssmenu li {
	padding:0;
	list-style-type:none;
}

.ssmenu a, .menu a:visited, .ssmenu a:visited {
	font-family:Verdana;
	text-decoration:none;
	color:black;
	padding:4px 3px;
	display:block;
	margin:0px;*/
	margin:0px;
	width:100%;
	voice-family: "\"}\"";
	voice-family:inherit;
}
html>body .menu a, html>body .menu a:visited, html>body .menu a:hover, html>body .menu a:active,
html>body .ssmenu a, html>body .ssmenu a:visited, html>body .ssmenu a:hover, html>body .ssmenu a:active {
	width :auto;
}


.ssmenu ul:hover, .ssmenu a:hover, .ssmenu a:focus, {
	border:1px solid #316BC6;
	background-color:#FFFF99;
	color:black;
	text-decoration:none;
	padding:3px 2px;
}

img {
	border:none;
}

.ssmenu img {
	margin-right:8px;
}


.ssmenu img.hr {
	margin-top:1px;
	margin-bottom:1px;
	margin-left:0;
	margin-right:0;
	width:100%;
	height:1;
	display:block;
}

Merci pour l'aide
Benoit

**Candygirl** · 04/06/2008, 15h51

Envoyé par Benat64

Code :

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

1
2
3
4
5
6
7
.menu a b{

}
.menu a b, .menu a:hover b{

}

Avec cette syntaxe de sélecteur, on ne cible pas une classe b mais un élément b (le contenu entre les balises <b></b>)

Hors dans ton html tu n'as pas d'élément b à l'intérieur d'un a dans ton .menu. Je ne comprends toujours pas grand chose à ton problème

**Benat64** · 04/06/2008, 16h14

Envoyé par Candygirl

Avec cette syntaxe de sélecteur, on ne cible pas une classe b mais un élément b (le contenu entre les balises <b></b>)

Hors dans ton html tu n'as pas d'élément b à l'intérieur d'un a dans ton .menu. Je ne comprends toujours pas grand chose à ton problème

Je répète que je voudrais remplacer le code :

Code :

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

1
2
3
4
5
6
7
 
.menu li a b{
 
}
.menu li a b, .menu li a:hover b{
 
}

par un autre utilisant un <div> par exemple.
C'est à dire que dans un exemple de code qui utilise :

Code :

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

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

pour la partie html, le css fait référence d'une classe li a b (le b permettant d'aficher une image pour le côté droit du bouton).

Or dans mon code html les titres des menus ne sont pas encapsulé par des ul li.

Donc y-a-t'il moyen d'utiliser dans un div .menu une image côté gauche et une pour la droite lorsque le curseur pointeur de souris passe par desus ?

un exemple utilisant ce principe se trouve ici. Or moi dans mon menu la partie horizontale n'est pas dans des ul li et là je ne sais pas transposer.

J'espère être plus clair

Benoit

**beeboo** · 04/06/2008, 17h11

Salut,
Je crois que je viens de comprendre ce que tu veux faire.
C'est ce qu'on appelle la technique des portes coulissantes qui permet de faire des onglets avec image de fond et de longueur variable.

Pour ça il faut définir l'image de gauche pour l'élément contenant (<li> ou <div>) et l'image du centre et droite dans l'élément contenu (en général le <a>)

Code :

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

1
2
3
4
5
6
7
div.menu {
  url(image du bord gauche) top left no-repeat;
}
 
div.menu a {
 url(image du centre et droite) top right no-repeat;
}

problème pour transposer li a b

CSS

Vue hybride

Discussions similaires

Partager

Partager