[Débutant]Faire une barre de menu agréable

**moomba** · 30/08/2008, 15h54

Bonjour

Je cherche à faire une barre de menu pour mon site web.

J'utilise Kompozer en temps normal, mais j'aimerais faire autre chose qu'un truc moche tout carré.

J'ai utilisé le tuto ici :
http://pckult.developpez.com/tutoriels/css/menu-digg/

J'ai remodifié un peu le code à la recommandation de certains internautes, et j'obtient ceci :

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"><span>Science</span></a>
    <a href="/midpage4.html"><span>Gaming</span></a>
</div>
 
</body>
</html>

Et le fichier styles.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
 
#topbar
{
    font-size:14px;
    color:#3b5d14;
    background:#b2d281;
    font-weight:bold;
    padding:6px;
    overflow:auto;
    height:4%;
	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;
}
 
 
#middlebar
{
    font-size:11px;
    color:#3b5d14;
    background:#90b557;
    font-weight:bold;
    padding:6px;
    overflow:auto;
    height:4%;
	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;
}

Jusque là, tout vas bien, et le menu fonctionne sous Firefox 3 (pas sous IE6, je vais essayer avec le 7, et j'espère que ça ira)

Cependant, j'aimerais ajouter le fait que quand la sourie passe sur l'un des textes (Vidéo, gaming, ...) l'image qui est derrière le texte change. Un simple effet pour rendre tout cela plus vivant, sans tomber dans l'excès du "tout il est beau, tout il clignote"

(j'aimerai en fait des boutons bleus qui deviennent orange au passage de la sourie)

Merci d'avance pour votre aide...

**12monkeys** · 30/08/2008, 16h02

Bonjour

Envoyé par moomba

Cependant, j'aimerais ajouter le fait que quand la sourie passe sur l'un des textes (Vidéo, gaming, ...) l'image qui est derrière le texte change. Un simple effet pour rendre tout cela plus vivant, sans tomber dans l'excès du "tout il est beau, tout il clignote"

Je te donne une piste : regarde du coté de hover pour faire ça, tu verra il y a plein de discussions qui en parlent...

**moomba** · 31/08/2008, 11h57

Bonjour

Désolé pour le retard, j'ai des petits pépins d'informatiques

Je regarde tout de suite et te tient au courant

Merci beaucoup

**moomba** · 31/08/2008, 13h52

Je doit donc rajouter dans mon fichier CSS un truc dans le genre ? :

Code :

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

1
2
3
4
5
6
7
a.hover
{
    height:23px;
    line-height:23px;
    background:url(Image_Lien_Survolee.png) right top no-repeat;
    padding-right:10px;
}

C'est cela ?

Je ne connais presque rien au CSS, d'habitude, je fait du JAVA ou du VB

**E.Fahd** · 31/08/2008, 14h09

Salam,

- C'est à peu près cela, au détail près que hover est une pseudo-classe et qu'il faudrait peut-être revoir la syntaxe des pseudo-classes.

**12monkeys** · 31/08/2008, 14h37

Je t'avais mis un lien vers les spécifications, l'as tu vu ?
La syntaxe exacte est :

Code :

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

a:hover { color: yellow; }

**moomba** · 31/08/2008, 15h13

Merci beaucoup à vous deux

En effet, avec la bonne syntaxe, ca marche super

Je t'avais mis un lien vers les spécifications, l'as tu vu ?

Oui, sinon je n'aurais pas pus réussir. Je me suis trompé en recopiant:

a:hover et non a.hover

Erreur débile, mais vue que je ne connais presque rien au CSS, ça ne m'as pas frappé

(je comprend mieux la remarque :

il faudrait peut-être revoir la syntaxe des pseudo-classes

)

Encore merci, c'est super maintenant

[Débutant]Faire une barre de menu agréable

CSS

Discussions similaires

Partager

Partager