Erreur de CSS : nombre impaire de guillemets

[Macro]

Bonsoir,
je viens vous demander votre aide car je suis en train de travailler sur le message de ma page d'accueil,
je fais donc du html et du css, mais alors que jusqu'ici je n'avais aucun mal à créer des classes en CSS, voilà le message qu'on m'affiche :

Erreur détectée
Nous avons compté un nombre impaire de guillemets donc une chaine est mal fermée. Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code.

Voilà le code CSS que j'ai ajouté :

Code:

/*page d'accueil*/
#pif{
     background-color: #ffffff;
     width: 100%;
     position: relative;
     top: 5px;
}
#paf{
     background-color: #fff000;
     position: relative;
     width: 100%;
}
#cont1{
     position: absolute;
     top: 1em;
     left: 1em;
     background-color: #ffff00;
}
#cont2{
     position: absolute;
     top: 1em;
     left: 10em;
     background-color: #ffff00;
}
#pouf{
     background-color: #ffffff;
     position: relative;
     width: 100%;
}

Ils me parlent d'un problème de guillemets, je ne comprends absolument pas. Pour le html, j'ai vérifié aussi...
Bien sûr, je n'ai pas fini le codage, je suis en train de créer des boîtes que je veux placer dans l'espace. Mais je préfère vous demander de l'aide avant de continuer..
Merci pour tous les renseignements que vous pourrez m'apporter

[Scoubifitz]

bonsoir,

une accolade ici ?

}body {
background-repeat: no-repeat;
background-position: center;
background-position: top;
}

[Macro]

Merci pour cette réponse,
par contre je ne vois pas pourquoi il faudrait ajouter un accolade avant body.
Si je le fais, comme prévu, il y a marqué :

Erreur détectée
Nous avons compté un nombre différent de "{" et de "}". Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code.

Je vais copier de nouveau mon CSS que j'ai modifié :

Code:

/*page d'accueil*/
#pif{
   background-color: #ffffff;
     position: absolute;
     top: 0px;
     left: 0px;
       width: 100%;
     height: 10%;
       
       
}
#paf{
       background-color: #fff000;
       position: absolute;
     top: 10%;
     left: 0px;
   height: 60%;
       width: 100%;
}
#cont1{
       position: absolute;
     top: 0px;
       left: 0px;
       width: 400px;
     height: 253px;
       background-color: #ffff00;
}
#cont2{
       position: absolute;
     top: 0px;
     left: 450px;
       width: 200px;
     height: 253px;
       background-color: #ffff00;
     overflow:auto;
}
#pouf{
    background-color: #ffffff;
       position: absolute;
     top: 70%;
     left: 0px;
       width: 100%;
     height: 30%;
}

et le html :

Code:

<div id="pif"><img src="http://imagesup.org/images10/1329251056-bienvenue.png">
   </div>
   <div id="paf">
      <div id="cont1"><img src="http://imagesup.org/images10/1329253469-speedpaintfuturecit.jpg"></div>
      <div id="cont2">Nous sommes en <b>2076</b>, en Europe de l'Ouest.<br />
Au coeur de la Grande Nation, une gigantesque prison humaine ternit la réputation des plus Grands : <b>le District 12</b>. <br />
Prit au piège dans son aquarium géant, le district est coupé du monde, en parfaite autarcie, on y meurt, et parfois on y <b>vit</b>.<br />
La majorité de la population n'est pourtant pas une bande de criminels. Ils sont juste « <b><font color="#FF8503">neuropathes</font></b> », les victimes d’une catastrophe stupide. Leur point commun? La dépendance. Il ont un besoin irrépressible, parfois ridicule, parfois terrible, qui est maintenant inscrit dans leurs gènes.<br/>
Les « <b><font color="#BF3940">élites</font></b> », ceux qui ont déballé toute leur fortune pour être sauvés les premiers, sont encore plus dégénérés.<br/>
Les « <b><font color="white">stigmatisés</font></b> », les chanceux de l’histoire, ont échappé à ce sort. Malheureusement pour eux, ils sont une minorité et subissent les pires abus qui soient.<br />
Les « <b><font color="green#402433">miliciens</font></b> » gèrent cette zone dangereuse, sous l’ordre de l’Etat. Ils doivent imposer l’ordre dans un monde dépravé…
<br /> <br />
<i>Bienvenue dans notre univers !</i></div>
   </div>
   <div id="pouf">Tableau
   </div>

D'ailleurs, autre chose très bizarre (en plus du message d'erreur incompréhensible), les blocs absolus se placent par rapport au cadre de la page internet, au lieu de rester dans le message d'accueil.
Je suis perdue. J'espère que vous pourrez me conseiller.
Merci.

[Scoubifitz]

bonjour,

merci de mettre tout le CSS , ou de mettre le lien du forum ...

[Macro]

Bonjour,
Pour remédier (temporairement?) à la situation j'ai fait un tableau html qui marche, mais c'est vrai que j'aimerais savoir ce qu'il se passe.

Voici tout le CSS :

Code:

/*bannière*/
body {
        background-position:top center;
    background-repeat:no-repeat;
        }

/*contour du forum*/
.forumline {
        border: 5px solid#A87768;
     -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
        }

/*cadre avatar*/
.vava {
     border-top:6px solid#A87768;
     border-bottom:6px solid#A87768;
     border-radius:6px;
   }

/*cadre noir*/
.presentation {
     border:5px solid#000;
     border-radius:10px;
     margin:30px;
     padding:20px;
   }

/*fieldset*/
.blop{
     border-radius: 10px;
     margin:2px;
     padding:1px;
     border: 2px solid #DEC385;
}

/*Description*/
.ddf{
     height: 120px;
     margin-right:20px;
     margin-left:5px;
     overflow: auto;
}
 
/*titres*/
.shpoum{
    border-radius: 10px;
     border: 2px solid #DEC385;
     padding: 3px;
}

/*statistiques*/
.plouf{
     text-align: right;
     width: 140px;
     padding:0px;
     margin-right:1px;
}
 
/*liens sous-forums*/
.splash{
    padding:2px;
     margin-left:6px;
     margin-bottom: 4px;
   height: 90px;
     width: 110px;
     overflow: auto;
}
/*block de fond prédéfini*/
.fondfiche{
   background-color: #B36459;
     -moz-border-radius:20px;
     -webkit-border-radius: 20px;
     border-radius: 20px;
     width:600px;
     height:650px;
}
/*block de fond présentation*/
.fondfiche2{
     background-color: #B36459;
     -moz-border-radius:20px;
     -webkit-border-radius: 20px;
     border-radius: 20px;
     width:600px;
     height:500px;
}
/*block de fond présentation joueur*/
.fondfiche3{
     background-color: #B36459;
     -moz-border-radius:20px;
     -webkit-border-radius: 20px;
     border-radius: 20px;
     width:600px;
     height:300px;
}
/*block de fond présentation description*/
.fondfiche4{
   background-color: #B36459;
     -moz-border-radius:20px;
     -webkit-border-radius: 20px;
     border-radius: 20px;
     width:600px;
     height:700px;
}
/* texte titre fiche présentation et prédéfini*/
.titrefiche{
   text-align:center;
     font-family:trebuchet MS;
     font-size:29px;
     font-weight:bold;
     color:#E8CE90;
}
/*cadre identité prédéfini*/
.cadreidentité{
   border: 5px solid #E8CE90;
   -moz-border-radius:20px;
   -webkit-border-radius: 20px;
     border-radius: 50px;
     width:220px;
     background-color:#4B4B4B;
     color:#EBEBEB;
     text-shadow:1px 1px 5px black;
     font-family: trebuchet MS;
}
/*cadre identité présentation*/
.cadreidentité2{
   border: 5px solid #E8CE90;
   -moz-border-radius:20px;
   -webkit-border-radius: 20px;
     border-radius: 50px;
     width:220px;
     background-color:#4B4B4B;
     color:#EBEBEB;
     text-shadow:1px 1px 5px black;
     font-family: trebuchet MS;
   padding: 10px;
}
/*caractère et physique présentation*/
.description{
   border: 5px solid #E8CE90;
     background-color:#4B4B4B;
     color:#EBEBEB;
     font-family: trebuchet MS;
     width:450px;
     height:200px;
     overflow:auto;
}
/* texte situation prédéfini*/
.situation{
   border: 5px solid #E8CE90;
     -moz-border-radius:20px;
     -webkit-border-radius: 20px;
     border-radius: 50px;
     background-color:#4B4B4B;
     color:#EBEBEB;
     font-family: trebuchet MS;
     margin-left: 0px;
     width: 90px;
     height: 15px;
     padding: 0px;
     font-size:10px;
     margin: 5px
}
/*histoire prédéfini*/
.histoire{
   border: 5px solid #E8CE90;
     background-color:#4B4B4B;
     color:#EBEBEB;
     font-family: trebuchet MS;
     width:250px;
     height:380px;
     overflow:auto;
}
/*histoire présentation*/
.histoire2{
   border: 5px solid #E8CE90;
     background-color:#4B4B4B;
     color:#EBEBEB;
     font-family: trebuchet MS;
     width:450px;
     height:550px;
     overflow:auto;
}
/*cadre présentation joueur*/
.cadreidentité3{
   border: 5px solid #E8CE90;
   -moz-border-radius:20px;
   -webkit-border-radius: 20px;
     border-radius: 50px;
     width:400px;
     background-color:#4B4B4B;
     color:#EBEBEB;
     text-shadow:1px 1px 5px black;
     font-family: trebuchet MS;
   padding: 10px;
}

/*contexte accueil*/
.newscroll {
   width: 300px;
   height: 200px;
   overflow: auto;
   text-align: justify;
   padding: 4px;
}
/*tableau accueil*/
.mon_onglet{
     float: left;
     padding: 2px 25px;
     margin-right: 10px;
     color: #000;
     background: #E8CE90;
   border-bottom: 2px solid #000;
     cursor: pointer;
     margin-bottom: -1px;
     list-style: none;
}
.mon_onglet:hover{
        background: #A87768;
}       
.mon_onglet_selected{
     float: left;
     padding: 2px 25px;
     margin-right: 10px;
     color: #000;
     background: #E8CE90;
     border-top: 2px solid #A87768;
    border-right: 2px solid #A87768;
    border-left: 2px solid #A87768;
    border-bottom: 2px solid #A87768;
    cursor: pointer;
     margin-bottom: -1px;
     list-style: none;}         
.clear{
     clear: both;
}
.mon_contenu{
     color: #000;
     background: #E8CE90;
     border: none;
     margin-left:-50px;
     padding: 10px;
     line-height: normal;
     font-size: 11px;}
#mes_contenus, #mes_onglets{
     width: 600px;
     margin: auto;}

/*bouton sauvergarder*/
#savec{
     position:relative;
}
.save-bloc{
     dispay: none;
     color: #555!important;
     cursor: point;
     z-index: 999;
     padding: 5px; 
     border: 1px solid #BCBCBC;
     background: #efefef url(http://2img.net/i/fa/prosilver/bg_button.gif) repeat-x;
     display:none;
     top:20px;
     left:0px;
     position:absolute;
     white-space:nowrap;
}
.save-bloc div:hover{
     color: #050505!important;
}
.save-bloc div{
     cursor: pointer;
}
.save-bloc select{
     background: #ccc;
     border: 1px solid #aaa;
     margin-bottom: 5px;
}

/*selectionner les codes*/
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }



et le code qui ne marche pas :

Code:

        /*page d'accueil*/
        #pif{
          background-color: #ffffff;
            position: absolute;
            top: 0px;
            left: 0px;
              width: 100%;
            height: 10%;
             
             
        }
        #paf{
              background-color: #fff000;
              position: absolute;
            top: 10%;
            left: 0px;
          height: 60%;
              width: 100%;
        }
        #cont1{
              position: absolute;
            top: 0px;
              left: 0px;
              width: 400px;
            height: 253px;
              background-color: #ffff00;
        }
        #cont2{
              position: absolute;
            top: 0px;
            left: 450px;
              width: 200px;
            height: 253px;
              background-color: #ffff00;
            overflow:auto;
        }
        #pouf{
            background-color: #ffffff;
              position: absolute;
            top: 70%;
            left: 0px;
              width: 100%;
            height: 30%;
        }

Sinon voici l'adresse du forum : lien

[Scoubifitz]

bonsoir,

j'ai copié et assemblé votre CSS , puis collé sur un forum test ... sans rencontrer votre souci ...

voilà ce que j'ai collé :

Code:

   /*bannière*/
body {
   background-position:top center;
   background-repeat:no-repeat;
   }

   /*contour du forum*/
.forumline {
   border: 5px solid#A87768;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   }

   /*cadre avatar*/
.vava {
   border-top:6px solid#A87768;
   border-bottom:6px solid#A87768;
   border-radius:6px;
   }

   /*cadre noir*/
.presentation {
   border:5px solid#000;
   border-radius:10px;
   margin:30px;
   padding:20px;
   }

   /*fieldset*/
.blop{
   border-radius: 10px;
   margin:2px;
   padding:1px;
   border: 2px solid #DEC385;
   }

   /*Description*/
.ddf{
   height: 120px;
   margin-right:20px;
   margin-left:5px;
   overflow: auto;
   }

   /*titres*/
.shpoum{
   border-radius: 10px;
   border: 2px solid #DEC385;
   padding: 3px;
   }

   /*statistiques*/
.plouf{
   text-align: right;
   width: 140px;
   padding:0px;
   margin-right:1px;
   }

   /*liens sous-forums*/
.splash{
   padding:2px;
   margin-left:6px;
   margin-bottom: 4px;
   height: 90px;
   width: 110px;
   overflow: auto;
   }
   /*block de fond prédéfini*/
.fondfiche{
   background-color: #B36459;
   -moz-border-radius:20px;
   -webkit-border-radius: 20px;
   border-radius: 20px;
   width:600px;
   height:650px;
   }
   /*block de fond présentation*/
.fondfiche2{
   background-color: #B36459;
   -moz-border-radius:20px;
   -webkit-border-radius: 20px;
   border-radius: 20px;
   width:600px;
   height:500px;
   }
   /*block de fond présentation joueur*/
.fondfiche3{
   background-color: #B36459;
   -moz-border-radius:20px;
   -webkit-border-radius: 20px;
   border-radius: 20px;
   width:600px;
   height:300px;
   }
   /*block de fond présentation description*/
.fondfiche4{
   background-color: #B36459;
   -moz-border-radius:20px;
   -webkit-border-radius: 20px;
   border-radius: 20px;
   width:600px;
   height:700px;
   }
   /* texte titre fiche présentation et prédéfini*/
.titrefiche{
   text-align:center;
   font-family:trebuchet MS;
   font-size:29px;
   font-weight:bold;
   color:#E8CE90;
   }
   /*cadre identité prédéfini*/
.cadreidentité{
   border: 5px solid #E8CE90;
   -moz-border-radius:20px;
   -webkit-border-radius: 20px;
   border-radius: 50px;
   width:220px;
   background-color:#4B4B4B;
   color:#EBEBEB;
   text-shadow:1px 1px 5px black;
   font-family: trebuchet MS;
   }
   /*cadre identité présentation*/
.cadreidentité2{
   border: 5px solid #E8CE90;
   -moz-border-radius:20px;
   -webkit-border-radius: 20px;
   border-radius: 50px;
   width:220px;
   background-color:#4B4B4B;
   color:#EBEBEB;
   text-shadow:1px 1px 5px black;
   font-family: trebuchet MS;
   padding: 10px;
   }
   /*caractère et physique présentation*/
.description{
   border: 5px solid #E8CE90;
   background-color:#4B4B4B;
   color:#EBEBEB;
   font-family: trebuchet MS;
   width:450px;
   height:200px;
   overflow:auto;
   }
   /* texte situation prédéfini*/
.situation{
   border: 5px solid #E8CE90;
   -moz-border-radius:20px;
   -webkit-border-radius: 20px;
   border-radius: 50px;
   background-color:#4B4B4B;
   color:#EBEBEB;
   font-family: trebuchet MS;
   margin-left: 0px;
   width: 90px;
   height: 15px;
   padding: 0px;
   font-size:10px;
   margin: 5px
   }
   /*histoire prédéfini*/
.histoire{
   border: 5px solid #E8CE90;
   background-color:#4B4B4B;
   color:#EBEBEB;
   font-family: trebuchet MS;
   width:250px;
   height:380px;
   overflow:auto;
   }
   /*histoire présentation*/
.histoire2{
   border: 5px solid #E8CE90;
   background-color:#4B4B4B;
   color:#EBEBEB;
   font-family: trebuchet MS;
   width:450px;
   height:550px;
   overflow:auto;
   }
   /*cadre présentation joueur*/
.cadreidentité3{
   border: 5px solid #E8CE90;
   -moz-border-radius:20px;
   -webkit-border-radius: 20px;
   border-radius: 50px;
   width:400px;
   background-color:#4B4B4B;
   color:#EBEBEB;
   text-shadow:1px 1px 5px black;
   font-family: trebuchet MS;
   padding: 10px;
   }

   /*contexte accueil*/
.newscroll {
   width: 300px;
   height: 200px;
   overflow: auto;
   text-align: justify;
   padding: 4px;
   }
   /*tableau accueil*/
.mon_onglet{
   float: left;
   padding: 2px 25px;
   margin-right: 10px;
   color: #000;
   background: #E8CE90;
   border-bottom: 2px solid #000;
   cursor: pointer;
   margin-bottom: -1px;
   list-style: none;
   }
.mon_onglet:hover{
   background: #A87768;
   }
.mon_onglet_selected{
   float: left;
   padding: 2px 25px;
   margin-right: 10px;
   color: #000;
   background: #E8CE90;
   border-top: 2px solid #A87768;
   border-right: 2px solid #A87768;
   border-left: 2px solid #A87768;
   border-bottom: 2px solid #A87768;
   cursor: pointer;
   margin-bottom: -1px;
   list-style: none;}
.clear{
   clear: both;
   }
.mon_contenu{
   color: #000;
   background: #E8CE90;
   border: none;
   margin-left:-50px;
   padding: 10px;
   line-height: normal;
   font-size: 11px;}
#mes_contenus, #mes_onglets{
   width: 600px;
   margin: auto;}

   /*bouton sauvergarder*/
#savec{
   position:relative;
   }
.save-bloc{
   dispay: none;
   color: #555!important;
   cursor: point;
   z-index: 999;
   padding: 5px;
   border: 1px solid #BCBCBC;
   background: #efefef url(http://2img.net/i/fa/prosilver/bg_button.gif) repeat-x;
   display:none;
   top:20px;
   left:0px;
   position:absolute;
   white-space:nowrap;
   }
.save-bloc select{
   background: #ccc;
   border: 1px solid #aaa;
   margin-bottom: 5px;
   }
.save-bloc div{
   cursor: pointer;
   }
.save-bloc div:hover{
   color: #050505!important;
   }

   /*selectionner les codes*/
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }

   /*page d'accueil*/
#pif{
   background-color: #ffffff;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 10%;
   }
#paf{
   background-color: #fff000;
   position: absolute;
   top: 10%;
   left: 0px;
   height: 60%;
   width: 100%;
   }
#cont1{
   position: absolute;
   top: 0px;
   left: 0px;
   width: 400px;
   height: 253px;
   background-color: #ffff00;
   }
#cont2{
   position: absolute;
   top: 0px;
   left: 450px;
   width: 200px;
   height: 253px;
   background-color: #ffff00;
   overflow:auto;
   }
#pouf{
   background-color: #ffffff;
   position: absolute;
   top: 70%;
   left: 0px;
   width: 100%;
   height: 30%;
   }

refaites un essai avec ...

♠ concernant votre 2e souci , avez-vous testé en position "relative" ?

[Macro]

Bonsoir,

J'ai réessayé et j'ai toujours le même message d'erreur, je pense que c'est un bug. Mais du coup, le CSS soi disant "erroné" se fait effacer à chaque fois.
Je pense du coup que je vais laisser mon tableau tel quel, parce qu'il n'y a aucune explication logique (du moins en apparence).

Pour les positions relatives, c'est ce que j'ai essayé de faire pour la disposition des blocs verticalement. Mais quand je voulais mettre les blocs imbriqués en absolus, tout déconnait. Enfin... je crois que je ne m'y connais simplement pas encore assez en position html/css.

Merci beaucoup pour votre aide, en tout cas, ça me fait plaisir. Mais j'ai l'impression que mon Css a un peu de mal :X

[Macro]

Bonjour,

J'ai finalement trouvé la cause de ce message d'erreur.
Ce n'est pas le code CSS en lui-même, mais les informations que je mets en commentaires :

Code:

/*Titre du CSS*/

D'habitude ça marche, mais pour certains de ces "titres", on m'affiche le message d'erreur. Je ne comprends pas mieux les causes de tout ça, mais bon...

Cordialement.

[Scoubifitz]

bonjour,

peut-être le fait que les balises soient collées au texte ET qu'il y ait une apostrophe ?

à tester : balises décollées :

Code:

/* page d'accueil */
#pif{
  background-color: #ffffff;
   position: absolute;
   top: 0px;
   left: 0px;
     width: 100%;
   height: 10%;
   
   
}
#paf{
     background-color: #fff000;
     position: absolute;
   top: 10%;
   left: 0px;
  height: 60%;
     width: 100%;
}
#cont1{
     position: absolute;
   top: 0px;
     left: 0px;
     width: 400px;
   height: 253px;
     background-color: #ffff00;
}
#cont2{
     position: absolute;
   top: 0px;
   left: 450px;
     width: 200px;
   height: 253px;
     background-color: #ffff00;
   overflow:auto;
}
#pouf{
   background-color: #ffffff;
     position: absolute;
   top: 70%;
   left: 0px;
     width: 100%;
   height: 30%;
}

à tester : balises collées , sans apostrophe :

Code:

/*page d accueil*/
#pif{
  background-color: #ffffff;
   position: absolute;
   top: 0px;
   left: 0px;
     width: 100%;
   height: 10%;
   
   
}
#paf{
     background-color: #fff000;
     position: absolute;
   top: 10%;
   left: 0px;
  height: 60%;
     width: 100%;
}
#cont1{
     position: absolute;
   top: 0px;
     left: 0px;
     width: 400px;
   height: 253px;
     background-color: #ffff00;
}
#cont2{
     position: absolute;
   top: 0px;
   left: 450px;
     width: 200px;
   height: 253px;
     background-color: #ffff00;
   overflow:auto;
}
#pouf{
   background-color: #ffffff;
     position: absolute;
   top: 70%;
   left: 0px;
     width: 100%;
   height: 30%;
}

il vaut mieux décoller les balises , de toute façon ...

[Macro]

Oh merciiii !!! Oui c'était l'apostrophe !
Ca me parait logique maintenant, vu qu'ils parlaient de "guillemets" mais je n'avais pas du tout tilté !
Encore merci pour votre patience Scoubifitz !

Sujet résolu ^^