Probleme avec un code de page d'accueil

[Etoile2Feu]

Bonjour ^^
J'essaie de mettre un code en tableau en page d'accueil http://forum-test-crimi.forumgratuit.org/h77-pa-ls-epicode-vi
http://epicode.bbactif.com/t7775-pa-en-bloc-9-crimi

Mais un message me dit :
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.

Je pense que je n'ai pas bien mis les codes :/

Le code est celui la :

Code:

.contour-pa {
  width: 640px; height: 450px;
  background-color: #BDE6D4;
  margin: auto; padding: 10px;
  border-radius: 20px;
  border: 4px double #82C0A4;
}
.contour-pa h1 {
  margin: 0; margin-top: -10px;
  font-family: Cinzel;
  text-align: center;
  color: #D55A9A; font-size: 22px;
}
.contour-pa h2 {
  margin: 0;
  font-family: Cinzel;
  text-align: center;
  color: #D55A9A; font-size: 15px;
  font-weight: 400;
}

.cadre1 {
  width: 215px; height: 300px;
  position: relative; float: left;
}
.cadre2 {
  width: 400px; height: 300px;
  position: relative; float: right;
  right: 10px;
}
.cadre3 {
  width: 640px; height:  110px;
  position: relative; float: left;
  top: 15px;
}
 
.cadre-staff {
  width: 205px; height: 120px;
  background-color: #F7B7E7;
  border-radius: 10px;
  border : 1px solid #EE8EC6;
  padding: 5px;
}
.staff {
  display: inline-block;
  margin: auto;
  width: 100px; height: 100px;
  border-radius: 0px 60px;
  overflow: hidden;
}
.staff2 {
  display: inline-block;
  margin: auto;
  width: 100px; height: 100px;
  border-radius: 60px 0px;
  overflow: hidden;
}
.staff span {
  display: block;
  width: 90px; height: 30px;
  background-color: #F8F0C5;
  padding: 5px;
  text-align: left;
  font-size: 13px;
}
.staff2 span {
  display: block;
  width: 90px; height: 30px;
  background-color: #F8F0C5;
  padding: 5px;
  text-align: right;
  font-size: 13px;
}
.staff img, .staff2 img {
  width: 100px; height: 100px;
  margin-top: -40px;
  transition: all 1s ease-in;
}
.staff:hover img, .staff2:hover img{
 margin-top: 0px;
 transition: all 1s ease-out;
}

.cadre-predef {
  margin-top: 10px;
  width: 205px; height: 150px;
  background-color: #F7B7E7;
  border-radius: 10px;
  border : 1px solid #EE8EC6;
  padding: 5px;
  text-align: center;
}
.cadre-predef img {
  width: 60px; height: 60px;
  transition: all 0.5s ease-in;
  border-radius: 0px 40px;
  margin: 1px;
}
.cadre-predef img:hover {
  border-radius: 5px;
}

.cadre-contexte {
  width: 400px; height: 230px;
  background-color: #F7B7E7;
  border-radius: 10px;
  border : 1px solid #EE8EC6;
  padding: 5px;
  overflow: hidden;
}
.cadre-contexte span {
  display: block;
  width: 390px; height: 195px;
  background-color: #F8F0C5;
  padding: 5px;
  text-align: justify;
  font-size: 13px;
  overflow: auto;
}
.cadre-contexte img {
  position: relative;
  top: -225px; left: 0px;
  transition: all 2s ease;
}
.cadre-contexte:hover img {
  transform: translate(410px, 235px);
  transition: all 2s ease;
}

.cadre-credit {
  margin-top: 10px;
  width: 400px; height: 40px;
  background-color: #F7B7E7;
  border-radius: 10px;
  border : 1px solid #EE8EC6;
  padding: 5px;
}
.cadre-credit span {
  display: block;
  height: 18px;
  background-color: #F8F0C5;
  text-align: center;
  font-size: 13px;
}

.cadre-partenaire {
  float: left;
  width: 400px; height: 105px;
  background-color: #F7B7E7;
  border-radius: 10px;
  border : 1px solid #EE8EC6;
  padding: 5px;
  text-align: center;
  font-size: 13px;
}
.cadre-partenaire img {
  width: 50px; height: 50px;
  border-radius: 5px;
}
.cadre-partenaire span {
  display: block;
  width: 390px; height: 55px;
  background-color: #F8F0C5;
  margin-bottom: 5px;
  padding: 5px;
}

.cadre-news {
  float: right;
  margin-left: 5px;
  width: 205px; height: 105px;
  background-color: #F7B7E7;
  border-radius: 10px;
  border : 1px solid #EE8EC6;
  padding: 5px;
}
.cadre-news span {
  display: block;
  width: 195px; height: 70px;
  text-align: left;
  background-color: #F8F0C5;
  padding: 5px;
  font-size: 13px;
  overflow: auto;
}

ET le HTML :

Code:

<link href="http://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet" type="text/css"/><div class="contour-pa">
  <h1>Titre du forum</h1>
<div class="cadre1">
  <div class="cadre-staff">
    <h2>L'équipe</h2>
    <div class="staff">
      <span>
        Pseudo
        <br/>
        <a target="_blank" href="#">Contacter</a>
      </span>
      <img src="http://img15.hostingpics.net/pics/683139mnah.png" />
    </div>
    <div class="staff2">
      <span>
        Pseudo
        <br/>
        <a target="_blank" href="#">Contacter</a>
      </span>
      <img src="http://img15.hostingpics.net/pics/683139mnah.png" />
    </div>
  </div>
  <div class="cadre-predef">
    <h2>Les Prédéfinis</h2>
        <a target="_blank" href="#"> <img src="http://img15.hostingpics.net/pics/683139mnah.png" /></a>
        <a target="_blank" href="#"> <img src="http://img15.hostingpics.net/pics/683139mnah.png" /></a>
        <a target="_blank" href="#"> <img src="http://img15.hostingpics.net/pics/683139mnah.png" /></a>
        <a target="_blank" href="#"> <img src="http://img15.hostingpics.net/pics/683139mnah.png" /></a>
        <a target="_blank" href="#"> <img src="http://img15.hostingpics.net/pics/683139mnah.png" /></a>
        <a target="_blank" href="#"> <img src="http://img15.hostingpics.net/pics/683139mnah.png" /></a>
  </div>
</div>
<div class="cadre2">
  <div class="cadre-contexte">
    <h2>Le Contexte/Concept</h2>
      <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare urna quis nisi blandit, eu rhoncus nunc ullamcorper. Nulla luctus nibh quam, nec molestie lorem viverra ut. Pellentesque fringilla efficitur maximus. Suspendisse vestibulum eu purus nec faucibus. Nullam at lorem ipsum. In mauris libero, vestibulum vitae euismod vel, laoreet sed mauris. Quisque non eleifend nisl, nec venenatis neque. Vestibulum semper sapien in orci venenatis, et laoreet erat aliquet. Donec ornare enim in odio laoreet molestie.
          <br/><br/>
          Etiam luctus mauris quis eros aliquam, at hendrerit enim pulvinar. Sed facilisis quis elit eget dignissim. Nam blandit elementum nunc vitae dignissim. Vestibulum malesuada dolor id neque elementum, a vestibulum nulla ultrices. Ut consequat laoreet augue vitae hendrerit. Donec in tellus mattis, condimentum lacus id, consequat nunc. In elementum metus tellus, ut tempor felis mollis vel. Mauris laoreet arcu ut lorem faucibus condimentum.
      </span>
      <img src="http://img15.hostingpics.net/pics/618419mnih.png" />
  </div>
  <div class="cadre-credit">
    <h2>Les Crédits</h2>
    <span>
      PA : Crimi (<a target="_blank" href="http://epicode.bbactif.com/">Epicode</a>), Forum : XX, Tous les crédits : <a target="_blank" href="http://epicode.bbactif.com/">Lien</a>
    </span>
  </div>
</div>
<div class="cadre3">
  <div class="cadre-partenaire">
    <h2>Les Partenaires</h2>
    <span>
      <a target="_blank" href="#"><img src="http://img15.hostingpics.net/pics/683139mnah.png" /></a>
      <a target="_blank" href="#"><img src="http://img15.hostingpics.net/pics/683139mnah.png" /></a>
      <a target="_blank" href="#"><img src="http://img15.hostingpics.net/pics/683139mnah.png" /></a>
      <a target="_blank" href="#"><img src="http://img15.hostingpics.net/pics/683139mnah.png" /></a>
      <a target="_blank" href="#"><img src="http://img15.hostingpics.net/pics/683139mnah.png" /></a>
      <a target="_blank" href="#"><img src="http://img15.hostingpics.net/pics/683139mnah.png" /></a>
      <a target="_blank" href="#"><img src="http://img15.hostingpics.net/pics/683139mnah.png" /></a>
    </span>
    <a target="_blank" href="#">Nous lier</a> - <a target="_blank" href="#">Devenir partenaire</a> - <a target="_blank" href="#">Récapitulatif</a>
  </div>
  <div class="cadre-news">
    <h2>Les Nouveautés</h2>
    <span>
      XX/XX/XX - Lorem Ipsum.
      <br/>
      XX/XX/XX - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <br/>
      XX/XX/XX - Lorem ipsum dolor sit amet.
    </span>
  </div>
</div>
</div>

Merci d'avance pour ceux qui m'aideront

Etoile2Feu

[MlleAlys]

Bonjour,
Ce code css ne contient pas d'erreur, celle-ci doit se trouver autre part dans votre feuille de style css.
Note : les guillemets sont autant les guillemets " que les apostrophes ' , et les commentaires sont aussi concernés : attention aux apostrophes dans les commentaires, mieux vaut les retirer.

[Etoile2Feu]

Bonjour,
Merci pour votre reponse

D'accord merci ^^, donc je pense , pour le code, que je l'ai mal placé dans le CSS ou dans les généralités ..

Mais le code HTML devrait etre placé ou ? dans les CSS ou dans les generalités ??

Desoler pour les questions..

[MlleAlys]

Alors le code html se met dans le message d'accueil :
Affichage > page d'accueil > généralités
C'est la structure, le squelette et le contenu, c'est ce qu'on va afficher.

Le code css se met dans la feuille de style css du forum :
Affichage > couleurs > onglet feuille de style css
C'est ce qui permet de mettre en forme les éléments html, habiller le squelette, donner l'apparence que l'on veut à ce qui est afficher.

[Etoile2Feu]

Merci beaucoup !! j'ai enfin reussi !
Merci !!