Différence entre class et id ?

Différence entre class et id ? - HTML/CSS - Programmation

Marsh Posté le 25-03-2005 à 15:26:02    

Bonjour !
 
Quand on crée un menu avec une liste modifiée, il vaut mieux mettre ça:

Code :
  1. ul#navigationbas{
  2. list-style-type:none;
  3. margin:10px 0px 10px 0px;
  4. padding:0;
  5. }
  7. ul#navigationbas li a{
  8. display:block;
  9. width:250px;
  10. color:#FFCC66;
  11. font-size:12px;
  12. font-weight:normal;
  13. border:1px solid #A81120;
  14. }
  16. ul#navigationbas li a:hover{
  17. display:block;
  18. width:250px;
  19. color:#A81120;
  20. background-color:#FFCC66;
  21. font-weight:normal;
  22. border:1px solid #ffffff;
  23. text-decoration:none;
  24. }
  26. ul#navigationbas .gauche{
  27. float:left;
  28. text-align:center;
  29. /*border:1px solid #FFCC66;*/
  30. }
  32. ul#navigationbas .droite{
  33. float:right;
  34. text-align:center;
  35. /*border:1px solid #FFCC66;*/
  36. }
  38. ul#navigationbas .centrenav{
  39. width:300px;
  40. float:none;
  41. }


ou ça:

Code :
  1. ul.navigationbas{
  2. list-style-type:none;
  3. margin:10px 0px 10px 0px;
  4. padding:0;
  5. }
  7. ul.navigationbas li a{
  8. display:block;
  9. width:250px;
  10. color:#FFCC66;
  11. font-size:12px;
  12. font-weight:normal;
  13. }
  15. ul.navigationbas li a:hover{
  16. display:block;
  17. width:250px;
  18. color:#A81120;
  19. background-color:#FFCC66;
  20. font-weight:normal;
  21. }
  23. ul.navigationbas .gauche{
  24. float:left;
  25. text-align:center;
  26. /*border:1px solid #FFCC66;*/
  27. }
  29. ul.navigationbas .droite{
  30. float:right;
  31. text-align:center;
  32. /*border:1px solid #FFCC66;*/
  33. }
  35. ulnavigationbas .centrenav{
  36. width:300px;
  37. float:none;
  38. }


 
C'est-à-dire utiliser des div ou des id ? Je ne vois pas la différence entre les deux en fait, et sur certains sites tout est fait avec des div, sur d'autres tout est fait en id...


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 25-03-2005 à 15:26:02   

Reply

Marsh Posté le 25-03-2005 à 15:44:14    

Autre chose (rien à voir d'ailleurs :o): comment on fait pour soit switcher de CSS, soit carrément qu'il ne la prenne pas en compte) ?


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 25-03-2005 à 15:55:54    

id = désignation d'un élément unique
class = désignation d'un groupe d'éléments (balises identiques ou pas)
.gauche, .droite, .centrenav > aucun sens


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 25-03-2005 à 17:31:39    

masklinn a écrit :

id = désignation d'un élément unique
class = désignation d'un groupe d'éléments (balises identiques ou pas)
.gauche, .droite, .centrenav > aucun sens


Ok, par contre quand mon HTML est

Code :
  1. <ul class="navigationbas"><li class="gauche"><a href="http://www.google.fr" target="_blank">Teste</a></li>
  2. <li class="droite"><a href="http://www.google.fr" target="_blank">Google 2</a></li>
  3. </ul>


 
ça passe très bien :D... Quid ?


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 25-03-2005 à 18:32:22    

?
pas compris


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 25-03-2005 à 23:42:18    

masklinn a écrit :

?
pas compris


Code :
  1. <ul class="navigationbas">
  2.    <li class="gauche">
  3.       <a href="http://www.google.fr" target="_blank">Teste</a>
  4.    </li>
  5.    <li class="droite">
  6.       <a href="http://www.google.fr" target="_blank">Google 2</a>
  7.    </li>
  8. </ul>


J'ai un div pour mon <ul>, un pour mon <li>. Et avec ça l'affichage est impec. Mais où est mon erreur (si j'en fais une) ?


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 25-03-2005 à 23:48:28    

utiliser des classes
utiliser des noms de classes qui indiquent un style (ou l'élément sera placé dans la page, comment il sera rendu) et non un sens (ce qu'il est), ce qui fait qu'une modification de CSS sera très très très tendue.
 
Voir CSSZenGarden pour le genre de souplesse graphique que permet un simple changement de CSS à partir d'un fichier HTML bien conçu


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 26-03-2005 à 07:32:32    

Merci pour ta réponse. Ce CSSZengarden est vraiment une pure merveille.
 
Sinon tu as une idée pour mon autre question:

sanpellegrino a écrit :

Autre chose (rien à voir d'ailleurs :o): comment on fait pour soit switcher de CSS, soit carrément qu'il ne la prenne pas en compte) ?



---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 26-03-2005 à 08:50:19    

Opera et Mozilla/Firefox ont un CSS Switcher intégré (View > Page Style pour Firefox, View > Style pour Opera), pour MSIE rien d'intégré au navigateur, il faut mettre en place un script externe (c'est le boulot du webmaster)
 
A List Apart a un magnifique exemple de CSS Switcher persistant à coup de Javascript et de cookies


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 26-03-2005 à 09:02:42    

Reply

Marsh Posté le 26-03-2005 à 09:02:42   

Reply

Marsh Posté le 26-03-2005 à 14:13:14    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed