[Débutant]Suite au topic Barre agréable en CSS

**moomba** · 03/09/2008, 11h53

Bonjour

suite au sujet posté précédement, http://www.developpez.net/forums/d60...menu-agreable/, je vient de me remettre sur mon projet, mais je suis encore bloqué

(pas bien doué, c'est vrai)

Pour rappele, je veut faire un menu en CSS, language où je débute, composé de 2 étages type digg.com.
On peut maintenant survoler les textes de l'etage le plus en haut, les images derrière le texte changent.
J'ai cherché à faire la même chose pour la seconde barre, mais là ça marche plus. Rien ne se passe (pas de changeemnt d'images si l'on utilise la classe active, pas de changement d'images en passant dessus, et en plus, la possibilitée de cliquer sur le texte (lien hypertexte) à disparus

Voiçi le code, il est trés simple, c'est pourquoi je ne voit pas l'erreur...

Le fichier 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
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>
</head>
<body>
 
<div id="topbar">
    <a href="/toppage1.html"><span>All</span></a>
    <a href="/toppage2.html" class="active"><span>News</span></a>
    <a href="/toppage3.html"><span>Video</span></a>
    <a href="/toppage4.html"><span>Images</span></a>
</div>
 
<div id="middlebar">
    <b href="/midpage1.html"><span>Technology</span></b>
    <b href="/midpage2.html"><span>World</span></b>
    <b href="/midpage3.html" class="active"><span>Science</span></b>
    <b href="/midpage4.html"><span>Gaming</span></b>
</div>
 
</body>
</html>

Le fichier style.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
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
114
115
116
117
118
119
120
121
122
123
#topbar
{
    font-family:Arial;
    font-size:14px;
    color:#3b5d14;
    background:#b2d281;
    font-weight:bold;
    padding:6px;
    overflow:auto;
    height:3.5%;
	display:block;
    clear:both;
}
 
#topbar a
{
    color:#3b5d14;
    text-decoration:none;
    margin:0 10px;
    height:23px;
    line-height:23px;
    float:left;
    display:block;
}
 
a.active
{
    height:23px;
    line-height:23px;
    background:url(tb_a.png) right top no-repeat;
    padding-right:10px;
}
 
a.active span
{
    background:url(tb_span.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
}
 
a:hover
{
    height:23px;
    line-height:23px;
    background:url(tb_a_hover.png) right top no-repeat;
    padding-right:10px;
}
 
a:hover span
{
    background:url(tb_span_hover.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
}            
 
#middlebar
{
    font-family:Arial;
    font-size:11px;
    color:#3b5d14;
    background:#90b557;
    font-weight:bold;
    padding:6px;
    overflow:auto;
    height:3.5%;
	display:block;
    clear:both;
}
 
#middlebar b
{
    color:#3b5d14;
    text-decoration:none;
    margin:0 5px;
    padding-right:10px;
    height:23px;
    line-height:23px;
    display:block;
    float:left;
    background:url(mb_a.png) right top no-repeat;
}
 
#middlebar b span
{
    background:url(mb_span.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
}
 
b.active
{
    height:23px;
    line-height:23px;
    background:url(mb_a_active.png) right top no-repeat;
    padding-right:10px;
}
 
b.active span
{
    background:url(mb_span_active.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
}
 
b:hover
{
    height:23px;
    line-height:23px;
    background:url(mb_a_hover.png) right top no-repeat;
    padding-right:10px;
}
 
b:hover span
{
    background:url(mb_span_hover.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
}

Désolé de déranger encore du monde avec quelque chose qui doit être évident, mais je ne vois vraiment pas...

**Bovino** · 03/09/2008, 12h13

Ben oui, tu remplaces les balises <a> par des balises <b> !

EDIT:
Pour rappel :
balise <a> = lien;
balise <b> = texte en gras.

**moomba** · 03/09/2008, 13h25

je vais me pendre... C'est tellement gros, je comprend pas comment ça m'a échappé...

J'ai bien remis correctement le code HTML, mais le CSS ne marche toujours pas :

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
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>
</head>
<body>
 
<div id="topbar">
    <a href="/toppage1.html"><span>All</span></a>
    <a href="/toppage2.html" class="active"><span>News</span></a>
    <a href="/toppage3.html"><span>Video</span></a>
    <a href="/toppage4.html"><span>Images</span></a>
</div>
 
<div id="middlebar">
    <a href="/midpage1.html"><span>Technology</span></a>
    <a href="/midpage2.html"><span>World</span></a>
    <a href="/midpage3.html" class="active"><span>Science</span></a>
    <a href="/midpage4.html"><span>Gaming</span></a>
</div>
 
</body>
</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
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
114
115
116
117
118
119
120
121
122
123
#topbar
{
    font-family:Arial;
    font-size:14px;
    color:#3b5d14;
    background:#b2d281;
    font-weight:bold;
    padding:6px;
    overflow:auto;
    height:3.5%;
	display:block;
    clear:both;
}
 
#topbar a
{
    color:#3b5d14;
    text-decoration:none;
    margin:0 10px;
    height:23px;
    line-height:23px;
    float:left;
    display:block;
}
 
a.active
{
    height:23px;
    line-height:23px;
    background:url(tb_a.png) right top no-repeat;
    padding-right:10px;
}
 
a.active span
{
    background:url(tb_span.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
}
 
a:hover
{
    height:23px;
    line-height:23px;
    background:url(tb_a_hover.png) right top no-repeat;
    padding-right:10px;
}
 
a:hover span
{
    background:url(tb_span_hover.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
}            
 
#middlebar
{
    font-family:Arial;
    font-size:11px;
    color:#3b5d14;
    background:#90b557;
    font-weight:bold;
    padding:6px;
    overflow:auto;
    height:3.5%;
	display:block;
    clear:both;
}
 
#middlebar a
{
    color:#3b5d14;
    text-decoration:none;
    margin:0 5px;
    padding-right:10px;
    height:23px;
    line-height:23px;
    display:block;
    float:left;
    background:url(mb_a.png) right top no-repeat;
}
 
#middlebar a span
{
    background:url(mb_span.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
}
 
a.active
{
    height:23px;
    line-height:23px;
    background:url(tb_a.png) right top no-repeat;
    padding-right:10px;
}
 
a.active span
{
    background:url(tb_span.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
}
 
a:hover
{
    height:23px;
    line-height:23px;
    background:url(tb_a_hover.png) right top no-repeat;
    padding-right:10px;
}
 
a:hover span
{
    background:url(tb_span_hover.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
}

En fait, ca me parrait un peu stupide de reprendre la lettre "a" 2 fois pour les mêmes classes, mais si je prend une lettre différente (genre "aa"), il n'y a plus rien qui marche... (je me retrouve avec une barre coulissante à droite, comme quand je lance mon truc avec IE6. (je suis sous Firefox 3.01))

Ca doit encore être un truc débile en plus...

Mais je suis pas sur mon PC, et ici, je n'ai que le Notepad de windows, c'est vraiment moche...

**moomba** · 03/09/2008, 16h17

En fait mon problème peut être résumé simplement :

J'ai 2 barres, utilisant des styles et des couleurs différents.

Hors, si je fait un simple fichier HTML de type suivant :

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
<html>
<head>
<style type="text/css"> 
#topbar
{
    font-family:Arial;
    font-size:14px;
    color:#ffffff;
    background:#0356a9;
    font-weight:bold;
    padding:6px;
    overflow:auto;
    height:3.5%;
	display:block;
    clear:both;
}
 
#topbar a
{
    color:#000000;
    text-decoration:none;
    margin:0 10px;
    height:23px;
    line-height:23px;
    float:left;
    display:block;
}
 
#downbar
{
    font-family:Arial;
    font-size:14px;
    color:#ffffff;
    background:#00ccff;
    font-weight:bold;
    padding:6px;
    overflow:auto;
    height:3.5%;
	display:block;
    clear:both;
}
 
#downbar a
{
    color:#ffffff;
    text-decoration:none;
    margin:0 10px;
    height:23px;
    line-height:23px;
    float:left;
    display:block;
}
 
a.active
{
    color:#000000
    height:23px;
    line-height:23px;
    background:url(tb_a.png) right top no-repeat;
    padding-right:10px;
}
 
a.active span
{
    color:#000000
    background:url(tb_span.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
}
 
a:hover
{
    height:23px;
    line-height:23px;
    background:url(tb_a_hover.png) right top no-repeat;
    padding-right:10px;
}
 
a:hover span
{
    background:url(tb_span_hover.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
} 
 
img{ 
border:0; 
} 
 
</style>
  <title></title>
</head>
<body>
<div id="topbar"><a href="Essai.html"><span>All</span></a></div>
<div id="downbar"><a href="Essai.html"><span>essai</span></a></div>
</body>
</html>

Tout fonctionne, mais les 2 barres ont exactement les mêmes réactions quand on les survole ou quand on les classe comme active.
Est t-il donc possible de définir un type d'image pour le survol de la première barre, et un autre type d'image pour la seconde ?

PS : je n'ai plus internet durant 2 j, désolé si je tarde à regarder la réponse

**moomba** · 03/09/2008, 16h54

Trouvé

voila le code :

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
<html>
<head>
<style type="text/css"> 
#topbar
{
    font-family:Arial;
    font-size:14px;
    color:#ffffff;
    background:#0356a9;
    font-weight:bold;
    padding:6px;
    overflow:auto;
    height:3.5%;
    display:block;
    clear:both;
}
 
#topbar a
{
    color:#000000;
    text-decoration:none;
    margin:0 10px;
    height:23px;
    line-height:23px;
    float:left;
    display:block;
}
 
#downbar
{
    font-family:Arial;
    font-size:14px;
    color:#ffffff;
    background:#00ccff;
    font-weight:bold;
    padding:6px;
    overflow:auto;
    height:3.5%;
	display:block;
    clear:both;
}
 
#downbar a
{
    color:#ffffff;
    text-decoration:none;
    margin:0 10px;
    height:23px;
    line-height:23px;
    float:left;
    display:block;
}
 
#topbar a.active
{
    color:#000000
    height:23px;
    line-height:23px;
    background:url(tb_a.png) right top no-repeat;
    padding-right:10px;
}
 
#topbar a.active span
{
    color:#000000
    background:url(tb_span.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
}
 
#topbar a:hover
{
    height:23px;
    line-height:23px;
    background:url(tb_a_hover.png) right top no-repeat;
    padding-right:10px;
}
 
#topbar a:hover span
{
    background:url(tb_span_hover.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
} 
 
#downbar a.active
{
    color:#000000
    height:23px;
    line-height:23px;
    background:url(tb_a.png) right top no-repeat;
    padding-right:10px;
}
 
#downbar a.active span
{
    color:#000000
    background:url(tb_span.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
}
 
#downbar a:hover
{
    height:23px;
    line-height:23px;
    background:url(tb_orange_active.png) right top no-repeat;
    padding-right:10px;
}
 
#downbar a:hover span
{
    background:url(tb_span_orange_active.png) left top no-repeat;
    height:23px;
    display:block;
    padding-left:10px;
} 
 
img{ 
border:0; 
} 
 
</style>
  <title></title>
</head>
<body>
<img src="noir.png" name="image"/>
<div id="topbar"><a href="Essai.html"><span>All</span></a></div>
<div id="downbar"><a href="Essai.html"><span>essai</span></a></div>
</body>
</html>

Merci pour ton aide Bovino

[Débutant]Suite au topic Barre agréable en CSS

CSS

Discussions similaires

Partager

Partager