Problème d'affichage sélecteur de couleur

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème d'affichage sélecteur de couleur

Message par Rosebury's Soul le Mar 22 Fév 2011 - 18:29

Bonsoir!

Voilà, j'ai un petit problème avec le sélecteur de couleur ( le tutorial; http://forum.forumactif.com/t287454-ajouter-un-selecteur-de-couleur). J'ai fait exactement comme il est indiqué pour le mettre, j'ai essayé de le refaire plusieurs fois en regardant si je ne m'étais point trompé quelque part dans la manipulation mais aucune faute ne me saute aux yeux. Il n'apparait tout simplement pas lorsque je veux changer de couleurs.

J'ai regardé les cookies de mon navigateur (on ne sait jamais), essayer différents navigateurs aussi (Firefox-Chrome-Explorer) mais toujours rien. Faut-il un certain temps pour qu'il fonctionne? J'espère que quelqu'un pourrait me donner une idée sur une erreur potentiellement que j'aurais pu faire malencontreusement ou une autre marche à suivre?

Merci d'avance pour votre aide Smile


Dernière édition par Rosebury's Soul le Mar 22 Fév 2011 - 18:31, édité 1 fois

Rosebury's Soul
Nouveau membre

Messages : 10
Inscrit(e) le : 21/01/2011

http://roseburyscastle.forumactif.com
Rosebury's Soul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par ge80 le Mar 22 Fév 2011 - 18:31

Bonjour


Le script est-il correctement chargé ?

Cordialement,

Ge

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par Rosebury's Soul le Mar 22 Fév 2011 - 18:41

Je suis débutant quand le codage donc j'ai un peu de mal avec les mots de ce milieu. Donc si c'est savoir si j'avais tout mis correctement, oui c'est le cas.

En faite, j'avais pas de feuillejavascript au départ donc j'ai suivi toute la procédure tel quelle, point par point en faisant attention au moindre détails (puisque je ne m'y connais pas trop, j'avais pas envie de faire n'importe quoi =/).


Rosebury's Soul
Nouveau membre

Messages : 10
Inscrit(e) le : 21/01/2011

http://roseburyscastle.forumactif.com
Rosebury's Soul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par ge80 le Mar 22 Fév 2011 - 18:47

Je viens de vérifier votre script.
Il est bien chargé voir ICI

Appuyer simultanément sur les touches CTRL et F5 avec la page de votre forum qui est affichée.

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par Rosebury's Soul le Mar 22 Fév 2011 - 19:14

Je viens de le faire mais ça ne change rien du tout apparemment, je n'ai toujours pas le sélecteur de couleur sur le forum =/.

Rosebury's Soul
Nouveau membre

Messages : 10
Inscrit(e) le : 21/01/2011

http://roseburyscastle.forumactif.com
Rosebury's Soul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par ge80 le Mar 22 Fév 2011 - 19:52

Essayer avec ce code en remplacement dans le champ description
Code:
<script src=/h1-></script>

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par Rosebury's Soul le Mar 22 Fév 2011 - 21:24

Voilà, je viens juste de changer le code mais aucun changement encore avec la palette de couleur.

Est-ce possible que ce soit un problème d'espace dans la feuille de style CSS?

Rosebury's Soul
Nouveau membre

Messages : 10
Inscrit(e) le : 21/01/2011

http://roseburyscastle.forumactif.com
Rosebury's Soul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par ge80 le Mar 22 Fév 2011 - 21:27

Tout est possible dans les incompatibilités.

Vous pouvez poster votre CSS afin de vérification.

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par Rosebury's Soul le Mar 22 Fév 2011 - 21:35

D'accord, ben voilà mon CSS alors, en espérant que ça provienne de cette partie.

CSS:
.m_page
{
color: RoyalBlue;
font: bold, 14px, Georgia;
}

.important
{
font-weight: bold;
color: red;
}

#news, #staff, #body {
float: left;
margin-right: 4%; /* 4x3=12 */
margin-left: 4%; /* 4x3=12 */
max-width: 25%; /* 25x3=75 */
/*75+24=99*/
}

#news
{
float: left;
}

{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 120px;
}

#news_body
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 300px;
}

#news_body p
{
position: center;
font-size: 12px;
text-align: center;
}

#news_bottom
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 30px;
}





#staff
{
margin: center;
}

#staff_top
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 30px;
}

#staff_body
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 300px;
}

#staff_body p
{
position: center;
font-size: 12px;
text-align: center;
}

#staff_bottom
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 30px;
}




#topsite
{
float: left;
}

#topsite_top
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 30px;
}

#topsite_body
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 300px;
}

#topsite_body p
{
position: center;
font-size: 12px;
text-align: center;
}

#topsite_bottom
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 30px;
}

#Faites_de_la_pub
{
margin: center;
width: 460px;
height: 250px;
}

#Faites_de_la_pub_top
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 460px;
height: 30px;
}

#Faites_de_la_pub_body
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 460px;
height: 250px;
text-align: center;
}

#Faites_de_la_pub_bottom
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 460px;
height: 30px;
text-align: center;
}

.quote {
-moz-border-radius: 6px;
background-color: Wheat;
border: 3px #B700FF;
padding: 5px;
color: rgb(0, 0, 102);
width: 180px;
}

.code {
-moz-border-radius: 6px;
background-color: Wheat;
border: 3px white;
padding: 5px;
color: rgb(0, 0, 102);
width: 180px;
}

.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #f00;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 60px;
height: 30px;
left: 213px;
top: 13px;
background: #f00;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #f00;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #898989;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png);
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 22px;
height: 22px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top;
left: 322px;
top: 142px;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus {
background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
background-position: bottom;
}
.colorpicker_slider {
background-position: bottom;
}

Rosebury's Soul
Nouveau membre

Messages : 10
Inscrit(e) le : 21/01/2011

http://roseburyscastle.forumactif.com
Rosebury's Soul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par ge80 le Mar 22 Fév 2011 - 21:51

Cette zone n'a pas de classe et elle est fausse ?
Code:
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 120px;
}
La mettre en commentaires
Code:

/*
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 120px;
}
*/

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par Rosebury's Soul le Mar 22 Fév 2011 - 22:10

Je ne sais pas tellement à quoi elle correspond vu que je suis débutant dans la fiche CSS & c'était déjà comme tel quand j'ai édité le CSS pour mettre la palette de couleur.

Je n'ai rien touché au CSS sauf d'ajouter ce qui était prévu dans le tutorial à la fin de celui-ci.

Rosebury's Soul
Nouveau membre

Messages : 10
Inscrit(e) le : 21/01/2011

http://roseburyscastle.forumactif.com
Rosebury's Soul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par ge80 le Mar 22 Fév 2011 - 22:13

Essayer de replacer le contenu par celui-ci si vous n'avez pas réussi à faire la modification.

Code:
.m_page
{
color: RoyalBlue;
font: bold, 14px, Georgia;
}

.important{
font-weight: bold;
color: red;
}

#news, #staff, #body {
float: left;
margin-right: 4%; /* 4x3=12 */
margin-left: 4%; /* 4x3=12 */
max-width: 25%; /* 25x3=75 */
/*75+24=99*/
}

#news
{
float: left;
}
/* {
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 120px;
} */

#news_body
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 300px;
}

#news_body p
{
position: center;
font-size: 12px;
text-align: center;
}

#news_bottom
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 30px;
}





#staff
{
margin: center;
}

#staff_top
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 30px;
}

#staff_body
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 300px;
}

#staff_body p
{
position: center;
font-size: 12px;
text-align: center;
}

#staff_bottom
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 30px;
}




#topsite
{
float: left;
}

#topsite_top
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 30px;
}

#topsite_body
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 300px;
}

#topsite_body p
{
position: center;
font-size: 12px;
text-align: center;
}

#topsite_bottom
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 200px;
height: 30px;
}

#Faites_de_la_pub
{
margin: center;
width: 460px;
height: 250px;
}

#Faites_de_la_pub_top
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 460px;
height: 30px;
}

#Faites_de_la_pub_body
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 460px;
height: 250px;
text-align: center;
}

#Faites_de_la_pub_bottom
{
background-image: url(lien-de-l-image-de-titre.jpg);
background-repeat: no-repeat;
width: 460px;
height: 30px;
text-align: center;
}

.quote {
-moz-border-radius: 6px;
background-color: Wheat;
border: 3px #B700FF;
padding: 5px;
color: rgb(0, 0, 102);
width: 180px;
}

.code {
-moz-border-radius: 6px;
background-color: Wheat;
border: 3px white;
padding: 5px;
color: rgb(0, 0, 102);
width: 180px;
}

.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #f00;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 60px;
height: 30px;
left: 213px;
top: 13px;
background: #f00;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #f00;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #898989;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png);
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 22px;
height: 22px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top;
left: 322px;
top: 142px;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus {
background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
background-position: bottom;
}
.colorpicker_slider {
background-position: bottom;
}

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par Rosebury's Soul le Mar 22 Fév 2011 - 22:48

j'ai fait la modification mais aucun changement encore malheureusement =/.

Rosebury's Soul
Nouveau membre

Messages : 10
Inscrit(e) le : 21/01/2011

http://roseburyscastle.forumactif.com
Rosebury's Soul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par ge80 le Mar 22 Fév 2011 - 22:55

Une grosse partie de cette CSS est inutile et elle est surtout incomplète avec des liens "image" manquants.

Remplacer par ce code tout le contenu de votre CSS et ne pas oublier de valider

Code:
    .m_page
    {
    color: RoyalBlue;
    font: bold, 14px, Georgia;
    }

    .important{
    font-weight: bold;
    color: red;
    }

    #news, #staff, #body {
    float: left;
    margin-right: 4%; /* 4x3=12 */
    margin-left: 4%; /* 4x3=12 */
    max-width: 25%; /* 25x3=75 */
    /*75+24=99*/
    }

    #news
    {
    float: left;
    }
    /* {
    background-image: url(lien-de-l-image-de-titre.jpg);
    background-repeat: no-repeat;
    width: 200px;
    height: 120px;
    } */

    #news_body
    {
  /* background-image: url(lien-de-l-image-de-titre.jpg);*/
    background-repeat: no-repeat;
    width: 200px;
    height: 300px;
    }

    #news_body p
    {
    position: center;
    font-size: 12px;
    text-align: center;
    }

    #news_bottom
    {
    /*background-image: url(lien-de-l-image-de-titre.jpg);/*
    background-repeat: no-repeat;
    width: 200px;
    height: 30px;
    }





    #staff
    {
    margin: center;
    }

    #staff_top
    {
    /*background-image: url(lien-de-l-image-de-titre.jpg);*/
    background-repeat: no-repeat;
    width: 200px;
    height: 30px;
    }

    #staff_body
    {
  /* background-image: url(lien-de-l-image-de-titre.jpg);*/
    background-repeat: no-repeat;
    width: 200px;
    height: 300px;
    }

    #staff_body p
    {
    position: center;
    font-size: 12px;
    text-align: center;
    }

    #staff_bottom
    {
  /* background-image: url(lien-de-l-image-de-titre.jpg);*/
    background-repeat: no-repeat;
    width: 200px;
    height: 30px;
    }




    #topsite
    {
    float: left;
    }

    #topsite_top
    {
    /*background-image: url(lien-de-l-image-de-titre.jpg);*/
    background-repeat: no-repeat;
    width: 200px;
    height: 30px;
    }

    #topsite_body
    {
  /* background-image: url(lien-de-l-image-de-titre.jpg);*/
    background-repeat: no-repeat;
    width: 200px;
    height: 300px;
    }

    #topsite_body p
    {
    position: center;
    font-size: 12px;
    text-align: center;
    }

    #topsite_bottom
    {
  /* background-image: url(lien-de-l-image-de-titre.jpg);*/
    background-repeat: no-repeat;
    width: 200px;
    height: 30px;
    }

    #Faites_de_la_pub
    {
    margin: center;
    width: 460px;
    height: 250px;
    }

    #Faites_de_la_pub_top
    {
    /*background-image: url(lien-de-l-image-de-titre.jpg);*/
    background-repeat: no-repeat;
    width: 460px;
    height: 30px;
    }

    #Faites_de_la_pub_body
    {
    /*background-image: url(lien-de-l-image-de-titre.jpg);*/
    background-repeat: no-repeat;
    width: 460px;
    height: 250px;
    text-align: center;
    }

    #Faites_de_la_pub_bottom
    {
    /*background-image: url(lien-de-l-image-de-titre.jpg);*/
    background-repeat: no-repeat;
    width: 460px;
    height: 30px;
    text-align: center;
    }

    .quote {
    -moz-border-radius: 6px;
    background-color: Wheat;
    border: 3px #B700FF;
    padding: 5px;
    color: rgb(0, 0, 102);
    width: 180px;
    }

    .code {
    -moz-border-radius: 6px;
    background-color: Wheat;
    border: 3px white;
    padding: 5px;
    color: rgb(0, 0, 102);
    width: 180px;
    }

    .colorpicker {
    width: 356px;
    height: 176px;
    overflow: hidden;
    position: absolute;
    background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png);
    font-family: Arial, Helvetica, sans-serif;
    display: none;
    }
    .colorpicker_color {
    width: 150px;
    height: 150px;
    left: 14px;
    top: 13px;
    position: absolute;
    background: #f00;
    overflow: hidden;
    cursor: crosshair;
    }
    .colorpicker_color div {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png);
    }
    .colorpicker_color div div {
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    overflow: hidden;
    background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif);
    margin: -5px 0 0 -5px;
    }
    .colorpicker_hue {
    position: absolute;
    top: 13px;
    left: 171px;
    width: 35px;
    height: 150px;
    cursor: n-resize;
    }
    .colorpicker_hue div {
    position: absolute;
    width: 35px;
    height: 9px;
    overflow: hidden;
    background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top;
    margin: -4px 0 0 0;
    left: 0px;
    }
    .colorpicker_new_color {
    position: absolute;
    width: 60px;
    height: 30px;
    left: 213px;
    top: 13px;
    background: #f00;
    }
    .colorpicker_current_color {
    position: absolute;
    width: 60px;
    height: 30px;
    left: 283px;
    top: 13px;
    background: #f00;
    }
    .colorpicker input {
    background-color: transparent;
    border: 1px solid transparent;
    position: absolute;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #898989;
    top: 4px;
    right: 11px;
    text-align: right;
    margin: 0;
    padding: 0;
    height: 11px;
    }
    .colorpicker_hex {
    position: absolute;
    width: 72px;
    height: 22px;
    background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top;
    left: 212px;
    top: 142px;
    }
    .colorpicker_hex input {
    right: 6px;
    }
    .colorpicker_field {
    height: 22px;
    width: 62px;
    background-position: top;
    position: absolute;
    }
    .colorpicker_field span {
    position: absolute;
    width: 12px;
    height: 22px;
    overflow: hidden;
    top: 0;
    right: 0;
    cursor: n-resize;
    }
    .colorpicker_rgb_r {
    background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png);
    top: 52px;
    left: 212px;
    }
    .colorpicker_rgb_g {
    background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png);
    top: 82px;
    left: 212px;
    }
    .colorpicker_rgb_b {
    background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png);
    top: 112px;
    left: 212px;
    }
    .colorpicker_hsb_h {
    background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png);
    top: 52px;
    left: 282px;
    }
    .colorpicker_hsb_s {
    background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png);
    top: 82px;
    left: 282px;
    }
    .colorpicker_hsb_b {
    background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png);
    top: 112px;
    left: 282px;
    }
    .colorpicker_submit {
    position: absolute;
    width: 22px;
    height: 22px;
    background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top;
    left: 322px;
    top: 142px;
    overflow: hidden;
    }
    .colorpicker_focus {
    background-position: center;
    }
    .colorpicker_hex.colorpicker_focus {
    background-position: bottom;
    }
    .colorpicker_submit.colorpicker_focus {
    background-position: bottom;
    }
    .colorpicker_slider {
    background-position: bottom;
    }

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par Rosebury's Soul le Mar 22 Fév 2011 - 23:30

Je viens de remplacer par le code ci-dessus mais il n'y a toujours aucun changement. Je ne vois vraiment d'où cela peut venir réellement là.

Rosebury's Soul
Nouveau membre

Messages : 10
Inscrit(e) le : 21/01/2011

http://roseburyscastle.forumactif.com
Rosebury's Soul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par ge80 le Mar 22 Fév 2011 - 23:37

Essayer avec ce code minimal qui remplacera votre CSS.
Je pense que le reste ne sert à rien ou que cela fonctionne mal Wink

Code:
.quote {
        -moz-border-radius: 6px;
        background-color: Wheat;
        border: 3px #B700FF;
        padding: 5px;
        color: rgb(0, 0, 102);
        width: 180px;
}
.code {
        -moz-border-radius: 6px;
        background-color: Wheat;
        border: 3px white;
        padding: 5px;
        color: rgb(0, 0, 102);
        width: 180px;
}

.colorpicker {
        width: 356px;
        height: 176px;
        overflow: hidden;
        position: absolute;
        background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png);
        font-family: Arial, Helvetica, sans-serif;
        display: none;
        }
        .colorpicker_color {
        width: 150px;
        height: 150px;
        left: 14px;
        top: 13px;
        position: absolute;
        background: #f00;
        overflow: hidden;
        cursor: crosshair;
        }
        .colorpicker_color div {
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        height: 150px;
        background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png);
        }
        .colorpicker_color div div {
        position: absolute;
        top: 0;
        left: 0;
        width: 11px;
        height: 11px;
        overflow: hidden;
        background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif);
        margin: -5px 0 0 -5px;
        }
        .colorpicker_hue {
        position: absolute;
        top: 13px;
        left: 171px;
        width: 35px;
        height: 150px;
        cursor: n-resize;
        }
        .colorpicker_hue div {
        position: absolute;
        width: 35px;
        height: 9px;
        overflow: hidden;
        background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top;
        margin: -4px 0 0 0;
        left: 0px;
        }
        .colorpicker_new_color {
        position: absolute;
        width: 60px;
        height: 30px;
        left: 213px;
        top: 13px;
        background: #f00;
        }
        .colorpicker_current_color {
        position: absolute;
        width: 60px;
        height: 30px;
        left: 283px;
        top: 13px;
        background: #f00;
        }
        .colorpicker input {
        background-color: transparent;
        border: 1px solid transparent;
        position: absolute;
        font-size: 10px;
        font-family: Arial, Helvetica, sans-serif;
        color: #898989;
        top: 4px;
        right: 11px;
        text-align: right;
        margin: 0;
        padding: 0;
        height: 11px;
        }
        .colorpicker_hex {
        position: absolute;
        width: 72px;
        height: 22px;
        background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top;
        left: 212px;
        top: 142px;
        }
        .colorpicker_hex input {
        right: 6px;
        }
        .colorpicker_field {
        height: 22px;
        width: 62px;
        background-position: top;
        position: absolute;
        }
        .colorpicker_field span {
        position: absolute;
        width: 12px;
        height: 22px;
        overflow: hidden;
        top: 0;
        right: 0;
        cursor: n-resize;
        }
        .colorpicker_rgb_r {
        background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png);
        top: 52px;
        left: 212px;
        }
        .colorpicker_rgb_g {
        background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png);
        top: 82px;
        left: 212px;
        }
        .colorpicker_rgb_b {
        background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png);
        top: 112px;
        left: 212px;
        }
        .colorpicker_hsb_h {
        background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png);
        top: 52px;
        left: 282px;
        }
        .colorpicker_hsb_s {
        background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png);
        top: 82px;
        left: 282px;
        }
        .colorpicker_hsb_b {
        background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png);
        top: 112px;
        left: 282px;
        }
        .colorpicker_submit {
        position: absolute;
        width: 22px;
        height: 22px;
        background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top;
        left: 322px;
        top: 142px;
        overflow: hidden;
        }
        .colorpicker_focus {
        background-position: center;
        }
        .colorpicker_hex.colorpicker_focus {
        background-position: bottom;
        }
        .colorpicker_submit.colorpicker_focus {
        background-position: bottom;
        }
        .colorpicker_slider {
        background-position: bottom;
        }

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par Rosebury's Soul le Mer 23 Fév 2011 - 0:06

Je sais que ça doit devenir surement lassant à force de me répéter encore & encore mais rien n'y fait, même si je change encore le code avec le votre. Je ne sais vraiment pas d'où peut provenir le problème =/

Rosebury's Soul
Nouveau membre

Messages : 10
Inscrit(e) le : 21/01/2011

http://roseburyscastle.forumactif.com
Rosebury's Soul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par tupac le Mer 23 Fév 2011 - 1:21

Bonsoir

Je viens de teste le tutoriel et il fonctionne très bien donc vous avez surement fait une mauvaise manip quelque part.

Le problème ne vient pas du code CSS il fonctionne très bien.

A un moment il vous faut créer une page html n'oubliez pas de cocher non et non puis taper les lettres abc et valider.

Ensuite sur cette même page html cliquer sur la molette jaune (modifié) et supprimer les lettres entrée précédemment donc (abc) et placer le code Javascript iciet valider.

Ensuite il ne vous reste plus qu'a prendre l'adresse de votre page html et de la placer dans le script ci-dessous et de placer le tout dans (description du forum)
Code:
<script src="ici adresse de votre page html"></script>

Normalement si vous faite bien cela ça devrait fonctionner.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par ge80 le Mer 23 Fév 2011 - 8:38

Je suis de l'avis de Tupac mais n'empêche que votre CSS est totalement incomplet et faux avec aucune image dans les
/*background-image: url(lien-de-l-image-de-titre.jpg);*/

Je ne sais comment c'est interprété alors autant laisser la dernière version CSS qui n'a pas ces erreurs et continuer vos tests en reprenant le tutoriel sans la partie CSS qui est correcte.

N'oublier pas de copier le code en mode +html dans la page html

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par Rosebury's Soul le Jeu 24 Fév 2011 - 2:17

Ah ben merci beaucoup pour l'aide parce que cela fonctionne enfin!

J'avais bien tout fait jusqu'à copier le code javascript. je l'avais fait en . peut-être était là la simple erreur ou bien le code pour la description du forum.

En tout cas, merci bien pour l'aide apporter. résolu

Rosebury's Soul
Nouveau membre

Messages : 10
Inscrit(e) le : 21/01/2011

http://roseburyscastle.forumactif.com
Rosebury's Soul a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage sélecteur de couleur

Message par ge80 le Jeu 24 Fév 2011 - 7:40

-html l'erreur était ici et aussi avec un peu de css défectueux.

bonne journée
victoire

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum