Générateur de CSS recalcitrant

Fermé

Fenril' - 26 déc. 2007 à 23:19
Fenril' - 29 déc. 2007 à 17:05

Bonjour à vous toutes et à vous tous,

J'ai déjà posté quelques sujets sur ce forum et je profite de celui ci pour vous re-féliciter pour l'activité, les conaissances et l'ambiance de ces forums qui sont d'une très grande qualité, Bravo !
Je suis en train de créer un générateur de feuilles de style CSS en Javascript mais je tombe sur un problème majeur : ça ne marche pas.
J'ai pourtant crée mon unique fonction 'styles(generateur)' et tout ce qui va avec, la case supportant le code CSS obtenu etc...
Pouvez-vous m'analyser ce script et me trouver l'erreur s'il vous plait ?

<HEAD><title>Générateur CSS</title>
<script src="../javascripts/js.js" type="text/javascript"></script>
<script>

function styles(generateur)
{
var debut='<style>'+'\n';
var link='A\:link \n \{\ntext-decoration: '+document.generateur.etats_link.value+'\; \ncolor: '+document.generateur.color_link.value+'\; \nfont-family: '+document.generateur.police_link.value+'\; \nfont-size: '+document.generateur.taille_link.value+'\; \nfont-style: '+document.generateur.caract_link.value+'\; \nfont-weight: '+document.generateur.gras_link.value+'\; \n \}'+'\n';
var visited='A\:visited \n \{\ntext-decoration: '+document.generateur.etats_visited.value+'\; \ncolor: '+document.generateur.color_visited.value+'\; \nfont-family: '+document.generateur.police_visited.value+'\; \nfont-size: '+document.generateur.taille_visited.value+'\; \nfont-style: '+document.generateur.caract_visited.value+'\; \nfont-weight: '+document.generateur.gras_visited.value+'\; \n \}'+'\n';
var active='A\:active \n \{\ntext-decoration: '+document.generateur.etats_actived.value+'\; \ncolor: '+document.generateur.color_actived.value+'\; \nfont-family: '+document.generateur.police_actived.value+'\; \nfont-size: '+document.generateur.taille_actived.value+'\; \nfont-style: '+document.generateur.caract_actived.value+'\; \nfont-weight: '+document.generateur.gras_actived.value+'\; \n \}'+'\n';
var hover='A\:hover \n \{\ntext-decoration: '+document.generateur.etats_hover.value+'\; \ncolor: '+document.generateur.color_hover.value+'\; \nfont-family: '+document.generateur.police_hover.value+'\; \nfont-size: '+document.generateur.taille_hover.value+'\; \nfont-style: '+document.generateur.caract_hover.value+'\; \nfont-weight: '+document.generateur.gras_hover.value+'\; \n \}'+'\n';
var fin='</style>'+'\n';

document.generateur.resultat.value=debut+ link+ visited+ active+ hover+ fin+;
}

</script>
</HEAD>
<body>
</p>
  <table>
    <tr>
      <td width="100%"><form name="generateur">
      <div align="center">
        <center>
        <table border="1" color=#000000 cellpadding="0" cellspacing="0" width="390">
          <tr>
            <td bgcolor="#C87BFF">
              <p align="center"><font size="2" face="Verdana" color="#000000"><b>
              Générateur de CSS</b></font></p>
            </td>
          </tr>
          <tr>
            <td style="border: 1 solid #000000" bgcolor="#C87BFF">
                <div align="center">
                  <center>
                  <table border="0" cellspacing="0" width="97%">
                    <tr>
                      <td width="100%"><b><font color="#000000"><br>
                        >> Liens Actifs : </font></b></td>
                    </tr>
                    <tr>
                      <td width="100%" height="15"></td>
                    </tr>
                    <tr>
                      <td width="100%">
                        <div align="center">
                          <table border="0" width="85%" cellspacing="3">
                            <tr>
                              <td width="35%">Couleurs
                                :</font></td>
                              <td width="65%"><!--webbot bot="Validation"
                                B-Value-Required="TRUE" I-Minimum-Length="7"
                                I-Maximum-Length="7" --><input type="text" name="color_link" size="12" value="#" maxlength="7">&nbsp;
                            </tr>
                            <tr>
                              <td width="35%">Police
                                :</font></td>
                              <td width="65%"><select size="1" name="police_link">
                                <option value="Arial">Arial</option>
                                <option value="Comic Sans MS">Comic Sans MS</option>
                                <option value="Courier">Courier</option>
                                <option value="Modern">Modern</option>
                                <option value="Tahoma">Tahoma</option>
                                <option value="Times New Roman">Times New Roman</option>
                                <option value="Verdana">Verdana</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Taille
                                :</font></td>
                              <td width="65%"><select size="1" name="taille_link" style="font-family: Arial; font-size: 8 pt; color: #000000">
                                        <option value="8pt">8 points</option>
                                        <option value="10pt">10 points</option>
                                        <option value="12pt">12 points</option>
                                        <option value="14pt">14 points</option>
                                        <option value="18pt">18 points</option>
                                        <option value="24pt">24 points</option>
                                        <option value="30pt">30 points</option>
                                        <option value="36pt">36 points</option>
                                        <option value="40pt">40 points</option>
                                        <option value="46pt">46 points</option>
                                        <option value="50pt">50 points</option>
                                        <option value="56pt">56 points</option>
                                      </select> </td>
                            </tr>
                            <tr>
                              <td width="35%">Styles
                                :</font></td>
                              <td width="65%"><select size="1" name="etats_link">
                                <option value="none">Aucun</option>
                                <option value="overline">Surlignés</option>
                                <option value="underline">Soulignés</option>
                                <option value="overline underline">Les deux</option>
                                <option value="line-through">Barrés</option>
                                <option value="blink">Clignotants</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Caractéristiques
                                :</font></td>
                              <td width="65%"><select size="1" name="caract_link">
                                <option value="normal">Aucune</option>
                                <option value="italic">Italique</option>
                                <option value="oblique">Oblique</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Gras
                                :</font></td>
                              <td width="65%"><select size="1" name="gras_link">
                                  <option value="normal" selected>Non</option>
                                  <option value="bold">Oui</option>
                                </select> 
                              </td>
                            </tr>
                          </table>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td width="100%" height="15"></td>
                    </tr>
                    <tr>
                      <td width="100%"><b><font color="#000000">
                        >> Liens Appuyés : </font></b></td>
                    </tr>
                    <tr>
                      <td width="100%" height="15"></td>
                    </tr>
                    <tr>
                      <td width="100%" height="15">
                        <div align="center">
                          <table border="0" cellspacing="3" width="85%">
                            <tr>
                              <td width="35%">Couleurs
                                :</font></td>
                              <td width="65%"><!--webbot bot="Validation"
                                B-Value-Required="TRUE" I-Minimum-Length="7"
                                I-Maximum-Length="7" --><input type="text" name="color_link" size="12" value="#" maxlength="7">&nbsp;
                            </tr>
                            <tr>
                              <td width="35%">Police
                                :</font></td>
                              <td width="65%"><select size="1" name="police_actived">
                                <option value="Arial">Arial</option>
                                <option value="Comic Sans MS">Comic Sans MS</option>
                                <option value="Courier">Courier</option>
                                <option value="Modern">Modern</option>
                                <option value="Tahoma">Tahoma</option>
                                <option value="Times New Roman">Times New Roman</option>
                                <option value="Verdana">Verdana</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Taille
                                :</font></td>
                              <td width="65%"><select size="1" name="taille_actived" style="font-family: Arial; font-size: 8 pt; color: #000000">
                                        <option value="8pt">8 points</option>
                                        <option value="10pt">10 points</option>
                                        <option value="12pt">12 points</option>
                                        <option value="14pt">14 points</option>
                                        <option value="18pt">18 points</option>
                                        <option value="24pt">24 points</option>
                                        <option value="30pt">30 points</option>
                                        <option value="36pt">36 points</option>
                                        <option value="40pt">40 points</option>
                                        <option value="46pt">46 points</option>
                                        <option value="50pt">50 points</option>
                                        <option value="56pt">56 points</option>
                                      </select> </td>
                            </tr>
                            <tr>
                              <td width="35%">Styles
                                :</font></td>
                              <td width="65%"><select size="1" name="etats_actived">
                                <option value="none">Aucun</option>
                                <option value="overline">Surlignés</option>
                                <option value="underline">Soulignés</option>
                                <option value="overline underline">Les deux</option>
                                <option value="line-through">Barrés</option>
                                <option value="blink">Clignotants</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Caractéristiques
                                :</font></td>
                              <td width="65%"><select size="1" name="caract_actived">
                                <option value="none">Aucune</option>
                                <option value="italic">Italique</option>
                                <option value="oblique">Oblique</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Gras
                                :</font></td>
                              <td width="65%"><select size="1" name="gras_actived">
                                  <option value="normal" selected>Non</option>
                                  <option value="bold">Oui</option>
                                </select> 
                              </td>
                            </tr>
                          </table>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td width="100%" height="15"></td>
                    </tr>
                    <tr>
                      <td width="100%"><b><font color="#000000">
                       >> Liens Survolés : </font></b></td>
                    </tr>
                    <tr>
                      <td width="100%" height="15"></td>
                    </tr>
                    <tr>
                      <td width="100%">
                        <div align="center">
                          <table border="0" width="85%" cellspacing="3">
                            <tr>
                              <td width="35%">Couleurs
                                :</font></td>
                              <td width="65%"><!--webbot bot="Validation"
                                B-Value-Required="TRUE" I-Minimum-Length="7"
                                I-Maximum-Length="7" --><input type="text" name="color_link" size="12" value="#" maxlength="7">&nbsp;
                            </tr>
                            <tr>
                              <td width="35%">Police
                                :</font></td>
                              <td width="65%"><select size="1" name="police_hover">
                                <option value="Arial">Arial</option>
                                <option value="Comic Sans MS">Comic Sans MS</option>
                                <option value="Courier">Courier</option>
                                <option value="Modern">Modern</option>
                                <option value="Tahoma">Tahoma</option>
                                <option value="Times New Roman">Times New Roman</option>
                                <option value="Verdana">Verdana</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Taille
                                :</font></td>
                              <td width="65%"><select size="1" name="taille_hover" style="font-family: Arial; font-size: 8 pt; color: #000000">
                                        <option value="8pt">8 points</option>
                                        <option value="10pt">10 points</option>
                                        <option value="12pt">12 points</option>
                                        <option value="14pt">14 points</option>
                                        <option value="18pt">18 points</option>
                                        <option value="24pt">24 points</option>
                                        <option value="30pt">30 points</option>
                                        <option value="36pt">36 points</option>
                                        <option value="40pt">40 points</option>
                                        <option value="46pt">46 points</option>
                                        <option value="50pt">50 points</option>
                                        <option value="56pt">56 points</option>
                                      </select> </td>
                            </tr>
                            <tr>
                              <td width="35%">Styles
                                :</font></td>
                              <td width="65%"><select size="1" name="etats_hover">
                                <option value="none">Aucun</option>
                                <option value="overline">Surlignés</option>
                                <option value="underline">Soulignés</option>
                                <option value="overline underline">Les deux</option>
                                <option value="line-through">Barrés</option>
                                <option value="blink">Clignotants</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Caractéristiques
                                :</font></td>
                              <td width="65%"><select size="1" name="caract_hover">
                                <option value="none">Aucune</option>
                                <option value="italic">Italique</option>
                                <option value="oblique">Oblique</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Gras
                                :</font></td>
                              <td width="65%"><select size="1" name="gras_hover">
                                  <option value="normal" selected>Non</option>
                                  <option value="bold">Oui</option>
                                </select> 
                              </td>
                            </tr>
                          </table>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td width="100%" height="15"></td>
                    </tr>
                    <tr>
                      <td width="100%"><b><font color="#000000">
                        >> Liens Déjà Visités : </font></b></td>
                    </tr>
                    <tr>
                      <td width="100%" height="15"></td>
                    </tr>
                    <tr>
                      <td width="100%" height="15">
                        <div align="center">
                          <table border="0" cellspacing="3" width="85%">
                            <tr>
                              <td width="35%">Couleurs
                                :</font></td>
                              <td width="65%"><!--webbot bot="Validation"
                                B-Value-Required="TRUE" I-Minimum-Length="7"
                                I-Maximum-Length="7" --><input type="text" name="color_link" size="12" value="#" maxlength="7">&nbsp;
                            </tr>
                            <tr>
                              <td width="35%">Police
                                :</font></td>
                              <td width="65%"><select size="1" name="police_visited">
                                <option value="Arial">Arial</option>
                                <option value="Comic Sans MS">Comic Sans MS</option>
                                <option value="Courier">Courier</option>
                                <option value="Modern">Modern</option>
                                <option value="Tahoma">Tahoma</option>
                                <option value="Times New Roman">Times New Roman</option>
                                <option value="Verdana">Verdana</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Taille
                                :</font></td>
                              <td width="65%"><select size="1" name="taille_visited" style="font-family: Arial; font-size: 8 pt; color: #000000">
                                        <option value="8pt">8 points</option>
                                        <option value="10pt">10 points</option>
                                        <option value="12pt">12 points</option>
                                        <option value="14pt">14 points</option>
                                        <option value="18pt">18 points</option>
                                        <option value="24pt">24 points</option>
                                        <option value="30pt">30 points</option>
                                        <option value="36pt">36 points</option>
                                        <option value="40pt">40 points</option>
                                        <option value="46pt">46 points</option>
                                        <option value="50pt">50 points</option>
                                        <option value="56pt">56 points</option>
                                      </select> </td>
                            </tr>
                            <tr>
                              <td width="35%">Styles
                                :</font></td>
                              <td width="65%"><select size="1" name="etats_visited">
                                <option value="none">Aucun</option>
                                <option value="overline">Surlignés</option>
                                <option value="underline">Soulignés</option>
                                <option value="overline underline">Les deux</option>
                                <option value="line-through">Barrés</option>
                                <option value="blink">Clignotants</option>
                              </select> 
                              </td>
                            </tr>
                            <tr>
                              <td width="35%">Caractéristiques
                                :</font></td>
                              <td width="65%"><select size="1" name="caract_visited">
                                <option value="none">Aucune</option>
                                <option value="italic">Italique</option>
                                <option value="oblique">Oblique</option>
                              </select></td>
                            </tr>
                            <tr>
                              <td width="35%">Gras
                                :</font></td>
                              <td width="65%"><select size="1" name="gras_visited">
                                  <option value="normal" selected>Non</option>
                                  <option value="bold">Oui</option>
                                </select> 
                              </td>
                            </tr>
                          </table>
                        </div>
                      </td>
                    </tr>
                  </table>
                  </center>
                </div>&nbsp;
            <p align="center"><b><input type="button" value=">> Générer la feuille de style CSS" name="generateur" onClick="styles(generateur);" style="font-family: Verdana; font-size: 8 pt; background-color: #C87BFF; color: #000000"></font></b>
                                      <b><input type="reset" value=">> Effacer les donnés inscrites" name="reset" style="font-family: Verdana; font-size: 8 pt; background-color: #C87BFF; color: #000000"></font></b><br><br></p>
            </td>
          </tr>
        </table>
      </div>
        <p align="left">&nbsp;</p>
      <div align="center">
        <center>
        <table border="1" color=#000000 cellpadding="0" cellspacing="0" width="390">
          <tr>
            <td bgcolor="#C87BFF">
              <p align="center"><font color="#000000"><b>
              Code généré</b></font></p>
            </td>
          </tr>
          <tr>
            <td style="border: 1 solid #000000" bgcolor="#C87BFF">&nbsp;
              <div align="center">
                <table border="0" cellpadding="2" width="97%">
                  <tr>
                    <td width="100%"> <p align="center"><font color="#C87BFF"><b>Code à insérer entre les balises <HEAD></HEAD> ou dans le fichier CSS de la page</b></font></td>
                  </tr>
                  <tr>
                    <td width="100%"> 
                    <textarea rows="15" name="resultat" cols="70" style="background-color: #FFFFFF; font-family: Verdana; font-size: 10 px; color: #000000; border: 1 solid #000000"></textarea>
                    </td>
                  </tr>
                  <tr>
                    <td width="100%">
                      <p align="center"><b><input type="button" onClick="javascript:this.form.resultat.select()" style="font-family: Verdana; font-size: 8 pt; background-color: #C87BFF; color: #000000" value=">> Sélectionner" name="select"></font></b>
                      <p align="center"><b><input type="reset" value=">> Effacer le CSS" name="reset" style="font-family: Verdana; font-size: 8 pt; background-color: #C87BFF; color: #000000"></font></b>
                    </td>
                  </tr>
                </table>
              </div>&nbsp;
            </td>
          </tr>
        </table>
      </div>
        </form>
    </td>
    </tr>
  <center>
  </center>
  </table>
</body>

Je vous remercie grandement à l'avance.
Cordialement, Fenril'Willem.

A voir également:

Générateur de CSS recalcitrant
Generateur mdp - Télécharger - Sécurité
Generateur de cle windows 10 - Guide
Css lien non souligné - Astuces et Solutions
Générateur de compte facebook - Forum Facebook
Générateur de langue imaginaire - Forum Logiciels

8 réponses

Réponse 1 / 8

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
27 déc. 2007 à 02:43

salut,

Pouvez-vous m'analyser ce script et me trouver l'erreur s'il vous plait ?
trouver la solution, on peut toujours essayer mais définir le problème…

une description de l'erreur ou du problème rencontré ça ne ferait quand même pas de mal !

Réponse 2 / 8

gluo Messages postés 233 Date d'inscription mardi 28 août 2007 Statut Membre Dernière intervention 13 janvier 2010 105
27 déc. 2007 à 11:01

Tu utilise les noms "color_hover", "color_visited" et "color_actived", mais dans tes input tu marque : name="color_link" (pour tous)
Remplace par le bon nom dans tes input...

Autre chose : ne met pas d'espaces entre tes +, et n'en met pas à la fin, marque :
document.generateur.resultat.value=debut+link+visited+active+hover+fin;

Un conseil, sert toi du module Web Developpeur avec Firefox et de sa console d'erreur il t'affichera les propriété vides ou erronnées, il m'a fallu 5 min avec pour trouver l'erreur en l'utilisant.

Réponse 3 / 8

Fenril'
27 déc. 2007 à 13:03

Bonjour à vous deux,

Merci beaucoup pour vos précieuses indications qui m'ont effectivement permis de résoudre ce problème.
A Dalida, excuse-moi, j'ai oublié de préciser que le bouton ">> Générer la feuille de style CSS" fesant appel à la fonction "styles(generateur)" ne marchait pas. Mais maintenant le problème est résolu.
A Gluo, merci beaucoup de ta réponse qui m'a permis de faire marcher ce script. Je vais de ce pas télécharger le pugin Web developpeur pour m'aider dans mes futures réalisations.
Sujet Clos !

Merci encore.
Amicalement
.

Réponse 4 / 8

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
27 déc. 2007 à 13:07

salut,

tant que tu y es ajoute FireBug !
-;o)

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

Fenril'Willem Messages postés 7 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 17 mai 2008
27 déc. 2007 à 15:19

Merci, je l'ajoute.

Réponse 6 / 8

Fenril'Willem Messages postés 7 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 17 mai 2008
27 déc. 2007 à 15:28

J'ai installé FireBug qui est très puissant, il va me servir, mais je n'ai malheureusement pas trouvé 'Web developpeur', le Moteur de recherche du site Addons de Firefox ne detecte rien avec ces tags : "Web" et "Developpeur"... Avez-vous un lien s'il vous plait ? Merci encore d'avance.

Réponse 7 / 8

gluo Messages postés 233 Date d'inscription mardi 28 août 2007 Statut Membre Dernière intervention 13 janvier 2010 105
27 déc. 2007 à 15:44

Voici le lien : https://addons.mozilla.org/fr/firefox/browse/type:1/cat:4/sort:popular
Tu as tous les modules favoris des développeurs web.

Réponse 8 / 8

Fenril'
29 déc. 2007 à 17:05

Merci beaucoup !

Discussions similaires

[CSS] Forcé retour à la ligne

trait horizontal avec du css

generateur de combinaison du loto 5/90

HTML - définir taille bouton

[CSS] Mettre un objet au premier plan

Discussions similaires

Newsletters