CSS liste (li) et a:hover

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : CSS liste (li) et a:hover

freed102

Arayashiki

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

mon code :

Code :

.colorlist li{
border: 1px solid gray;
float: left;
margin:1px;
padding:0px;
width:10px;
height:10px;
}
.colorlist a
{
cursor: crosshair;
}
.colorlist a:hover
{
border-color: #FF0000;
}
.colorlist a:active
{
border-color: #00FF00;
}

Publicité

masklinn

í dag viðrar vel til loftárása

[: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 by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?

freed102

Arayashiki

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

masklinn

í dag viðrar vel til loftárása

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]

freed102

Arayashiki

.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 !

freed102

Arayashiki

ps : la liste est composée telle quelle :

Code :

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

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

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

masklinn

í dag viðrar vel til loftárása

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

freed102

Arayashiki

bah je vois pas...

j'ai ecrit aussi :

Citation :

j'ai essayé

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

.... pareil !

masklinn

í dag viðrar vel til loftárása

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] )

freed102

Arayashiki

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 !

Publicité

masklinn

í dag viðrar vel til loftárása

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?

freed102

Arayashiki

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:

masklinn

í dag viðrar vel til loftárása

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]

freed102

Arayashiki

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 :

function AffichePalette(nom,div,champ)
{
var hex_array=["00","33","66","99","AA","CC","EE","FF"];
var d="Choisissez votre couleur \n";
var doc=document.getElementById(div);
element0=document.createTextNode(d);
doc.appendChild(element0);
for(red in hex_array)
{
element1=document.createElement("div" );
doc.appendChild(element1);
element1.setAttribute("id", "coulrange"+ hex_array[red]);
element1.className= "coulrange";
element2=document.createElement("ul" );
element1.appendChild(element2);
element2.className = "colorlist";
element2.setAttribute("id", ""+nom+hex_array[red]+"" );
for(green in hex_array)
{
for(blue in hex_array)
{
var colorid=hex_array[red] + hex_array[green] + hex_array[blue];
element3=document.createElement("li" );
element2.appendChild(element3);
element3.style.backgroundColor="#"+ hex_array[red] + hex_array[green] + hex_array[blue];
element3.setAttribute("id", ""+colorid+"" );
element4=document.createElement("a" );
element3.appendChild(element4);
element4.setAttribute("href", "#" );
element5=document.createElement("img" );
element4.appendChild(element5);
element5.setAttribute("src", "dummy.gif" );
element5.setAttribute("alt", hex_array[red] + hex_array[green] + hex_array[blue]);
element5.setAttribute("width", "10" );
element5.setAttribute("height", "10" );
}
}
}
}

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

freed102

Arayashiki

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:

masklinn

í dag viðrar vel til loftárása

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

freed102

Arayashiki

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

freed102

Arayashiki

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

masklinn

í dag viðrar vel til loftárása

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)

freed102

Arayashiki

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

freed102

Arayashiki

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

.colorlist li:active
{
border-color: #00FF00;
}

?

masklinn

í dag viðrar vel til loftárása

freed102 a écrit :

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]

freed102

Arayashiki

effectivement ! alors que faire ?

masklinn

í dag viðrar vel til loftárása

freed102 a écrit :

effectivement ! alors que faire ?

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

freed102

Arayashiki

.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 ?

freed102

Arayashiki

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

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

CSS liste (li) et a:hover

Sujets relatifs
Trier une liste d'objets en utilisant TObjectList	liste deroulante
[activePERL] les images ne s'affichent pas ni mon CSS	Creer une liste de controls
[Résolu][CSS] Souci avec un contenu variable	coment faire une liste box en vba sous excel???
Pb de positionnement de menus à partir d'une CSS	[CSS] tout petit problème de version imprimable
Affichage puce dans une liste	Probleme liste deroulante
Plus de sujets relatifs à : CSS liste (li) et a:hover

Page générée en 0.044 secondes