Soucis avec mon menu horizontal : class et id
Bonjour,
Ayant parcouru les ressources aussi bien sur ce forum que dans les FAQ, Cours aux tous autres sites, j'ai vraisemblablement un peu de mal à digérer certaines choses. A force de lire, relire, rerelire, mon petit cerveau s'embrouille.
Je poste tous mes petits soucis ici :
J'ai ce menu :
Code:
1
2
3
4
5
6
7
8
9
10
| <ul id="acces_rapide">
<li id="speedgauche"><a href="index.php">Accueil</a></li>
<li id="speedgauche"><a href="carrosserie.php">Promotions</a></li>
<li id="speedgauche"><a href="produit.php">Pièces</a></li>
<li id="speedgauche"><a href="prestations.php">Prestations</a></li>
<li id="speedgauche"><a href="lister_vehicule_neuf.php">Véhicules</a></li>
<li id="speedgauche"><a href="gestion_site.php">Gestion du site</a></li>
<li id="speeddroite"><a href="connexion.php">Se connecter</a></li>
<li id="speeddroite"><a href="ajouter_client.php">S\'incrire</a></li>
</ul> |
et ce code CSS :
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
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
| /* Accès Rapide */
#acces_rapide
{
height: 28px ;
margin: 0 ;
padding: 0 ;
background: url(acces_rapide.png) 0 -28px ;
}
/* Accès Rapide Droite */
#speedgauche
{
float:left;
height: 28px;
text-align: center;
padding-top: 0px;
list-style-type: none ;
}
#speedgauche a
{
width: 110px ;
height: 28px ;
font-size: 0.9em ;
font-weight: bold ;
letter-spacing: 1.2px ;
color: #fff ;
display: block ;
text-decoration: none ;
border-right: 1px dotted white ;
}
/* Accès Rapide Gauche */
#speedgauche a:hover
{
background: url(acces_rapide.png) 0 0px ;
color:red;
}
#speeddroite
{
float:right;
height: 28px;
text-align: center;
padding-top: 0px;
list-style-type: none ;
}
#speeddroite a
{
font-size: 0.8em ;
font-weight: bold ;
letter-spacing: 1px ;
color: #fff ;
display: block ;
text-decoration: none ;
padding: 0px 5px 4px 5px;
}
#image_fermeture
{
float:right;
list-style-type: none ;
}
#image_fermeture img
{
display: block ;
padding: 1.5px 2px 0px 0px;
border:none;
}
#speeddroite a:hover
{
background: url(acces_rapide.png) 0 -28px ;
color:red;
} |
La première chose qui frappe, c'est que j'utilise un id plusieurs fois sur la même page, chose qui n'est pas valable.
Je me dis, les id et les class fonctionnes de la même manière à la différence que les id c'est unique et non une classe.
Je modifie donc mes id speedgauche et speeddroite en class aussi bien dans mon code HTML que mon CSS. Seul hic, le résultat est loin d'être celui que j'aurai obtenu si j'avais laissé mes id ...
Qu'est ce que je n'ai pas compris dans l'utilisation de class et id ?
