PA sous forme de page HTML
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
PA sous forme de page HTML
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
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
Dernière édition par CryingToYourHeart le Dim 21 Oct - 17:25, édité 1 fois
Re: PA sous forme de page HTML
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.
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.
Re: PA sous forme de page HTML
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:
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*/
Re: PA sous forme de page HTML
Déjà, ça c'est non :
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:
<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);">
Re: PA sous forme de page HTML
Il n'y a pas de java qui dirige les onglets, tout est fait via les templates et le css.
Pour cette balise
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">
Re: PA sous forme de page HTML
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.
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.
Re: PA sous forme de page HTML
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
Concernant la balise je l'ai signalé donc on va changer ça
Re: PA sous forme de page HTML
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 :
Seconde chose : Tes onglets doivent être contenu dans un élément, peut importe lequel, qui porte la classe "tabs-onglets". Par exemple :
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 :
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 :
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:
- 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();
});
});
Re: PA sous forme de page HTML
D'accord merci beaucoup, j'en ai fais par au staff
Par contre j'aimerais savoir où mettre ceci:
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>
Re: PA sous forme de page HTML
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.
Re: PA sous forme de page HTML
D'accord, merci pour vos conseil seulement lorsqu'on met cette partie:
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="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>
Re: PA sous forme de page HTML
Drôle de bug. Ajoutes ça à ton CSS :
- Code:
.tabs-onglets { display: block !important }
Re: PA sous forme de page HTML
Merci beaucoup
Ca marche super bien
Ca marche super bien
Re: PA sous forme de page HTML
Je t'en prie.
Pense à choisir des id/href plus explicites que "ongletsX", sinon tu vas vite t'y perdre
Pense à choisir des id/href plus explicites que "ongletsX", sinon tu vas vite t'y perdre
Sujets similaires
» Intégrer un Lexique sous forme word à son forum (HTML)
» Page html sous iframe (problèmes de texte serré sous Firefox)
» Comment ajouter un texte sous un logo dans une page HTML?
» Afficher une page Html en cliquant sur un sous forum
» sous catégorie qui redirige directement vers une page html
» Page html sous iframe (problèmes de texte serré sous Firefox)
» Comment ajouter un texte sous un logo dans une page HTML?
» Afficher une page Html en cliquant sur un sous forum
» sous catégorie qui redirige directement vers une page html
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum