Problème avec la Pa en onglet
4 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2 • Partagez
Page 1 sur 2 • 1, 2
Problème avec la Pa en onglet
Bonjour
j'ai réussie a faire une Page d'accueil en onglet mais , je suis incapble de faire tenir mes onglet sans qu'il change . Enfait ce que j'aimerais qu'il fasse c'est qu'il change au clique .
http://midori.rpg-guild.org/
j'ai réussie a faire une Page d'accueil en onglet mais , je suis incapble de faire tenir mes onglet sans qu'il change . Enfait ce que j'aimerais qu'il fasse c'est qu'il change au clique .
http://midori.rpg-guild.org/
Dernière édition par Kaela Naoki le Jeu 7 Juil 2011 - 7:59, édité 5 fois
Re: Problème avec la Pa en onglet
Bonsoir,
puis-je avoir le code de vos onglets s'il vous plait.
Cordialement.
puis-je avoir le code de vos onglets s'il vous plait.
Cordialement.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Problème avec la Pa en onglet
Pouvez-vous expliquer plus en détail s'il-vous-plait ?
Re: Problème avec la Pa en onglet
Voilà .
- Code:
html>
<head>
<script type="text/javascript">
function afficher(element){
document.getElementById(element).style.display = "block";
}
function cacher(element){
document.getElementById(element).style.display = "none";
}
</script>
</head>
<body>
<table width="800"><tr><td width="200"><a href="#" onMouseOver="javascript:afficher('message1');" onMouseOut="javascript:cacher('message1');" >
<input type="button" value="Bienvenue" class="drh1"/>
</a><br>
<a href="#" onMouseOver="javascript:afficher('message2');" onMouseOut="javascript:cacher('message2');" >
<input type="button" value="Notre Staff" class="drh1" />
</a><br>
<a href="#" onMouseOver="javascript:afficher('message3');" onMouseOut="javascript:cacher('message3');" >
<input type="button" value="Nos Event & Nouveauté" class="drh1" />
</a><br>
<a href="#" onMouseOver="javascript:afficher('message4');" onMouseOut="javascript:cacher('message4');" >
<input type="button" value="Crédits & Partenaire" class="drh1" />
</a>
<div></td>
<td width="600" rowspan="2"><div id="drh">
<div id="message1" style="display: none;" > <table style="BORDER-BOTTOM: rgb(193,89,0) 3px solid; BORDER-LEFT: rgb(163,89,0) 3px solid; PADDING-BOTTOM: 5px; MARGIN: auto; PADDING-LEFT: 15px; WIDTH: 350px; PADDING-RIGHT: 20px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP: rgb(163,89,0) 3px solid; BORDER-RIGHT: rgb(163,89,0) 3px solid; PADDING-TOP: 0px; -moz-border-radius: 15px 15px 15px 15px"><tr><td align="left"> Bienvenue sur Midori RPG {USER&nbsp;LINK}
</td><td align="left">
</td></tr></table>
</span><table width="90%" cellspacing="1" cellpadding="0" border="0" align="center"><tr><td><span class="genmed"><b>Code:</b></span></td></tr><tr><td class="code"><div class="cont_code" curpos="0" maxpos="0" pageincrement="480" increment="10" collapsed="true"> <div style="display: block;" class="contenu_onglet" id="contenu_onglet_quoi"><div style="width: 488px; height: 17px; background-color: rgba(50, 100, 50, 0.3);"><p style="font-variant: small-caps;"><span style="font-size: 13px; line-height: normal; color: white;"> Titre 1</span></p></div><div style="background-color: rgba(100, 100, 100, 0.1); color: rgba(100, 100, 100, 0.2); overflow: auto; width: 475px; height: 137px; border: 0px solid red; padding: 5px;"><font face="georgia"><span style="font-size: 12px; line-height: normal; color: rgb(105, 105, 105);"> Texte 2
Bienvenue à Caelestis Skaï.</span></font></div><table><tbody><tr><td><div style="width: 358px; height: 17px; background-color: rgba(50, 100, 50, 0.3);"><p style="font-variant: small-caps;"><span style="font-size: 13px; line-height: normal; color: white;">Un Évent ?</span></p></div><div style="background-color: rgba(100, 100, 100, 0.1); color: rgba(100, 100, 100, 0.2); overflow: auto; width: 345px; height: 100px; border: 0px solid red; padding: 5px;">
<font face="georgia"><span style="font-size: 12px; line-height: normal; color: rgb(105, 105, 105);"> texte 1 </span></font></div> </td><td><div style="width: 125px; height: 125px; background-color: rgba(50, 100, 50, 0.3);"><p style="font-variant: small-caps;"><span style="font-size: 13px; line-height: normal; color: white;">Un Évent ?</span></p></div></td></tr></tbody></table>
</div> </div></td></tr></table><span class="postbody"> </div>
<div id="message2" style="display: none;" > <table style="BORDER-BOTTOM: rgb(193,89,0) 3px solid; BORDER-LEFT: rgb(163,89,0) 3px solid; PADDING-BOTTOM: 5px; MARGIN: auto; PADDING-LEFT: 15px; WIDTH: 350px; PADDING-RIGHT: 20px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP: rgb(163,89,0) 3px solid; BORDER-RIGHT: rgb(163,89,0) 3px solid; PADDING-TOP: 0px; -moz-border-radius: 15px 15px 15px 15px"><tr><td align="left"> </div>
<div id="message3" style="display: none;" >Contenu onglet 3</div>
<div id="message4" style="display: none;" >Contenu onglet 4></div>
</div>
</div></td></tr>
<td width="200" class="drh2"></td>
</table>
</body>
</html>
Cordialement
Re: Problème avec la Pa en onglet
Ce que je voudrais c'est que au lieux de changer lorsqu’on passe la sourie dessus que les onglet change au clique de la souri dessus . Comme ça l’onglet reste actif même si ont n'a pas la souri dessus .
Re: Problème avec la Pa en onglet
Repérez les onMouseOver et remplacez les par des OnClick.
Cordialement.
Cordialement.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Problème avec la Pa en onglet
Bon je viens de le faire mais plus rien n'apparais .
Les onglets ne se change plus
Cordialement
Les onglets ne se change plus
Cordialement
Re: Problème avec la Pa en onglet
ah j'ai trouver le problème
Sa marche merci !
Sa marche merci !
Re: Problème avec la Pa en onglet
Non finalement j'ai empiré la situation , En plus de ne pas tenir il ne change plus .
http://midoriblood.rpg-guild.org/#
http://midoriblood.rpg-guild.org/#
Re: Problème avec la Pa en onglet
Votre problème est-il entièrement résolu ?
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Problème avec la Pa en onglet
Non je l'ai empiré
Re: Problème avec la Pa en onglet
Puis-je savoir où vous avez trouver le modèle de votre PA ? Il y a certaines choses qu'il faudrait en fait appellés dans un fichier javascript à part, et le reste laisser dans votre code.
Je pourrais ainsi mieux vous aiguiller et aider.
Je pourrais ainsi mieux vous aiguiller et aider.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Problème avec la Pa en onglet
Hum en fait je ne peut pas vraiment dire ou j'ai trouvé le code car je l'ai trouver dans un sujet ici , j'ai suivi ce qu'il faillais faire et ces que ça ma donner .
Re: Problème avec la Pa en onglet
Essayer déjà de le mettre ainsi :
Je reprends à partir de votre premier code. Nous verrons pour d'autres changements ensuite. Les codes que j'ai enlevé, on les mets normalement dans une page html, pas dans un forum ^^
Y'a-t-il un progrès ?
- Code:
<script type="text/javascript">
function afficher(element){
document.getElementById(element).style.display = "block";
}
function cacher(element){
document.getElementById(element).style.display = "none";
}
</script>
<table width="800"><tr><td width="200"><a href="#" onMouseOver="javascript:afficher('message1');" onMouseOut="javascript:cacher('message1');" >
<input type="button" value="Bienvenue" class="drh1"/>
</a><br>
<a href="#" onMouseOver="javascript:afficher('message2');" onMouseOut="javascript:cacher('message2');" >
<input type="button" value="Notre Staff" class="drh1" />
</a><br>
<a href="#" onMouseOver="javascript:afficher('message3');" onMouseOut="javascript:cacher('message3');" >
<input type="button" value="Nos Event & Nouveauté" class="drh1" />
</a><br>
<a href="#" onMouseOver="javascript:afficher('message4');" onMouseOut="javascript:cacher('message4');" >
<input type="button" value="Crédits & Partenaire" class="drh1" />
</a>
<div></td>
<td width="600" rowspan="2"><div id="drh">
<div id="message1" style="display: none;" > <table style="BORDER-BOTTOM: rgb(193,89,0) 3px solid; BORDER-LEFT: rgb(163,89,0) 3px solid; PADDING-BOTTOM: 5px; MARGIN: auto; PADDING-LEFT: 15px; WIDTH: 350px; PADDING-RIGHT: 20px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP: rgb(163,89,0) 3px solid; BORDER-RIGHT: rgb(163,89,0) 3px solid; PADDING-TOP: 0px; -moz-border-radius: 15px 15px 15px 15px"><tr><td align="left"> Bienvenue sur Midori RPG {USER&nbsp;LINK}
</td><td align="left">
</td></tr></table>
</span><table width="90%" cellspacing="1" cellpadding="0" border="0" align="center"><tr><td><span class="genmed"><b>Code:</b></span></td></tr><tr><td class="code"><div class="cont_code" curpos="0" maxpos="0" pageincrement="480" increment="10" collapsed="true"> <div style="display: block;" class="contenu_onglet" id="contenu_onglet_quoi"><div style="width: 488px; height: 17px; background-color: rgba(50, 100, 50, 0.3);"><p style="font-variant: small-caps;"><span style="font-size: 13px; line-height: normal; color: white;"> Titre 1</span></p></div><div style="background-color: rgba(100, 100, 100, 0.1); color: rgba(100, 100, 100, 0.2); overflow: auto; width: 475px; height: 137px; border: 0px solid red; padding: 5px;"><font face="georgia"><span style="font-size: 12px; line-height: normal; color: rgb(105, 105, 105);"> Texte 2
Bienvenue à Caelestis Skaï.</span></font></div><table><tbody><tr><td><div style="width: 358px; height: 17px; background-color: rgba(50, 100, 50, 0.3);"><p style="font-variant: small-caps;"><span style="font-size: 13px; line-height: normal; color: white;">Un Évent ?</span></p></div><div style="background-color: rgba(100, 100, 100, 0.1); color: rgba(100, 100, 100, 0.2); overflow: auto; width: 345px; height: 100px; border: 0px solid red; padding: 5px;">
<font face="georgia"><span style="font-size: 12px; line-height: normal; color: rgb(105, 105, 105);"> texte 1 </span></font></div> </td><td><div style="width: 125px; height: 125px; background-color: rgba(50, 100, 50, 0.3);"><p style="font-variant: small-caps;"><span style="font-size: 13px; line-height: normal; color: white;">Un Évent ?</span></p></div></td></tr></tbody></table>
</div> </div></td></tr></table><span class="postbody"> </div>
<div id="message2" style="display: none;" > <table style="BORDER-BOTTOM: rgb(193,89,0) 3px solid; BORDER-LEFT: rgb(163,89,0) 3px solid; PADDING-BOTTOM: 5px; MARGIN: auto; PADDING-LEFT: 15px; WIDTH: 350px; PADDING-RIGHT: 20px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP: rgb(163,89,0) 3px solid; BORDER-RIGHT: rgb(163,89,0) 3px solid; PADDING-TOP: 0px; -moz-border-radius: 15px 15px 15px 15px"><tr><td align="left"> </div>
<div id="message3" style="display: none;" >Contenu onglet 3</div>
<div id="message4" style="display: none;" >Contenu onglet 4></div>
</div>
</div></td></tr>
<td width="200" class="drh2"></td>
</table>
Je reprends à partir de votre premier code. Nous verrons pour d'autres changements ensuite. Les codes que j'ai enlevé, on les mets normalement dans une page html, pas dans un forum ^^
Y'a-t-il un progrès ?
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Problème avec la Pa en onglet
ça me donne la même chose que j'avais au départ mais ses beaucoup mieux que ce que j'Avais il y a quelques seconde . Par contre c'est au moment de mêtre les Onglet cliquable que tout a déformé . Donc la je dois re changer les onmouseover par les onclick ?
Re: Problème avec la Pa en onglet
Tentez oui de les refaire en onclick s'il y avait un mieux.
De plus, si vous pouviez retrouver le sujet cela serait un grand plus. Je comprendrais mieux comment fonctionne e code ^^
De plus, si vous pouviez retrouver le sujet cela serait un grand plus. Je comprendrais mieux comment fonctionne e code ^^
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Problème avec la Pa en onglet
Non ça ne marche toujours pas , ça me redonne exactement la même chose que tous a l'heure .
Re: Problème avec la Pa en onglet
je vais tenter de trouver le sujet
Re: Problème avec la Pa en onglet
Pensez à éditer vos messages, plutot que de faire des double posts ^^
J'ai trouvé un sujet qui vous permettrai d'avoir le meme effet, mais un peu différent ^^
Essayer ceci : mettez dans Généralités :
à personnaliser, et dans votre css :
à personnaliser également avec votre contenu.
J'ai trouvé un sujet qui vous permettrai d'avoir le meme effet, mais un peu différent ^^
Essayer ceci : mettez dans Généralités :
- Code:
<script type="text/javascript">function changeOnglet(_this){
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('span');
for(var i = 0; i < getOnglets.length; i ){
if(getOnglets[i].id){
if(getOnglets[i].id == _this.id){
getOnglets[i].className = 'mon_onglet_selected';
document.getElementById('c' _this.id).style.display = 'block';
}
else{
getOnglets[i].className = 'mon_onglet';
document.getElementById('c' getOnglets[i].id).style.display = 'none';
}
}
}
}</script>
<table><tr><td>
<div id="mes_onglets">
<span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</span>
<span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
<span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
<span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</span></div></td>
<td>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Mon contenu 1</div>
<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
<div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></div></td></tr></table>
à personnaliser, et dans votre css :
- Code:
.mon_onglet{
display: block;
padding: 5px;
margin: 4px;
color: #000;
background: #ffffff;
border: 1px solid #ff0000;
}
.mon_onglet:hover{
background: #b8efa1;
}
.mon_onglet_selected{
display: block;
padding: 5px;
margin: 4px;
color: #000;
background: #ffffff;
border: 1px solid #ff0000;
}
.clear{
clear: both;
}
.mon_contenu{
color: #000;
background: #ffffff;
border: 1px solid #ff0000;
padding: 10px;
margin: 10 px;
height: 120px;}
#mes_contenus, #mes_onglets{
height: 100%;
width:100%;}
à personnaliser également avec votre contenu.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Problème avec la Pa en onglet
Oui mais les onglet ne marche pas ...
Re: Problème avec la Pa en onglet
Tentez vraiment de me retrouver votre sujet, celui où vous aviez trouvé le code de base.
C'est le seul moyen pour que je puisse reprendre de la base avec vous.
Cordialement.
C'est le seul moyen pour que je puisse reprendre de la base avec vous.
Cordialement.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Problème avec la Pa en onglet
Non je le trouve vraiment pas , j'ai par contre trouver un autre tableau que j'ai fait --> https://forum.forumactif.com/t300080-boite-onglet?highlight=Pa+onglet . J'ai réeusi a travaillé dessu et a y ajouté du contenu mais les onglet on arrêté de fonctionner , http://midori.rpg-guild.org/forum
Le Code de ma PA
Le Code de ma PA
- Code:
<div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Bienvenue</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Le Staff</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Nos Partenaire</li>
<li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Crédit & Nouveauté</li><div id="mes_contenus">
<div id="co_1" class="mon_contenu"><br>Bienvenue Sur Midori Rpg
<table border="1" cellpadding="4" cellspacing="0" width="100%"> <tbody><tr valign="TOP"> <td align="left" width="33%">
<font size="4"><span style="font-family: Palatino Linotype;">Midori Rpg :)
</span></font></td> <td align="left" width="67%">
<font style="color: Black;" size="4"><span style="font-family: Palatino Linotype;">NOTRE CONTEXTE</span></font><br></td> </tr> <tr valign="TOP"> <td align="left" width="33%"><div style="text-align: justify;">
</div><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr><td><strong><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr align="center"><td><br></td></tr><tr align="left"><td class="code"><a href="http://midori.rpg-guild.org/t198-midori-reglement-2011">~ Règlement ~</a><br><a href="http://midori.rpg-guild.org/t201-notre-contexte">~ Contexte ~</a><br><a href="http://midori.rpg-guild.org/t187-nouvelle-fiche-de-presentation">~ Fiche de Présentation ~</a><br><a href="http://midori.rpg-guild.org/f3-personnage-predefinie">~ Perso Vaccant ~
</a><br>~ Partenaria ~</td></tr></tbody></table></strong><strong><span class="postbody"></span></strong></td></tr></tbody></table>
</td> <td align="left" width="67%">
<strong><strong></strong></strong><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr></tr><tr><td><br>
Il y'a des millions d'années de cela, tandis que les années d'un
monde sans rédempteur s'écoulaient lentement dans le vide, la terre
hurlait sans cesse sa peine de ne pouvoir être sauvée. C’est alors que
dans un amas de flammes, naquit une enfant aux pouvoirs extraordinaires.
Celui-ci avait été envoyé par les dieux pour sauver le monde, qui se
fanait peu à peu sous l'emprise des humains qui faisaient approcher
l’échéance de la fin de leur race. L’enfant vivait au sein d'une famille
noble de haute importance, elle se démarqua très vite par sa
différence, elle qui n'était pas humaine et dont les yeux brillait comme
un clair de lune étincelant, elle était considérée comme un ange... --> <a href="http://midori.rpg-guild.org/t201-notre-contexte">Cliqué ici </a><br></td></tr></tbody></table>
</td></tr></tbody></table>
</div>
<div id="co_2" class="mon_contenu" style="display: none;">
<br>Faites pas attention (Phase de test!! 2)
</div>
<div id="co_3" class="mon_contenu" style="display: none;">
<br>Faites pas attention (Phase de test!! 3)
</div>
<div id="co_4" class="mon_contenu" style="display: none;">
<br>Faites pas attention (Phase de test!! 4)
</div>
</div></ul></div>
Re: Problème avec la Pa en onglet
Comme noté dans le post par Isolde, vous devez avoir trois choses :
Avez-vous tout mis ?
Si oui, fournissez moi les trois (en MP si cela vous dérange de me les donner ici).
- 1 fichier js à héberger et à appeller ou à mettre directement dans votre PA
- un code pour la PA
- un code pour la css
Avez-vous tout mis ?
Si oui, fournissez moi les trois (en MP si cela vous dérange de me les donner ici).
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Problème avec la Pa en onglet
Code de la PA
Code du Css
Du fiché js. --> collez dans un html
- Code:
<div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Bienvenue</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Le Staff</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Nos Partenaire</li>
<li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Crédit & Nouveauté</li><div id="mes_contenus">
<div id="co_1" class="mon_contenu"><br>Bienvenue Sur Midori Rpg
<table border="1" cellpadding="4" cellspacing="0" width="100%"> <tbody><tr valign="TOP"> <td align="left" width="33%">
<font size="4"><span style="font-family: Palatino Linotype;">Midori Rpg :)
</span></font></td> <td align="left" width="67%">
<font style="color: Black;" size="4"><span style="font-family: Palatino Linotype;">NOTRE CONTEXTE</span></font><br></td> </tr> <tr valign="TOP"> <td align="left" width="33%"><div style="text-align: justify;">
</div><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr><td><strong><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr align="center"><td><br></td></tr><tr align="left"><td class="code"><a href="http://midori.rpg-guild.org/t198-midori-reglement-2011">~ Règlement ~</a><br><a href="http://midori.rpg-guild.org/t201-notre-contexte">~ Contexte ~</a><br><a href="http://midori.rpg-guild.org/t187-nouvelle-fiche-de-presentation">~ Fiche de Présentation ~</a><br><a href="http://midori.rpg-guild.org/f3-personnage-predefinie">~ Perso Vaccant ~
</a><br>~ Partenaria ~</td></tr></tbody></table></strong><strong><span class="postbody"></span></strong></td></tr></tbody></table>
</td> <td align="left" width="67%">
<strong><strong></strong></strong><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr></tr><tr><td><br>
Il y'a des millions d'années de cela, tandis que les années d'un
monde sans rédempteur s'écoulaient lentement dans le vide, la terre
hurlait sans cesse sa peine de ne pouvoir être sauvée. C’est alors que
dans un amas de flammes, naquit une enfant aux pouvoirs extraordinaires.
Celui-ci avait été envoyé par les dieux pour sauver le monde, qui se
fanait peu à peu sous l'emprise des humains qui faisaient approcher
l’échéance de la fin de leur race. L’enfant vivait au sein d'une famille
noble de haute importance, elle se démarqua très vite par sa
différence, elle qui n'était pas humaine et dont les yeux brillait comme
un clair de lune étincelant, elle était considérée comme un ange... --> <a href="http://midori.rpg-guild.org/t201-notre-contexte">Cliqué ici </a><br></td></tr></tbody></table>
</td></tr></tbody></table>
</div>
<div id="co_2" class="mon_contenu" style="display: none;">
<br>Faites pas attention (Phase de test!! 2)
</div>
<div id="co_3" class="mon_contenu" style="display: none;">
<br>Faites pas attention (Phase de test!! 3)
</div>
<div id="co_4" class="mon_contenu" style="display: none;">
<br>Faites pas attention (Phase de test!! 4)
</div>
</div></ul></div>
Code du Css
- Code:
ul, li{
list-style: none;
}
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #ffffff;
border: 1px solid #ff0000;
cursor: pointer;
margin-bottom: -1px;
}
.mon_onglet:hover{
background: #b8efa1;
}
.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #ffffff;
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-left: 1px solid #ff0000;
border-bottom: 1px solid #ffffff;
cursor: pointer;
margin-bottom: -1px;
}
.clear{
clear: both;
}
.mon_contenu{
color: #000;
background: #ffffff;
border: 1px solid #ff0000;
padding: 10px;
margin: -1px;
}
#mes_contenus, #mes_onglets{
width: 700px;
}
Du fiché js. --> collez dans un html
- Code:
function changeOnglet(_this){
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li');
for(var i = 0; i < getOnglets.length; i++){
if(getOnglets[i].id){
if(getOnglets[i].id == _this.id){
getOnglets[i].className = 'mon_onglet_selected';
document.getElementById('c' + _this.id).style.display = 'block';
}
else{
getOnglets[i].className = 'mon_onglet';
document.getElementById('c' + getOnglets[i].id).style.display = 'none';
}
}
}
}
Re: Problème avec la Pa en onglet
enlever votre page html
et insérez en entier dans votre pa :
Cela marche sur mon forum (lien dans profil)... Cordialement.
et insérez en entier dans votre pa :
- Code:
<script> function changeOnglet(_this){
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('li');
for(var i = 0; i < getOnglets.length; i++){
if(getOnglets[i].id){
if(getOnglets[i].id == _this.id){
getOnglets[i].className = 'mon_onglet_selected';
document.getElementById('c' + _this.id).style.display = 'block';
}
else{
getOnglets[i].className = 'mon_onglet';
document.getElementById('c' + getOnglets[i].id).style.display = 'none';
}
}
}
} </script>
<div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Bienvenue</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Le Staff</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Nos Partenaire</li>
<li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Crédit & Nouveauté</li><div id="mes_contenus">
<div id="co_1" class="mon_contenu"><br>Bienvenue Sur Midori Rpg
<table border="1" cellpadding="4" cellspacing="0" width="100%"> <tbody><tr valign="TOP"> <td align="left" width="33%">
<font size="4"><span style="font-family: Palatino Linotype;">Midori Rpg :)
</span></font></td> <td align="left" width="67%">
<font style="color: Black;" size="4"><span style="font-family: Palatino Linotype;">NOTRE CONTEXTE</span></font><br></td> </tr> <tr valign="TOP"> <td align="left" width="33%"><div style="text-align: justify;">
</div><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr><td><strong><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr align="center"><td><br></td></tr><tr align="left"><td class="code"><a href="http://midori.rpg-guild.org/t198-midori-reglement-2011">~ Règlement ~</a><br><a href="http://midori.rpg-guild.org/t201-notre-contexte">~ Contexte ~</a><br><a href="http://midori.rpg-guild.org/t187-nouvelle-fiche-de-presentation">~ Fiche de Présentation ~</a><br><a href="http://midori.rpg-guild.org/f3-personnage-predefinie">~ Perso Vaccant ~
</a><br>~ Partenaria ~</td></tr></tbody></table></strong><strong><span class="postbody"></span></strong></td></tr></tbody></table>
</td> <td align="left" width="67%">
<strong><strong></strong></strong><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr></tr><tr><td><br>
Il y'a des millions d'années de cela, tandis que les années d'un
monde sans rédempteur s'écoulaient lentement dans le vide, la terre
hurlait sans cesse sa peine de ne pouvoir être sauvée. C’est alors que
dans un amas de flammes, naquit une enfant aux pouvoirs extraordinaires.
Celui-ci avait été envoyé par les dieux pour sauver le monde, qui se
fanait peu à peu sous l'emprise des humains qui faisaient approcher
l’échéance de la fin de leur race. L’enfant vivait au sein d'une famille
noble de haute importance, elle se démarqua très vite par sa
différence, elle qui n'était pas humaine et dont les yeux brillait comme
un clair de lune étincelant, elle était considérée comme un ange... --> <a href="http://midori.rpg-guild.org/t201-notre-contexte">Cliqué ici </a><br></td></tr></tbody></table>
</td></tr></tbody></table>
</div>
<div id="co_2" class="mon_contenu" style="display: none;">
<br>Faites pas attention (Phase de test!! 2)
</div>
<div id="co_3" class="mon_contenu" style="display: none;">
<br>Faites pas attention (Phase de test!! 3)
</div>
<div id="co_4" class="mon_contenu" style="display: none;">
<br>Faites pas attention (Phase de test!! 4)
</div>
</div></ul></div>
Cela marche sur mon forum (lien dans profil)... Cordialement.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Problème avec la Pa en onglet
Ps en collant tous le ficher sa bloque tous les onglet .
Bon j'ai trouver comment mais en ajoutant du contenus les onglet on encore fait la même chose , également j'aurais une autre question comment fessons nous pour mettre les infobulle de façons horizontal ?
Cordialement
Bon j'ai trouver comment mais en ajoutant du contenus les onglet on encore fait la même chose , également j'aurais une autre question comment fessons nous pour mettre les infobulle de façons horizontal ?
Cordialement
Re: Problème avec la Pa en onglet
Il faut mettre chaque infobulle dans les cellules d'un tableau, ainsi elles resteront alignées. ^^
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Problème avec la Pa en onglet
Ok merci , mais pour le tableau a onglet il a recommencer , les onglets ne fonctionne plus ...
Re: Problème avec la Pa en onglet
Pouvez-vous expliquer plus en détail s'il-vous-plait ?
myefox2000- Nouveau membre
- Messages : 2
Inscrit(e) le : 27/06/2011
Re: Problème avec la Pa en onglet
Remplissez déjà les contenus que vous désirez mettre, puisqu'apparemment le tableau ne marche plus à partir de là. Puis donnez moi le code de votre tableau complet (par MP si ça vous dérange de le mettre ici) ainsi que de votre css (idem par MP si cela vous dérange)
Ensuite nous verrons.
COrdialement.
Ensuite nous verrons.
COrdialement.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Page 1 sur 2 • 1, 2
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum