Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2488 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  un peu perdu avec les CSS

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

un peu perdu avec les CSS

n°1993416
erwan83
Du Shift DEL tu te méfieras !
Posté le 16-05-2010 à 11:20:57  profilanswer
 

bonjour
 
si je declare par exemple le style nuage3
 

Code :
  1. .nuage3
  2. {
  3. background:#FFFFFF;color:#000033;
  4. font-size: 16px;
  5. font-family: Arial;
  6. text-align:left;
  7. }


que dois je mettre si je veux avoir des sous styles en  
lien,  
lien visité,
lien survolé?
 
je sais que pour le lien a priori je dois saisir
.nuage3 a
{......
 
je me trompe ?


---------------
http://www.ypikay.com
mood
Publicité
Posté le 16-05-2010 à 11:20:57  profilanswer
 

n°1993462
phosphorel​oaded
Posté le 16-05-2010 à 18:11:01  profilanswer
 

.nuage3 a {
    color: #000033;
    text-decoration: underline;
}
 
.nuage3 a:visited {
    color: #660066;
}
 
.nuage3 a:hover {
    color:#444488;
}


 
DANS CET ORDRE (règle des LVHA) http://meyerweb.com/eric/thoughts/ [...] nk-states/
et tu n'oublies pas :focus (navigation au clavier) à styler de la même façon que :hover :o


Message édité par phosphoreloaded le 16-05-2010 à 18:12:09
n°1993465
erwan83
Du Shift DEL tu te méfieras !
Posté le 16-05-2010 à 18:27:33  profilanswer
 

supra cool !
Merci beaucoup


---------------
http://www.ypikay.com
n°1993471
erwan83
Du Shift DEL tu te méfieras !
Posté le 16-05-2010 à 19:12:16  profilanswer
 

bon si je resume, j'en suis à peu pret là :
 

Code :
  1. .nuage2{
  2. color:#000033;
  3. background-image : url('../images/background2.jpg');
  4. font-size: 14px;
  5. font-family: Arial;
  6. text-align:left;
  7. }
  8. .nuage2 a:link{
  9. color:#000033;
  10. background-image : url('../images/background2.jpg');
  11. font-size: 14px;
  12. font-family: Arial;
  13. text-align:left;
  14. }
  15. .nuage2 a:visited{
  16. color:#000033;
  17. background-image : url('../images/background2.jpg');
  18. font-size: 12px;
  19. font-family: Arial;
  20. text-align:left;
  21. }
  22. .nuage2 a:hover{
  23. color:#000033;
  24. background-image : url('../images/background2.jpg');
  25. font-size: 12px;
  26. font-family: Arial;
  27. text-align:left;
  28. }
  29. .nuage2 a:focus{
  30. color:#000033;
  31. background-image : url('../images/background2.jpg');
  32. font-size: 12px;
  33. font-family: Arial;
  34. text-align:left;
  35. }


 
le truc c'est que je voudrais changer les images en fonction de si on passe la souris dessus mais j'ai peur que ca ne devienne plus compliqué
(il ne faut pas pré-charger les images... ?)

Message cité 1 fois

---------------
http://www.ypikay.com
n°1993487
phosphorel​oaded
Posté le 16-05-2010 à 20:50:10  profilanswer
 

Commence par définir .nuage2 a (tout court, sans pseudo-classe) puis pour chaque pseudo-classe tu n'as plus qu'à préciser les propriétés qui changent de valeur : couleur, image de fond.
Ce qui est commun (font-*, text-align) sera déjà défini grâce à .nuage2 a

 

Images de fond: ben teste comme ça ;)


Message édité par phosphoreloaded le 16-05-2010 à 20:50:31
n°1993511
toum_toum
Vivons masqués
Posté le 16-05-2010 à 23:13:34  profilanswer
 

erwan83 a écrit :

bon si je resume, j'en suis à peu pret là :
 

Code :
  1. .nuage2{
  2. color:#000033;
  3. background-image : url('../images/background2.jpg');
  4. font-size: 14px;
  5. font-family: Arial;
  6. text-align:left;
  7. }
  8. .nuage2 a:link{
  9. color:#000033;
  10. background-image : url('../images/background2.jpg');
  11. font-size: 14px;
  12. font-family: Arial;
  13. text-align:left;
  14. }
  15. .nuage2 a:visited{
  16. color:#000033;
  17. background-image : url('../images/background2.jpg');
  18. font-size: 12px;
  19. font-family: Arial;
  20. text-align:left;
  21. }
  22. .nuage2 a:hover{
  23. color:#000033;
  24. background-image : url('../images/background2.jpg');
  25. font-size: 12px;
  26. font-family: Arial;
  27. text-align:left;
  28. }
  29. .nuage2 a:focus{
  30. color:#000033;
  31. background-image : url('../images/background2.jpg');
  32. font-size: 12px;
  33. font-family: Arial;
  34. text-align:left;
  35. }


 
le truc c'est que je voudrais changer les images en fonction de si on passe la souris dessus mais j'ai peur que ca ne devienne plus compliqué
(il ne faut pas pré-charger les images... ?)


 
Salut.
 
Ca ne sert à rien de réécrire tes lignes de codes plusieurs fois quand tu as des propriétés communes.
C'est à ça que te sert .nuage2
 
Tu peux donc simplifier ton écriture au dessus par :
 

Code :
  1. .nuage2{
  2. color:#000033;
  3. background-image : url('../images/background2.jpg');
  4. font-size: 14px;
  5. font-family: Arial;
  6. text-align:left;
  7. }
  8. .nuage2 a:link{
  9. color:#000033;
  10. }
  11. .nuage2 a:visited{
  12. color:#000044;
  13. .nuage2 a:hover{
  14. color:#000055;
  15. }
  16. .nuage2 a:focus{
  17. color:#000055;
  18. }


(par exemple)
 
Et s'il s'agit de changer ton apparence au survol, et bien tu conserves tes lignes background-image : url('../images/backgroundX.jpg');
en remplaçant "X" par ton numero d'image (pour reprendre ton exemple...)
 


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
n°1997205
erwan83
Du Shift DEL tu te méfieras !
Posté le 30-05-2010 à 01:05:21  profilanswer
 

Ah yes ! cool ça !
je savais pas
merci !


---------------
http://www.ypikay.com

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  un peu perdu avec les CSS

 

Sujets relatifs
[resolu] Probleme d'heritage des CSSFREEBOX : perdu localhost après passage en mode routeur
[CSS] Problème taille typo[Résolu] Questions Menu déroulant /opacité/IE7
[Résolu] Lignes de code CSS venues de Saturne ?CSS Alignement des blocs horizontal
[Résolu] Bug: le texte est gros aléatoirement...Vérifier l'utilisation d'un CSS sur tout un site
CSS et pages en chinois : aide bienvenue !Problème feuille de style CSS
Plus de sujets relatifs à : un peu perdu avec les CSS

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.045 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR