Problème d'affichage sélecteur de couleur

[Rosebury's Soul]

Bonsoir!

Voilà, j'ai un petit problème avec le sélecteur de couleur ( le tutorial; https://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

[ge80]

Bonjour


Le script est-il correctement chargé ?

Cordialement,

Ge

[Rosebury's Soul]

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 =/).

[ge80]

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.

[Rosebury's Soul]

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 =/.

[ge80]

Essayer avec ce code en remplacement dans le champ description

Code:

<script src=/h1-></script>

[Rosebury's Soul]

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?

[ge80]

Tout est possible dans les incompatibilités.

Vous pouvez poster votre CSS afin de vérification.

[Rosebury's Soul]

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

CSS:

[ge80]

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;
}
*/


[Rosebury's Soul]

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.

[ge80]

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;
}

[Rosebury's Soul]

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

[ge80]

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;
    }

[Rosebury's Soul]

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

[ge80]

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

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;
        }

[Rosebury's Soul]

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 =/

[tupac]

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.

[ge80]

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

[Rosebury's Soul]

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.

[ge80]

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

bonne journée