CSS liste (li) et a:hover

CSS liste (li) et a:hover - HTML/CSS - Programmation

Marsh Posté le 01-06-2005 à 12:09:31    

Pourquoi quand je passe la souris sur ma liste... le contour ne devient pas rouge ?
 
mon code :

Code :
  1. .colorlist li{
  2. border: 1px solid gray;
  3. float: left;
  4. margin:1px;
  5. padding:0px;
  6. width:10px;
  7. height:10px;
  8. }
  10. .colorlist a
  11. {
  12. cursor: crosshair;
  13. }
  15. .colorlist a:hover
  16. {
  17. border-color: #FF0000;
  18. }
  20. .colorlist a:active
  21. {
  22. border-color: #00FF00;
  23. }

Reply

Marsh Posté le 01-06-2005 à 12:09:31   

Reply

Marsh Posté le 01-06-2005 à 12:18:14    

[:petrus75]
 
Tu m'explique quelle bordure devient rouge?


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 01-06-2005 à 12:19:09    

et bien la bordure de l'element de liste ! <li> </li>

Reply

Marsh Posté le 01-06-2005 à 12:20:32    

freed102 a écrit :

et bien la bordure de l'element de liste ! <li> </li>


Tu peux m'expliquer à quel endroit tu dis à la bordure du <li> de devenir rouge? [:klem3i1]


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 01-06-2005 à 12:23:04    

.colorlist a:hover  
{  
border-color: #FF0000;  
}  
 
quand je passe la souris dessus... c censé devenir rouge !
 
j'ai essayé  
 
.colorlist li a:hover  
{  
border-color: #FF0000;  
}  
 
.... pareil !

Reply

Marsh Posté le 01-06-2005 à 12:25:02    

ps : la liste est composée telle quelle :
 

Code :
  1. <ul id="couleur_nom100" class="colorlist">
  2. <li id="000000" style="background-color: rgb(0, 0, 0);">
  3. <a href="#">
  4. <img alt="000000" src="dummy.gif" height="10" width="10">
  5. </a>
  6. </li>
  7. <li id="000033" style="background-color: rgb(0, 0, 51);">
  8. [...]


 
... c'est la traduction de JavascriptDOM que fait Firefox !


Message édité par freed102 le 01-06-2005 à 12:27:06
Reply

Marsh Posté le 01-06-2005 à 12:27:07    

freed102 a écrit :

.colorlist a:hover  
{  
border-color: #FF0000;  
}  
 
quand je passe la souris dessus... c censé devenir rouge !
 
j'ai essayé  
 
.colorlist li a:hover  
{  
border-color: #FF0000;  
}  
 
.... pareil !


Relis ma question et relis ton code, tu te rendras peut-être compte de l'énorme erreur:
 

Citation :

Tu peux m'expliquer à quel endroit tu dis à la bordure du <li> de devenir rouge? [:klem3i1]


 
Et tu devrais reprendre ton code HTML, parce que rien que dans ce que tu me postes je vois 5 ou 6 erreurs


Message édité par masklinn le 01-06-2005 à 12:28:16

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 01-06-2005 à 12:28:38    

bah je vois pas...
 
j'ai ecrit aussi :

Citation :


j'ai essayé  
 
.colorlist li a:hover  
{  
border-color: #FF0000;  
}  
 
.... pareil !

Reply

Marsh Posté le 01-06-2005 à 12:31:13    

freed102 a écrit :

bah je vois pas...
 
j'ai ecrit aussi :

Citation :


j'ai essayé  
 
.colorlist li a:hover  
{  
border-color: #FF0000;  
}  
 
.... pareil !



tu peux m'expliquer à quel endroit de ce code tu modifies la bordure DE TON ELEMENT <LI> ?
(putain on va ptet finir par y arriver un jour [:mlc] )


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 01-06-2005 à 12:31:34    

masklinn a écrit :


Et tu devrais reprendre ton code HTML, parce que rien que dans ce que tu me postes je vois 5 ou 6 erreurs


bah comme je te l'ai indiqué.. le code HTML c'est celui que firefox génére avec du JDOM ! c pas moi qui l'ai composé ! moi j'ai fait du DOM !

Reply

Marsh Posté le 01-06-2005 à 12:31:34   

Reply

Marsh Posté le 01-06-2005 à 12:32:41    

freed102 a écrit :

bah comme je te l'ai indiqué.. le code HTML c'est celui que firefox génére avec du JDOM ! c pas moi qui l'ai composé ! moi j'ai fait du DOM !


 :sarcastic:  
 
Bon, t'aurais pas un lien vers ta page?


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 01-06-2005 à 12:33:01    

masklinn a écrit :

tu peux m'expliquer à quel endroit de ce code tu modifies la bordure DE TON ELEMENT <LI> ?
(putain on va ptet finir par y arriver un jour [:mlc] )


.colorlist li a:hover
{
cursor: crosshair;
border-color: #FF0000;
}
 
 :heink:

Reply

Marsh Posté le 01-06-2005 à 12:34:04    

freed102 a écrit :

.colorlist li a:hover
{
cursor: crosshair;
border-color: #FF0000;
}
 
 :heink:


Je crois que t'as pas tout compris aux sélecteurs CSS toi [:petrus75]


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 01-06-2005 à 12:36:18    

masklinn a écrit :

:sarcastic:  
 
Bon, t'aurais pas un lien vers ta page?


 
si tu veux mais faut entrer dans le site avec un identifiant et passer les trois premieres etapes :
http://www.clonecopy.net/php/ezdocs
 
login : xxx@xxx.com
password : xxx
 
... une fois sur la derniere etape... cliques sur un bouton bleu "options" et cliques sur le selecteur de couleurs pour comprendre
 
 
voici mon DOM :
 

Code :
  1. function AffichePalette(nom,div,champ)
  2. {
  4. var hex_array=["00","33","66","99","AA","CC","EE","FF"];
  6. var d="Choisissez votre couleur \n";
  7. var doc=document.getElementById(div);
  8. element0=document.createTextNode(d);
  9. doc.appendChild(element0);
  11. for(red in hex_array)
  12. {
  15.  element1=document.createElement("div" );
  16.  doc.appendChild(element1);
  17.  element1.setAttribute("id", "coulrange"+ hex_array[red]);
  18.  element1.className= "coulrange";
  20.  element2=document.createElement("ul" );
  21.  element1.appendChild(element2);
  22.  element2.className = "colorlist";
  23.  element2.setAttribute("id", ""+nom+hex_array[red]+"" );
  26.  for(green in hex_array)
  27.  {
  28.     for(blue in hex_array)
  29.     {
  30.     var colorid=hex_array[red] + hex_array[green] + hex_array[blue];
  31.     element3=document.createElement("li" );
  32.     element2.appendChild(element3);
  33.     element3.style.backgroundColor="#"+ hex_array[red] + hex_array[green] + hex_array[blue];
  34.     element3.setAttribute("id", ""+colorid+"" );
  36.     element4=document.createElement("a" );
  37.     element3.appendChild(element4);
  38.     element4.setAttribute("href", "#" );
  41.     element5=document.createElement("img" );
  42.     element4.appendChild(element5);
  43.     element5.setAttribute("src", "dummy.gif" );
  44.     element5.setAttribute("alt",  hex_array[red] + hex_array[green] + hex_array[blue]);
  45.     element5.setAttribute("width", "10" );
  46.     element5.setAttribute("height", "10" );
  47.     }
  49.  }
  51. }
  52. }


Message édité par freed102 le 01-06-2005 à 12:38:30
Reply

Marsh Posté le 01-06-2005 à 12:37:12    

masklinn a écrit :

Je crois que t'as pas tout compris aux sélecteurs CSS toi [:petrus75]


bah peut etre... j'ai du faire une confusion ! c un peu pour ça que je suis là !  :sarcastic:

Reply

Marsh Posté le 01-06-2005 à 12:41:15    

freed102 a écrit :

bah peut etre... j'ai du faire une confusion ! c un peu pour ça que je suis là !  :sarcastic:


A ton avis, quand je fais

a b c {
   color: lime;
}


j'applique ma couleur à quoi exactement? [:petrus75]
(c'est pas de la confusion, faut réapprendre le principe des sélecteurs là)


Message édité par masklinn le 01-06-2005 à 12:41:47

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 01-06-2005 à 12:45:07    

à ce que je comprends ça s'applique sur les elements b et c se trouvant dans a
 
...c different de  
 
a, b, c {
color: lime;
}
 
qui doit effectuer l'operation sur toutes les balises (a, b et c)
 
...peut etre que je me trompe... les CSS c'est assez tordu quand même ! :lol:

Reply

Marsh Posté le 01-06-2005 à 12:47:05    

je corrige.. ça s'applique dans c... se trouvant dans b... se trouvant dans a
(elles sont imbriquées)

Reply

Marsh Posté le 01-06-2005 à 12:47:06    

freed102 a écrit :

à ce que je comprends ça s'applique sur les elements b et c se trouvant dans a


Ben c'est pas ça
ça applique la propriété sur tous les éléments c se trouvant dans des éléments b se trouvant dans des éléments a

Citation :

a, b, c {
color: lime;
}
 
qui doit effectuer l'operation sur toutes les balises (a, b et c)


ça par contre c'est bon

Citation :

les CSS c'est assez tordu quand même ! :lol:


Pas vraiment non, commence à jouer avec XPath ou même ne serait-ce qu'avec les sélecteurs CSS2 et CSS3 c'est un cran au dessus (pas énorme, mais un cran quand même)


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 01-06-2005 à 12:50:06    

ouai mais cela dit je vois toujours pas mon erreur...
 
.colorlist li a:hover{
}
 
je lui demande donc de transformer mes a:hover se trouvant dans mes li qui sont dans mes objet portant la class colorlist...
 
... vu comme ça pour moi c ok !
 
... alors où est l'erreur ???

Reply

Marsh Posté le 01-06-2005 à 12:53:31    

.colorlist li:hover
{
cursor: crosshair;
border-color: #FF0000;
}
 
.colorlist li:active
{
border-color: #00FF00;
}
 
?

Reply

Marsh Posté le 01-06-2005 à 12:56:57    

freed102 a écrit :

ouai mais cela dit je vois toujours pas mon erreur...
 
.colorlist li a:hover{
}
 
je lui demande donc de transformer mes a:hover se trouvant dans mes li qui sont dans mes objet portant la class colorlist...
 
... vu comme ça pour moi c ok !
 
... alors où est l'erreur ???


Tu lui demande de mettre la bordure de tes a situés dans les li en rouge au survol.
 
Pas de bol:
1- Ca ne modifie pas la bordure du LI lui même
2- La bordure des A ayant une taille de 0, c'est un peu dur à voir [:petrus75]

freed102 a écrit :

.colorlist li:hover
{
cursor: crosshair;
border-color: #FF0000;
}
 
.colorlist li:active
{
border-color: #00FF00;
}
 
?


Par exemple, mais... pas de bol... IE ne le gère pas [:petrus75]


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 01-06-2005 à 12:58:01    

effectivement ! alors que faire ?

Reply

Marsh Posté le 01-06-2005 à 12:58:31    

freed102 a écrit :

effectivement ! alors que faire ?


styler les <a> au lieu de styler les <li>


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 01-06-2005 à 13:07:41    

.colorlist{
margin: 0;
padding: 0;
list-style-type: none;
}
.colorlist li{
float: left;
margin:1px;
padding:0px;
width:11px;
height:11px;
}
.colorlist li a{
border: 1px solid gray;
float: left;
margin:0;
padding:0;
width:10px;
height:10px;
}
.colorlist li a:hover
{
cursor: crosshair;
border-color: #FF0000;
}
 
.colorlist li a:active
{
border-color: #00FF00;
}
 
...ça te parait correct ?

Reply

Marsh Posté le 01-06-2005 à 13:12:58    

bon ça a l'air de marcher... ça m'a juste zappé les margin sur FF... je sais pas pourquoi !

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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