| Problème avec mes onglets | |
|
Mina
{ Membre }
Messages : 122
| Bonjour ou bonsoir. (: Je fais appel à vous parce que j'ai découvert un souci plutôt désagréable sur mon forum. Alors je m'explique : En suivant ce tutoriel, j'ai réalisé tout d'abord des onglets pour mon QEEL. Ca marche impecc'. Puis j'ai voulu en faire également pour ma PA, alors déjà je me suis demandé s'il fallait que je fasse une 2ème page HTML comme expliqué dans le tuto. Je ne l'ai pas fait et ça fonctionne. Cependant j'aurais voulu séparer mes deux CSS pour les deux types d'onglets, mais je ne sais pas exactement quelles parties dans mon code je dois modifier, parce que j'avais créé deux CSS différents pour mes onglets et les propriétés étaient complètement mélangées ... Et maintenant quand les onglets de ma PA marchent, le QEEL disparaît, il réapparaît quand je passe la souris dessus mais alors la PA devient complètement déformée =/ De plus je ne sais pas ce que j'ai trafiqué mais maintenant mes onglets de ma PA ne marchent plus. Mon forum : http://tohodai.asiat-world.com Mon navigateur : Mozilla Firefox Ma version : Phbb2 Mes codes : - Celui de la PA : - Code:
-
<br><div class="texte_PA">Bienvenue à Tohodai <b>{USERNAME}</b> ! ♥</div><br><br>
<table><tr><td width="65%"><div class="systeme_onglets">
<div class="onglet"> <span class="onglet_0 onglet" id="onglet_Accueil" onmouseover="javascript:change_onglet('Accueil');">Accueil</span> <span class="onglet_0 onglet" id="onglet_Prédéfinis" onmouseover="javascript:change_onglet('Prédéfinis');">Prédéfinis</span> <span class="onglet_0 onglet" id="onglet_Partenaires" onmouseover="javascript:change_onglet('Partenaires');">Partenaires</span> </div>
<div class="contenu_onglet"> <div class="contenu_onglet" id="contenu_onglet_Accueil"><table><tr><td><img src="http://img42.xooimage.com/files/f/1/e/i85tqs5g-20d6766.png"></td><td>uc</td></tr></table></div>
<div class="contenu_onglet" id="contenu_onglet_Prédéfinis">UC</div>
<div class="contenu_onglet" id="contenu_onglet_Partenaires">UC</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'Accueil'; change_onglet(anc_onglet); //--> </script></td><td width="35%"><blockquote><div class="title">Quoi de neuf ?</div><br><marquee style="width: 250px; height: 390px" direction="up" onmouseover=this.stop(); onmouseout=this.start(); SCROLLAMOUNT=2>» Le forum a ouvert le <b>xx.xx.xx</b><br>» Un minimum de <b>20 lignes</b> par post est requis.<br>» Vous avez <b>15 jours</b> pour postez votre fiche.<br><br><b>INFOS</b><br>La rentrée est passée depuis une semaine. Mais il va falloir encore du temps à nos coréens pour s'habituer à leur nouvelle famille !<br><br><b>TEMPERATURE</b><br>Nous sommes au <b>Printemps</b>, la température est d'environ <b>8°C le matin & 13°C l'après-midi</b>.<br><br><b>EVENTS</b><br>Les étudiants sont autorisés à créer des fraternités, histoire de créer des liens entre eux ! Un bal de rentrée aura bientôt lieu au sein de Tohodai. Trouvez-vous un(e) cavalière, c'est l'occasion de rencontrer du monde !<br><br>Veuillez nous excuser pour les bugs causés par les onglets (disparition temporaire du QEEL, agrandissement de la PA), je vais essayer de résoudre le problème !</marquee></blockquote></td></tr></table><br><br> - Celui du QEEL : - Code:
-
<!-- BEGIN disable_viewonline --> <div class="image"><div class="systeme_onglets">
<div class="onglet"> <span class="onglet_0 onglet" id="onglet_Statistiques" onmouseover="javascript:change_onglet('Statistiques');">Statistiques</span> <span class="onglet_0 onglet" id="onglet_Groupes" onmouseover="javascript:change_onglet('Groupes');">Groupes</span> <span class="onglet_0 onglet" id="onglet_Staff" onmouseover="javascript:change_onglet('Staff');">Staff</span> <span class="onglet_0 onglet" id="onglet_Crédits" onmouseover="javascript:change_onglet('Crédits');">Crédits</span> <span class="onglet_0 onglet" id="onglet_Chatbox" onmouseover="javascript:change_onglet('Chatbox');">Chatbox</span> </div>
<div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_Statistiques"><br><br><br><br><br><br><br><br><br><br><br><br><br><span class="gensmall"><div class="stats">{TOTAL_POSTS}.<br> {TOTAL_USERS}<br> {NEWEST_USER}<br>{TOTAL_USERS_ONLINE}<br> {LOGGED_IN_USER_LIST}<br>{L_CONNECTED_MEMBERS}</div></span></div> <div class="contenu_onglet" id="contenu_onglet_Groupes"><br><br><br><br><br><br><br><br><br><br><br><br><span class="groupes"> <a href="LIEN DU GROUPE 1"><font color="COULEUR DU GROUPE 1" size="2"><b>NOM DU GROUPE 1</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg"><br> <span class="groupes"><a href="LIEN DU GROUPE 2"><font color="COULEUR DU GROUPE 2" size="2"><b>NOM DU GROUPE 2</b></font></a> </span> <img src="http://i31.tinypic.com/mugck1.jpg"><br> <span class="groupes"> <a href="LIEN DU GROUPE 3"><font color="COULEUR DU GROUPE 3" size="2"><b>NOM DU GROUPE 3</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg"><br> <span class="groupes"> <a href="LIEN DU GROUPE 4"><font color="COULEUR DU GROUPE 4" size="2"><b>NOM DU GROUPE 4</b></font></a> </span></div>
<div class="contenu_onglet" id="contenu_onglet_Staff"><br><br><br><br><br><br><br><br><br><br><br><br><br>UC</div>
<div class="contenu_onglet" id="contenu_onglet_Crédits"><br><br><br><br><br><br><br><br><br><br><br><br><br>UC</div>
<div class="contenu_onglet" id="contenu_onglet_Chatbox"><br><br><br><br><br><br><br><br><br><br><br><br><br><!-- Debut shoutbox - http://www.malware-site.www --> <iframe src="http://www.malware-site.www/shoutbox/shoutbox.php?idShoutbox=88831" width="385" height="200" frameborder="0" allowtransparency="true" >Votre navigateur semble incompatible, essayez d'ouvrir le <a href="http://www.malware-site.www" onClick="window.open(this.href+'?88831');">tchat</a>, ou rencontrez le webmaster pour plus d'informations.</iframe>
Agrandir le <a href="http://www.malware-site.www" onClick="window.open(this.href+'?88831');return false;">chat</a> . <!-- Fin shoutbox -->
</div> </div> </div></div> <script type="text/javascript"> //<!-- var anc_onglet = 'Statistiques'; change_onglet(anc_onglet); //--> </script> <!-- END disable_viewonline --> - Mon CSS : - Code:
-
body { cursor: crosshair } a:hover { cursor: crosshair }
/*Déco barre navigation*/ a.mainmenu { background-color: #a2d1d9; font-weight: bold; opacity: 0.5; -moz-border-radius: 15px; color : #ffffff; font-style: bold; text-shadow: #789fa6 1px 1px 3px; font-size: 10px; }
a.mainmenu:hover { font-size: 10px; color: #789fa6; text-shadow: 3px 3px 3px #ffffff; }
/* Dernière colonne PA*/ .sujets_messages { padding: 3px; font-size: 11px; background-color: #c1ccd4; -moz-border-radius: 10px; border: 0px solid #fff4e0; background-image: url(); text-align: center; }
tr.post td {padding-left: 5px;} /* Espace entre avatar et post */ tr.post td {padding-right: 5px;}
a { text-decoration: none !important; text-shadow: #ffffff 1px 1px 3px; }
a:hover { text-decoration: none !important; color: #ffffff; }
body { margin : 0 ; } .bodylinewidth { border-left :solid 0px ; border-right :solid 0px ; }
.code div { width: auto !important; } .code { font-family: Comic Sans MS; font-size: 11px; color: #9b6b6b; line-height: 125%; background-image: url(http://img21.imageshack.us/img21/5233/sanstitre32x.png); border: #FFFFFF; border-style: solid; border: 2px dashed #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 3px ; width: 400px; display: block; padding: 10px; text-align: justify; }
.forumline { border: 0px dashed #cb99a1; -moz-border-radius: 8px; }
.profil_contour { background-color: #ffffff; -moz-border-radius: 15px; filter:alpha(opacity=70); opacity:0.7; }
.pseudos { font-variant: small-caps; font-size: 14px}
table.bodylinewidth { position: relative; border: 7px solid; border-top: 0px; border-bottom: 0px; border-color: #cb99a1; shadow: 1px 1px 1px; }
.row1{ background-color: #; background-image: url(""); background-repeat: repeat; } td.row2{ background-color: #; background-image: url(""); background-repeat: repeat; } td.row3{ background-color: #; background-image: url(""); background-repeat: repeat; }
.titre { font-size: 20px; font-family: Georgia; color: #c1ccd4; text-shadow: 1px 1px 3px #ffffff; text-align: justify; letter-spacing: 2px; font-style: italic; }
.titre_forum { font-family: arial; font-variant: small-caps; font-size: 13px; text-align: justify; padding-right: 10px;}
.profil_contour { background-color: #cacacd; -moz-border-radius: 15px; }
.pseudos { font-variant: small-caps; font-size: 14px}
.onglet { display:inline-block; margin-left:3px; margin-right:3px; padding: 3px; border:0px solid black; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; cursor:pointer; font-family: Verdana; color: #ffffff; font-size: 12px; } .onglet_0 { background:#c1ccd4; border-bottom:0px solid black;
} .onglet_1 { background:#789fa6; border-bottom:0px solid black;
} .contenu_onglet { background-color:#dddddd; border:0px solid black; margin-top:-1px; font-family: Verdana; color: #789fa6; font-size: 10px;
display:none; width: 400px; height: 390px; padding-left: 15px; opacity: 0.3; }
.image { background-image: url("http://img26.xooimage.com/files/a/e/d/efgt-20c1b55.png"); background-repeat: no-repeat; background-position: right; }
.stats { color: #72838f; letter-spacing: 2px;}
.PV { background-color: #cacacd; -moz-border-radius: 15px; opacity: 0.7;}
.title { letter-spacing: 2px; font-size: 12px; }
.boite { height: 150px; overflow-x: auto; overflow-y: auto; padding: 10px; text-align: justify; }
.texte_PA { font-size: 30px; color: #; font-family: Learning Curve; } Captures du problème : http://img28.xooimage.com/files/f/5/7/sans-titre-20d8eff.png && http://img41.xooimage.com/files/6/3/0/h-20d8f5a.png Voilà, merci d'avance à celui ou celle qui se penchera sur mon problème (: | | |
|
| |
Radimir
{ Membre actif }
Messages : 459
| Bonsoir,
Le soucis qui vous présentez a déjà été traité sur le forum du moins en partie , il vous faudra nommé les classe d'onglet différemment pour qu'aucun bug ou conflit entre les deux systèmes ne survient en bref... Il faut changer le mot onglet du css et e la Pa (ou QEEl] en autre chose...
Par exemple PA_Onglet ou ongglet. | | |
|
| |
Mina
{ Membre }
Messages : 122
| Merci beaucoup de la réponse. Cependant j'avais essayé cela et les codes s'étaient en quelque sorte mélangés, c'est-à-dire que par exemple le QEEL devait avoir une opacité de 0.3 et la PA de 0.8 et les deux étaient à 0.8 ...
Peut-être n'ai-je pas changé la class à tous les bons endroits ? | | |
|
| |
Radimir
{ Membre actif }
Messages : 459
| Oui c'est sur selon moi , il faut changer les noms inscrits dans le css , ainsi que le html et le script Java...
Si vous n'y arrivez pas faites le moi savoir ici , je ferrai ce qui est nécessaire. | | |
|
| |
Mina
{ Membre }
Messages : 122
| Je teste ça ce soir, je n'ai plus d'ordi chez ma mère et les pc de la fac ne permettent pas d'éditer mes templates, ils bugguent quand j'enregistre. Merci beaucoup en tout cas =)
EDIT : Bon ya du progrès, l'image de ma PA est revenue, mais malgré tout ya toujours le problème du QEEL qui ne s'affiche pas tant qu'on ne passe pas la souris dessus et les onglets de la PA ne marchent toujours pas ... | | |
|
| |
Mina
{ Membre }
Messages : 122
| Désolée du double post mais je suis pas sûre qu'on remarque que mon probleme est toujours là rien qu'avec l'édit ... | | |
|
| |
Invité Invité
| Bonjour,
Les UP's sont totalement interdits. Nous remontons un sujet après 7 jours d'inactivité.
Merci de faire attention la prochaine fois. | | |
|
| |
Mina
{ Membre }
Messages : 122
| Je ne faisais pas ça dans le sens d'un Up mais Radimir m'a dit de lui dire si ça marchait pas, or avec l'édit je me suis dit qu'il aurait peut-être pas le réflexe de revenir sur le topic sans la notification ...
Désolée. | | |
|
| |
Invité Invité
| Les messages privés existent Tant que ça ne devient pas de l'harcèlement ^^ | | |
|
| |
Mina
{ Membre }
Messages : 122
| Pas faux. Je ferai attention promis! =) | | |
|
| |
Radimir
{ Membre actif }
Messages : 459
| Bonjour, Je vois qu'il manque déjà le script d'onglet sur la PA. Testez donc avec ce code pour votre PA. - Code:
-
<script type="text/javascript"> //<!-- function change_ongglet(name) { document.getElementById('ongglet_'+anc_ongglet).className = 'ongglet_0 ongglet'; document.getElementById('ongglet_'+name).className = 'ongglet_1 ongglet'; document.getElementById('contenu_ongglet_'+anc_ongglet).style.display = 'none'; document.getElementById('contenu_ongglet_'+name).style.display = 'block'; anc_ongglet = name; } //--> </script> <br><div class="texte_PA">Bienvenue à Tohodai <b>{USERNAME}</b> ! ♥</div><br><br>
<table><tr><td width="65%"><div class="systeme_ongglets">
<div class="ongglet"> <span class="ongglet_0 ongglet" id="ongglet_Acc" onmouseover="javascript:change_ongglet('Acc');">Accueil</span> <span class="ongglet_0 ongglet" id="ongglet_Pré" onmouseover="javascript:change_ongglet('Pré');">Prédéfinis</span> <span class="ongglet_0 ongglet" id="ongglet_Part" onmouseover="javascript:change_ongglet('Part');">Partenaires</span> </div>
<div class="contenu_ongglet"> <div class="contenu_ongglet" id="contenu_ongglet_Acc"><table><tr><td><img src="http://img42.xooimage.com/files/f/1/e/i85tqs5g-20d6766.png"></td><td>uc</td></tr></table></div>
<div class="contenu_ongglet" id="contenu_ongglet_Pré">UC</div>
<div class="contenu_ongglet" id="contenu_ongglet_Part">UC</div> </div> </div> <script type="text/javascript"> //<!-- var anc_ongglet = 'Acc'; change_ongglet(anc_ongglet); //-->
</script></td> <td width="35%"><blockquote><div class="title">Quoi de neuf ?</div><br><marquee style="width: 250px; height: 390px" direction="up" onmouseover=this.stop(); onmouseout=this.start(); SCROLLAMOUNT=2>» Le forum a ouvert le <b>xx.xx.xx</b><br>» Un minimum de <b>20 lignes</b> par post est requis.<br>» Vous avez <b>15 jours</b> pour postez votre fiche.<br><br><b>INFOS</b><br>La rentrée est passée depuis une semaine. Mais il va falloir encore du temps à nos coréens pour s'habituer à leur nouvelle famille !<br><br><b>TEMPERATURE</b><br>Nous sommes au <b>Printemps</b>, la température est d'environ <b>8°C le matin & 13°C l'après-midi</b>.<br><br><b>EVENTS</b><br>Les étudiants sont autorisés à créer des fraternités, histoire de créer des liens entre eux ! Un bal de rentrée aura bientôt lieu au sein de Tohodai. Trouvez-vous un(e) cavalière, c'est l'occasion de rencontrer du monde !<br><br>Veuillez nous excuser pour les bugs causés par les ongglets (disparition temporaire du QEEL, agrandissement de la PA), je vais essayer de résoudre le problème !</marquee></blockquote></td></tr></table><br><br>
Et mettez ce css pour votre PA , le mot onglet a été changé en ongglet pour éviter le bug d'onglet x) - Code:
-
.ongglet { display:inline-block; margin-left:3px; margin-right:3px; padding: 3px; border:0px solid black; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; cursor:pointer; font-family: Verdana; color: #ffffff; font-size: 12px; } .ongglet_0 { background:#c1ccd4; border-bottom:0px solid black;
} .ongglet_1 { background:#789fa6; border-bottom:0px solid black;
} .contenu_ongglet { background-color:#dddddd; border:0px solid black; margin-top:-1px; font-family: Verdana; color: #789fa6; font-size: 10px;
display:none; width: 400px; height: 390px; padding-left: 15px; opacity: 0.3; } | | |
|
| |
Mina
{ Membre }
Messages : 122
| Ca ne marche pas. Mai c'est pas gênant je vais faire une PA réactive et garder juste le QEEL en onglets, c'est pas un souci. En plus je change de thème donc bon ... Merci en tout cas d'avoir essayé =) Je saurai que vouloir faire des onglets à deux endroits en même temps c'est chaotique ! ^^ | | |
|
| |
M39
{ Membre }
Messages : 130
| Je crois comprendre que ta demande a été résolue ? Dans ce cas, merci de bien vouloir le signaler en éditant ton premier post et en cochant la case "résolue". Voilà, merci d'avance ^^ | | |
|
| |
Mina
{ Membre }
Messages : 122
| Oui on va considérer cela comme résolu =) Je m'en occupe tout de suite ! =D | | |
|
| |
Contenu sponsorisé
| |
| |
| Problème avec mes onglets | |
|