Soucis avec mon menu horizontal : class et id

**ero-sennin** · 08/08/2008, 14h12

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 html :

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

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 css :

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
/* 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 ?

**c_s_s** · 08/08/2008, 15h11

Bonjour,

Je viens de tester avec le code que tu as fourni, il n'y a aucune différence quand on remplace les ID par des CLASS.

Si tu as obtenu un résultat différent, tu as peut-être fait une fausse manipulation.

En tout cas tu as compris le principe des ID et des CLASS.