[RESOLU][CSS] 2 types de liens sur une page...

2 types de liens sur une page... [RESOLU][CSS] - HTML/CSS - Programmation

Marsh Posté le 23-05-2005 à 04:03:07    

Bonjour,
voila, là je péte les plombs car je cherche la solution à mon problème et je ne la trouve pas.
Je suis sous DW MX 2004.
J'ai sur une page 2 types de liens différents...
Le premier est celui de mon menu-bis et le deuxième renvoie avec des pages pop-up d'explication de terme.
 
Or voila je n'arrive pas a conjuger les 2 dans une même feuille de style.
j'ai toujours l'une des 2 CSS qui prend le dessus sur l'autre et qui fait que mes 2 types de liens qui sont disctints (normalement) ne le sont plus.
 
donc comment faire ?
Je voudrais vous signaler que forcement je débute dans les CSS et que là ca me dépasse totalement.
 
Merci par avance de votre aide ;)


Message édité par Prozac-14 le 24-05-2005 à 14:12:32

---------------
Je suis capable du meilleur comme du pire, mais c'est dans le pire que je suis le meilleur.
Reply

Marsh Posté le 23-05-2005 à 04:03:07   

Reply

Marsh Posté le 23-05-2005 à 04:36:02    

bah ...
Montre nous un exemple de code PERTINENT : pas ta page entiere ... juste la partie des CSS ou tu definis le style de tes liens et la partie de ton code (X)HTML qui utilise tes liens.
 
Ton probleme est surement lié a une histoire de priorite.

Reply

Marsh Posté le 23-05-2005 à 05:46:43    

afbilou a écrit :

bah ...
Montre nous un exemple de code PERTINENT : pas ta page entiere ... juste la partie des CSS ou tu definis le style de tes liens et la partie de ton code (X)HTML qui utilise tes liens.
 
Ton probleme est surement lié a une histoire de priorite.


 
donc voici une partie de mon code...
dans ma page HTML
 

Citation :

<meta name="identifier-url" content="http://www.pc14.fr/">
<meta name="revisit-after" content="15 days">
<title>PC14</title>
<link href="css/style1.css" rel="stylesheet" type="text/css">
<link href="css/style2.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--


 
et voici mes css...
style1
 

Citation :

.style1 {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-style: normal;
 line-height: normal;
 text-indent: 10px;
 color:#333333;
}
.liens {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #FFFFFF;
}
.stylelinkwhite {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-style: normal;
 line-height: normal;  
 color:#FFFFFF;
}
body {
 background-color: #CCCCCC;
 margin-top: 0px;
 margin-left : 0px;
 margin-right : 0px;
 margin-bottom: 0px;
 background-image:  url("../images/01/016.gif" );
}
a:link {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-style: normal;
 line-height: normal;
 font-size: 12px;
 color: #333333;
 text-decoration: none;
}
a:visited {
 color: #333333;
 text-decoration: none;
}
a:hover {
 color: #333333;
 text-decoration: underline;
}
a:active {
 color: #333333;
 text-decoration: none;
}


 
et mon style2
 

Citation :

.style2 {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 font-style: normal;
 line-height: normal;
 color:#ffffff;
}
a:visited {
 color: #ffffff;
 text-decoration: none;
}
a:hover {
 color: #ffffff;
 text-decoration: underline;
}
a:active {
 color: #ffffff;
 text-decoration: none;
}


 
bon je pense qu'un pro va voir tout de suite où est le problème mais moi je ne vois plus car il est 05h45 du mat et je dois me lever dans... 4 heures au maximum... merci de votre aide car LA je suis mort...


---------------
Je suis capable du meilleur comme du pire, mais c'est dans le pire que je suis le meilleur.
Reply

Marsh Posté le 23-05-2005 à 07:32:34    

Quand le navigateur "voit" deux fichiers CSS, il se comporte comme s'il n'y en avait qu'un seul avec le 2e placé à la fin du premier.
 
Ici, les règles du 2e CSS écrasent donc celles du premier.
 
Il te faut utiliser des classes ou utiliser la cascade CSS pour accéder à tes différents liens, si tu ne dis pas aux CSS comment reconnaître des liens distincts elles ne risquent pas de le faire.


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

Marsh Posté le 23-05-2005 à 07:36:43    

Salut,
Tu as bien 2 feuilles de style mais tu définis 2 fois la balise a (une fois dans chque feuille de style) mais le navigateur ne va choisir que l'une ou l'autre des 2 définitions.
Pour bien séparer les liens tu peux faire qu'une feuille de style (à moins que les 2 te soient vraiment nécessaire) dans laquelle tu définis tes styles et pour les liens tu les sépares de la façon suivante a.style1:link et a.style2:link (de même pour les autres attributs de a) et dans ton code tu mets <a class="style1" ...> et <a class="style2" ...>

Reply

Marsh Posté le 23-05-2005 à 07:47:55    

webmidipyrenees a écrit :

tu les sépares de la façon suivante a.style1:link et a.style2:link (de même pour les autres attributs de a) et dans ton code tu mets <a class="style1" ...> et <a class="style2" ...>


Pas terrible: style1 et style2 ne veulent rien dire, ils vont vite ne plus être reconnus et être inmaintenables, mieux vaut les séparer en fonction de leur signification (utiliser les classes "menubis" et "popup" par exemple), ou mieux utiliser l'héritage pour y accéder depuis leur parent (#menubis a et #popup a)


Message édité par masklinn le 23-05-2005 à 07:51:38

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

Marsh Posté le 23-05-2005 à 07:50:01    

c'était juste un exemple pour lui montrer de séparer ces liens  mais c'est vrai que les noms sont mal choisi

Reply

Marsh Posté le 23-05-2005 à 08:58:24    

les garçons... et les filles je vous remercie... je viens d'être reveiller au mileu de ma nuit par un c*n au tel... je me recouche, je fais dodo encore 2 heures et on n'en reparle.
 
Merci merci merci merci... ;)
 
 
(allez hop au dodo.. en plus il fait super beau, ca m'embete d'aller me recoucher mais si je ne le fait pas : je ne pourrais pas faire tout ce que j'ai à faire aujourd'hui...)


---------------
Je suis capable du meilleur comme du pire, mais c'est dans le pire que je suis le meilleur.
Reply

Marsh Posté le 24-05-2005 à 12:34:26    

masklinn a écrit :

Pas terrible: style1 et style2 ne veulent rien dire, ils vont vite ne plus être reconnus et être inmaintenables, mieux vaut les séparer en fonction de leur signification (utiliser les classes "menubis" et "popup" par exemple), ou mieux utiliser l'héritage pour y accéder depuis leur parent (#menubis a et #popup a)


 
bon alors voila ce que cela donne MAIS bien entendu : cela ne fonctionne absolument pas...
 

Citation :

.style1 {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-style: normal;
 line-height: normal;
 text-indent: 10px;
 color:#333333;
}
.liens {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #FFFFFF;
}
.stylelinkwhite {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-style: normal;
 line-height: normal;  
 color:#FFFFFF;
}
body {
 background-color: #CCCCCC;
 margin-top: 0px;
 margin-left : 0px;
 margin-right : 0px;
 margin-bottom: 0px;
 background-image:  url("../images/01/016.gif" );
}
a:link {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-style: normal;
 line-height: normal;
 font-size: 12px;
 color: #333333;
 text-decoration: none;
}
a:visited {
 color: #333333;
 text-decoration: none;
}
a:hover {
 color: #333333;
 text-decoration: underline;
}
a:active {
 color: #333333;
 text-decoration: none;
}
 
#menubis a:link{
 color: #ffffff;
 text-decoration: none;  
}
#menubis a:visited{
 color: #ffffff;
 text-decoration: none;
}
#menubis a:hover {
 color: #ffffff;
 text-decoration: underline;
}
#menubis a:active {
 color: #ffffff;
 text-decoration: none;
}


 
Est-ce que quelqu'un peu m'expliquer pourquoi ? Car là, j'ai cherché la solution durant 2 heures hier, 2 heures aujourd'hui et là je commence à  :pt1cable:  :pt1cable:  :pt1cable:  :pt1cable:  :pt1cable:  :pt1cable:  :pt1cable:  
 
 
merci.


---------------
Je suis capable du meilleur comme du pire, mais c'est dans le pire que je suis le meilleur.
Reply

Marsh Posté le 24-05-2005 à 12:41:35    

Je suis pas madame soleil moi, sans le code HTML je vais avoir du mal à t'aider [:itm]


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

Marsh Posté le 24-05-2005 à 12:41:35   

Reply

Marsh Posté le 24-05-2005 à 12:46:53    


Code :
  1. #menubis a:link{
  2. color: #ffffff;
  3. text-decoration: none; 
  4. }
  5. #menubis a:visited{
  6. color: #ffffff;
  7. text-decoration: none;
  8. }
  9. #menubis a:hover {
  10. color: #ffffff;
  11. text-decoration: underline;
  12. }
  13. #menubis a:active {
  14. color: #ffffff;
  15. text-decoration: none;
  16. }


-->

Code :
  1. .menubis{
  2. color: #ffffff;
  3. text-decoration: none; 
  4. }
  5. .menubis:visited{
  6. color: #ffffff;
  7. text-decoration: none;
  8. }
  9. .menubis:hover {
  10. color: #ffffff;
  11. text-decoration: underline;
  12. }
  13. .menubis:active {
  14. color: #ffffff;
  15. text-decoration: none;
  16. }


et voilà ...
les 'attributs' :hover,:visited, etc sont applicables sur n'importe quel style css perso.... pas obligé de mettre le 'a' devant, qui sera utilisé automatiquement pour tous tes liens...
je te conseille même de ne pas utiliser de css pour 'a' mais bien 2 styles différents, que tu appliqueras aux liens qui vont bien...

Reply

Marsh Posté le 24-05-2005 à 14:11:53    

A... ok LOL...
moi je pensais que l'on été OBLIGE d'utiliser le A...
maintenant effectivement : c'est plus simple, et CA MARCHE !!!
 
je remercie toutes les personnes qui me sont venue en aide pour ce problème technique.
 
Grace à vous je commence a nettement mieux comprendre le fonctionnement des CSS, alors que cela faisait un bout de temps que j'essayais, de comprendre le fonctionnement de cette chose, et grace à vous, je commence à comprendre pas mal de trucs... ;)


---------------
Je suis capable du meilleur comme du pire, mais c'est dans le pire que je suis le meilleur.
Reply

Marsh Posté le 24-05-2005 à 14:26:16    

denzz a écrit :

-->

Code :
  1. .menubis{
  2. color: #ffffff;
  3. text-decoration: none; 
  4. }
  5. .menubis:visited{
  6. color: #ffffff;
  7. text-decoration: none;
  8. }
  9. .menubis:hover {
  10. color: #ffffff;
  11. text-decoration: underline;
  12. }
  13. .menubis:active {
  14. color: #ffffff;
  15. text-decoration: none;
  16. }



Magnifique code pas optimisé [:spamafote]


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

Marsh Posté le 24-05-2005 à 14:33:45    

masklinn a écrit :

Magnifique code pas optimisé [:spamafote]


 
 
bien sur qu'il est pas optimisé ... le but c pas de tout faire a sa place, si ? ?  
 
ca commence a me souler les remarques a 2 balles et les critiques super constructives ...
en plus, c pas pour 10 lignes dans un fichier css que tu vas saturer la bp de ton visiteur.... alors les remarques comme ca franchement :kaola:  :kaola:  :kaola:  :kaola:  :kaola:


Message édité par denzz le 24-05-2005 à 14:34:14
Reply

Marsh Posté le 24-05-2005 à 14:34:15    

peux importe... du moment que cela marche...
je sais que je peux virer les color: #FFFFFF et les text-decoration: none sauf dans le premier... mais ca marche comme ca...


---------------
Je suis capable du meilleur comme du pire, mais c'est dans le pire que je suis le meilleur.
Reply

Marsh Posté le 24-05-2005 à 14:36:07    

( tu peux même virer les classes active et visited pour faire plaisir à madame soleil)

Reply

Marsh Posté le 24-05-2005 à 14:37:52    

Prozac-14 a écrit :

peux importe... du moment que cela marche...
je sais que je peux virer les color: #FFFFFF et les text-decoration: none sauf dans le premier... mais ca marche comme ca...


Et au passage utiliser la forme courte : #fff ;)

Reply

Marsh Posté le 24-05-2005 à 14:39:36    

denzz a écrit :

bien sur qu'il est pas optimisé ... le but c pas de tout faire a sa place, si ? ?  
 
ca commence a me souler les remarques a 2 balles et les critiques super constructives ...


J'ai mentionné l'utilisation de l'héritage CSS il me semble [:itm]  
 
Et des IDs [:itm]


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

Marsh Posté le 24-05-2005 à 14:40:40    

Perso, je laisserais active et visited, j'ai déjà eu des surprises en virant le visited, par contre, tu peux faire comme ça je pense :

Code :
  1. .menubis:link, .menubis:visited, .menubis:active {
  2.      color: #fff;
  3.      text-decoration: none; 
  4. }
  5. .menubis:hover {
  6.      color: #fff;
  7.      text-decoration: underline;
  8. }


 
Si il y a encore d'autres moyens d'optimiser, n'hésitez pas, montrez le, comme ça on le saura une fois pour toutes. ;)


Message édité par The-Shadow le 24-05-2005 à 14:44:51
Reply

Marsh Posté le 24-05-2005 à 14:41:30    

FlorentG a écrit :

Et au passage utiliser la forme courte : #fff ;)


ah bon c'est possible ca ??? je savais pas... merci du truc.  ;)


---------------
Je suis capable du meilleur comme du pire, mais c'est dans le pire que je suis le meilleur.
Reply

Marsh Posté le 24-05-2005 à 14:42:47    

finalement j'ai bien fait de poser cette question... tout le monde apprend des trucs aujourd'hui !


---------------
Je suis capable du meilleur comme du pire, mais c'est dans le pire que je suis le meilleur.
Reply

Marsh Posté le 24-05-2005 à 14:44:51    

ouais, mais masklinn va pas être content, y'a pas d'héritage...

Reply

Marsh Posté le 24-05-2005 à 14:51:50    

Prozac-14 a écrit :

ah bon c'est possible ca ??? je savais pas... merci du truc.  ;)


Pour ce genre de trucs, Roger Johansson a écrit trois très bons articles sur 456 Berea Street:
Efficent CSS with shorthand properties
CSS Tips&Tricks, part 1
et CSS Tips&Tricks part 2
 
Et pour se souvenir de ce genre de choses, rien de mieux que la CSS Cheat Sheet de Dave Child.

denzz a écrit :

ouais, mais masklinn va pas être content, y'a pas d'héritage...


[:kiki]


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

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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