PA sous forme de page HTML

[CryingToYourHeart]

Bonjour,

Nous sommes actuellement entrain de créer un forum et nous avons quelques soucis pour ce qui concerne la PA, en effet celle ci contient des onglets et il se trouve que notre QEEL en possède aussi mais que ces derniers ne changent plus à cause de la PA c'est pourquoi nous avons pensé à mettre la PA sous forme de page HTML. Seulement nous ne savons pas vraiment comment nous y prendre, es-ce que quelqu'un pourrait nous aider à ce que nous puissions faire en sorte que les onglets marchent pour les deux.

Merci à ceux qui voudront bien nous aider

[Manumanu]

Bonjour,

Plutôt que de chercher à contourner le problème, pourquoi ne pas le résoudre ?

Mets le lien du forum en question, et le code des onglets que tu utilises.

[CryingToYourHeart]

Bonjour,
Nous avons déjà changé le nom des balises...etc mais rien à faire :s
Voici le forum: http://en-chantier.forumgratuit.ch/
Et voici le CSS:

Code:

/*PA*/
.titreprinci {
  font-family: 'spirax', cursive;
  color: #ca8462;
  text-shadow: 1px 2px 2px #fad2a7;
  font-size: 36px;
  letter-spacing: -2px;
  text-transform: lowercase;
  text-align: center;
}
.slogan {
  font-family: verdana;
  font-size: 12px;
  font-weight: lighter;
  letter-spacing: 5px;
  text-align:center;
  text-transform: uppercase;
  margin-top: -15px;
  margin-left: 4px;
border-bottom: 3px #fad2a7  dotted;
margin-bottom: 5px;
}

.cadre1 {
  border: 1px solid #fad2a7;
  background-color: #fefbed;
  border-radius: 5px;
  padding: 8px;
  height: 205px;
  width: 294px;
  margin-right: 9px;
  text-align: justify;
}
.cadre2 {
    border: 1px solid #fad2a7;
  background-color: #fefbed;
  border-radius: 5px;
  padding: 8px;
  height: 158px;
  width: 190px;
  margin-right: 3px;
  text-align: justify;
}

.soustitre {
  font-family: 'romanesco', cursive;
  font-size: 35px;
  color: #c9b6ab;
  text-shadow: 1px 2px 2px #e8d9cf;
  letter-spacing: -1px;
  border-bottom: 2px #fad2a7  dotted;
  text-transform: lowercase;
  margin-left: 8px;
  margin-top: -15px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.soustitre:hover {
  font-family: 'romanesco', cursive;
  font-size: 35px;
  color: #f6ba9f;
  text-shadow: 1px 2px 2px #e8d9cf;
  letter-spacing: 2px;
  border-bottom: 2px #fad2a7  dotted;
  text-transform: lowercase;
  margin-left: 8px;
  margin-top: -15px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.gifpa {
  padding: 1px;
  width: 85px;
  border: 1px solid #c9b6ab;
  margin: 1px;
}
.pseudo2 {
  font-family:'Satisfy' cursive;
  font-size: 20px;
  text-shadow: 1px 2px 2px white;
  color: #c9b6ab;
  text-transform: italic;
  letter-spacing: -1px;
}
.bouton1 {
  width: 92px;
  height: 12px;
  text-align: center;
  color: rgb(69, 69, 69);
  background-color: #cfb09b;
    -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.bouton1:hover {
  width: 92px;
  height: 12px;
  text-align: center;
  color: rgb(69, 69, 69);
  background-color: #9c716f;
    -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.bouton2 {
  width: 92px;
  height: 12px;
  text-align: center;
  color: rgb(69, 69, 69);
  background-color: #9c716f;
    -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.bouton2:hover {
  width: 92px;
  height: 12px;
  text-align: center;
  color: rgb(69, 69, 69);
  background-color: #cfb09b;
    -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
/*INFOBULLE MEMBRE DU MOIS*/
div.infobulle {
  position: relative;
  float: left;
}

div.infobulle span {
  display: none;
}
div.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 1;
}
div.infobulle:hover span {
width: 130px;
display: inline;
position: absolute;
top: 60px;
left: 23px;
  height: 50px;
background-color: #fefbed;
color: #000000;
padding: 4px;
border: 1px solid #fad2a7;
border-radius: 2px;}
/*END*/

[Manumanu]

Déjà, ça c'est non :

Code:

<link href="http://fonts.googleapis.com/css?family=Petit+Formal+Script|Raleway+Dots|Caesar+Dressing|Courgette|Engagement|Aguafina+Script|Nothing+You+Could+Do|Oregano|Marck+Script|Romanesco|Spirax|Niconne|Yesteryear|Satisfy" rel="stylesheet" type="text/css">

Les balises link, c'est dans le <head> uniquement (fichier overall_header), surtout pas dans le HTML. Dans l'espace de la PA, ne mettez que du HTML, jamais de CSS/javascript.

Je n'ai pas besoin du CSS, mais du code javascript qui gère ces fameux onglets, où est-il ?

La console dévoile un certain nombre d'erreurs javascript, qui empêchent l'ensemble de fonctionner correctement.

J'ai trouvé ça dans le html :

Code:

<span id="o_11" class="mon_onglet_selected" OnMouseover="changeOnglet(this);">

Et la fonction "changeOnglet()" est inconnue du document ; d'où mon besoin de savoir quel script gère normalement ces onglets.

[CryingToYourHeart]

Il n'y a pas de java qui dirige les onglets, tout est fait via les templates et le css.
Pour cette balise

Code:

<link href="http://fonts.googleapis.com/css?family=Petit+Formal+Script|Raleway+Dots|Caesar+Dressing|Courgette|Engagement|Aguafina+Script|Nothing+You+Could+Do|Oregano|Marck+Script|Romanesco|Spirax|Niconne|Yesteryear|Satisfy" rel="stylesheet" type="text/css">

Je ne sais pas où elle peut se trouver et où la miss qui s'occupe de ça l'a mise :s

[Manumanu]

En l'état actuel, il n'y a strictement aucune chance que ça marche sans javascript. Si ces onglets ont déjà marché, il y en a donc forcément eu quelque part, ou bien la mise en forme a été modifiée depuis.

Si ça a déjà marché, est-ce que tu peux le remettre comme c'était à ce moment là ? Sinon, je te donne une façon de faire pérenne et stable directement.

La balise link a été mise dans le bloc de la PA, sinon.

[CryingToYourHeart]

Avant l'onglet des descriptions des groupes marchait mais il n'y a avait pas encore la PA, c'est lorsque la PA a été mis en place que ça ne marchait plus. Donc je ne sais pas trop pk avant ça marchait et maintenant plus :s

Concernant la balise je l'ai signalé donc on va changer ça

[Manumanu]

En regardant un peu la PA actuelle, il n'y a aucun élément, aucun contenu qui ne correspond aux onglets "règlement", "scénarios", etc... Pense donc à l'ajouter.

Bref, pour régler ton soucis, je te propose un petit système en jQuery.

Première chose : Dans le fichier de template overall_header, trouve la balise fermante </head>, et juste avant, ajoute ceci :

Code:

<script type="text/javascript" src="http://cdn.infographizm.com/javascript/jquery/tabs.js"></script>

Seconde chose : Tes onglets doivent être contenu dans un élément, peut importe lequel, qui porte la classe "tabs-onglets". Par exemple :

Code:

<div class="tabs-onglets">
   <a href="#onglet1">Onglet 1</a>
   <a href="#onglet2">Onglet 3</a>
   <a href="#onglet3">Onglet 4</a>
</div>

Comme tu le vois, les liens (attribut href) sont des ancres html (petite recherche google au besoin ). Tu dois faire en sorte que chaque href soit unique, et qu'ils commencent bien par un #. Ces ancres vont donc diriger vers un contenu portant un ID correspondant, les différentes "pages" de ta PA :

Code:

<div id="onglet1">
   Ici, tout ce que tu veux mettre.
</div>
<div id="onglet2">
   Ici, tout ce que tu veux mettre.
</div>
<div id="onglet3">
   Ici, tout ce que tu veux mettre.
</div>
<div id="onglet4">
   Ici, tout ce que tu veux mettre.
</div>

Tu constates que les id correspondent à une des ancres des liens (sans les # cette fois). Si tu changes l'ID, tu dois changer le href du lien, et vice-versa, pour qu'ils correspondent toujours. L'important ici est que les éléments qui portent ces ID soient tous au même niveau (c'est à dire pas séparés par d'autres balises).

De cette façon, tu peux avoir autant d'onglets que tu le souhaites, et autant de systèmes d'onglets que tu le souhaite, pourvu que les ID et les href correspondant soient toujours uniques.

Le jQuery fera le reste.

Tu peux voir un exemple de fonctionnement ici. N'hésites pas si tu as des questions.

PS: Si certains veulent le code de tabs.js, le voici :

Spoiler:

[CryingToYourHeart]

D'accord merci beaucoup, j'en ai fais par au staff
Par contre j'aimerais savoir où mettre ceci:

Code:

<div class="tabs-onglets">
  <a href="#onglet1">Onglet 1</a>
  <a href="#onglet2">Onglet 3</a>
  <a href="#onglet3">Onglet 4</a>
</div>

Dans la partie HTML ?

[Manumanu]

Où tu veux, généralement avant les onglets. Dans le cadre de la PA, hé bien, dans le bloc de la PA, tout simplement.

[CryingToYourHeart]

D'accord, merci pour vos conseil seulement lorsqu'on met cette partie:

Code:

<div class="tabs-onglets">
  <a href="#onglet1">Onglet 1</a>
  <a href="#onglet2">Onglet 3</a>
  <a href="#onglet3">Onglet 4</a>
</div>

dans notre cadre "dream team" et bien les icône ne s'affichent plus avec les onglets, comment es-ce que ça se fait ?

Voici la partie concernée:

Code:

<div class="cadre1"><div class="soustitre">DREAM TEAM</div><center><div class="tabs-onglets"><a href="#onglets1"><img src="http://media.tumblr.com/tumblr_m9erhyJoNb1rojapb.png" class="imong" width="45px;"></a>
<a href="#onglets2"><img src="http://img832.imageshack.us/img832/1903/icon11y.jpg" class="imong" width="45px;"></a>
<a href="#onglets3"><img src="http://image.noelshack.com/fichiers/2012/26/1340979659-icon4.png" class="imong" width="45px;"></a>
        </div>
<br/><div id="onglets1"><div class="pseudo2">snow-biwa p. ingold</div> fucking face. <br><a href="http://en-chantier.forumgratuit.ch/u3" target="_blank">profil</a> ❖ <a href="http://en-chantier.forumgratuit.ch/privmsg?mode=post&u=3" target="_blank">contacter</a>
        </div><div id="onglets2">
          <div class="pseudo2">caleb brent e. cooper</div>cryingtoyourheart<br><a href="http://en-chantier.forumgratuit.ch/u6" target="_blank">profil</a> ❖ <a href="http://en-chantier.forumgratuit.ch/privmsg?mode=post&u=6" target="_blank">contacter</a>
        </div>
        <div id="onglets3">
          <div class="pseudo2">s. najyla-luz everdeen</div>gipsy.heart<br><a href="http://en-chantier.forumgratuit.ch/u9" target="_blank">profil</a> ❖ <a href="http://en-chantier.forumgratuit.ch/privmsg?mode=post&u=9" target="_blank">contacter</a>
        </div></center></div>

[Manumanu]

Drôle de bug. Ajoutes ça à ton CSS :

Code:

.tabs-onglets { display: block !important }

[CryingToYourHeart]

Merci beaucoup
Ca marche super bien

[Manumanu]

Je t'en prie.

Pense à choisir des id/href plus explicites que "ongletsX", sinon tu vas vite t'y perdre