PA sous forme de page HTML

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu PA sous forme de page HTML

Message par CryingToYourHeart le Dim 21 Oct 2012 - 12:09

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 Smile


Dernière édition par CryingToYourHeart le Dim 21 Oct 2012 - 17:25, édité 1 fois

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA sous forme de page HTML

Message par Manumanu le Dim 21 Oct 2012 - 12:42

Bonjour,

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

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

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA sous forme de page HTML

Message par CryingToYourHeart le Dim 21 Oct 2012 - 13:05

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

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA sous forme de page HTML

Message par Manumanu le Dim 21 Oct 2012 - 13:12

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.

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA sous forme de page HTML

Message par CryingToYourHeart le Dim 21 Oct 2012 - 13:20

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

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA sous forme de page HTML

Message par Manumanu le Dim 21 Oct 2012 - 13:26

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

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA sous forme de page HTML

Message par CryingToYourHeart le Dim 21 Oct 2012 - 13:33

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 Smile

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA sous forme de page HTML

Message par Manumanu le Dim 21 Oct 2012 - 13:53

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 Wink ). 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:
Code:
/**
 * Système d'onglets automatisé
 * Version : 1.0
 * Par Emmanuel "Manumanu" B.
 **/

$(document).ready(function() {
   var ongletActuel = null;
   ongletActuel = $('.tabs-onglets a:first').attr('href');

   // Ajout de classe au premier onglet
   $('.tabs-onglets').find('a[href="'+ ongletActuel +'"]').addClass('selected');

   // Afficher l'élément par défaut correspondant à celui de l'onglet par défaut
   $(ongletActuel).show().siblings().hide();

   // Gestion de l'événement clic
   $('.tabs-onglets a').click(function(e) {
      idOnglet = $(this).attr('href');

      // Si l'élément est déjà sélectionné, ne rien faire
      if (idOnglet == ongletActuel)
         e.preventDefault();
      else {
         // Afficher le contenu demandé et masquer le contenu restant
         $(idOnglet).fadeIn().siblings().hide();

         // Retirer la classe des autres onglets et l'ajouter sur l'élément sélectionné
         $(this).addClass('selected').siblings().removeClass('selected');
         ongletActuel = idOnglet;
      }

      // Empêche le déclenchement du lien
      e.preventDefault();
   });
});

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA sous forme de page HTML

Message par CryingToYourHeart le Dim 21 Oct 2012 - 14:38

D'accord merci beaucoup, j'en ai fais par au staff Smile
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 ?

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA sous forme de page HTML

Message par Manumanu le Dim 21 Oct 2012 - 15:00

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.

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA sous forme de page HTML

Message par CryingToYourHeart le Dim 21 Oct 2012 - 16:55

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>

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA sous forme de page HTML

Message par Manumanu le Dim 21 Oct 2012 - 17:22

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

Code:
.tabs-onglets { display: block !important }

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA sous forme de page HTML

Message par CryingToYourHeart le Dim 21 Oct 2012 - 17:24

Merci beaucoup Very Happy
Ca marche super bien Smile

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA sous forme de page HTML

Message par Manumanu le Dim 21 Oct 2012 - 17:25

Je t'en prie.

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

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum