Problème d'onglet avec ma PA.
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
Problème d'onglet avec ma PA.
Bonsoir et merci de m'aider !
J'ai un petit soucis avec ma page d'accueil, le contenu de mon deuxième onglet n’apparaît pas. Je vous mets ci dessous le code HTML (le CSS et javascript n'étant peut-être pas utiles). Pouvez-vous m'indiquer où est le problème si vous trouvez ? Merci d'avance !
Bonne soirée !
J'ai un petit soucis avec ma page d'accueil, le contenu de mon deuxième onglet n’apparaît pas. Je vous mets ci dessous le code HTML (le CSS et javascript n'étant peut-être pas utiles). Pouvez-vous m'indiquer où est le problème si vous trouvez ? Merci d'avance !
- Code:
<div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">~ Informations essentielles </li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">~ Autres</li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu"><center><table><tr><td><div style="font-size: 15px;"><span style="color: #575249">
<b>D</b>ans le monde d'<b>A</b>ekeva, la <b>M</b>agie a été bannie par la <b>S</b>cience.<br/> <br/>
<b>C</b>ette dernière, incarnée par la <b>R</b>eine, règne d'une main de fer sur son <b>E</b>mpire.<br/><br/>
<b>M</b>ais dans l'ombre, menée par un mystérieux chef, la <b>M</b>agie s'apprête à revenir ;
<br/> <b>D'</b>autant qu'<b>E</b>dfartig, allié incertain, pèse également dans la <b>B</b>alance...<br><br>
<b>O</b>ù trouverez-vous votre place ?
<br/>
</span></td><div align="right"><td><a href="http://www.imagup.com/data/1134378771.html"><img src="http://data.imagup.com/12/1134378771.png" /></a></div></td></div></tr></table><center>_______________________________________________________</center></center><table><tr><td><span style="color: #575249"><div style="font-size: 15px;"><b>N</b>ouveautés :</div></span> <br> ../12/11 → Vous ne rêvez pas, un nouveau design ! Pour plus d'infos, cliquez ici. <br><br> ../../11 → infos-du-moment-infos-du-moment-infos-du-moment. <br><br> ../12/11 → Bonnes vacances et joyeuses fêtes à tous ! ♥</td><td></td><td><span style="color: #575249"><div style="font-size: 15px;"><b>L</b>iens <b>u</b>tiles :</div></span><br><a style="text-shadow: 1px 1px 2px #ffffff;" href="http://aekeva.forumactif.com/t828-livre-du-savoir-absolu">• Règlement du forum.</a></div><br><a style="text-shadow: 1px 1px 2px #ffffff;" href="http://aekeva.forumactif.com/t877-livre-du-savoir-complementaire">• Bien commencer.</a></div><br><a style="text-shadow: 1px 1px 2px #ffffff;" href="http://aekeva.forumactif.com/t1075-liste-personnage-predefinis">• Personnages Prédéfinis.</a></div><br><a style="text-shadow: 1px 1px 2px #ffffff;" href="http://aekeva.forumactif.com/f87-coffre-d-aekeva">• Se plongez dans le monde.</a></div><br><a style="text-shadow: 1px 1px 2px #ffffff;" href="http://aekeva.forumactif.com/f94-coffre-du-role-player">• Dans les moindres détails.</a></div></td><td></td><td><span style="color: #575249"><div style="font-size: 15px;"><b>T</b>op <b>s</b>ites :</div></span><br>A venir MDR</td></tr></div></table>
<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
</div></div></ul></div>
Bonne soirée !
Dernière édition par Bibouh le Mar 22 Nov 2011, 06:49, édité 1 fois
Re: Problème d'onglet avec ma PA.
Bonsoir voila le code de base pour un menue a onglet pour version phpBB2
Voila les codes
- Gestion des codes Javascript
- Feuille de style CSS
- Code HTML sur la page D'accueil
Nous allons plus nous intéressez au code HTML sur la page d'accueil.[voila ce que tu a si j'ai bien vue tu n'as que 2 onglets ]
Voila il te suffit maintenant de remplacer Onglet 1 et 2 par ce que tu désirais et Mon contenu 1 et 2 de même en espérant que j'ai put t'aider ! Si d'autre problèmes survienne demande moi
Voila les codes
- Gestion des codes Javascript
- 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'; } } } }
- Feuille de style CSS
- Code:
.mon_onglet{ float: left; padding: 2px 10px; margin-right: 5px; color: #000; background: #fff; border: 1px solid #000; cursor: pointer; margin-bottom: -1px; list-style: none;} .mon_onglet:hover{ background: #b8efa1;} .mon_onglet_selected{ float: left; padding: 2px 10px; margin-right: 5px; color: #000; background: #fff; border-top: 1px solid #000; border-right: 1px solid #000; border-left: 1px solid #000; border-bottom: 1px solid #fff; cursor: pointer; margin-bottom: -1px; list-style: none;} .clear{ clear: both;}.mon_contenu{ color: #000; background: #fff; border: 1px solid #000; padding: 10px; line-height: normal; font-size: 11px;}#mes_contenus, #mes_onglets{ width: 400px; margin: auto;}
- Code HTML sur la page D'accueil
- Code:
<div id="mes_onglets"> <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li> <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li> <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li> <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li> <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></ul></div>
Nous allons plus nous intéressez au code HTML sur la page d'accueil.[voila ce que tu a si j'ai bien vue tu n'as que 2 onglets ]
- Code:
<div id="mes_onglets"><ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li><li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li> <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></div></ul></div>
Voila il te suffit maintenant de remplacer Onglet 1 et 2 par ce que tu désirais et Mon contenu 1 et 2 de même en espérant que j'ai put t'aider ! Si d'autre problèmes survienne demande moi
Re: Problème d'onglet avec ma PA.
Merci beaucoup de m'aider !
Seulement, cela va-t-il marcher pour une version phpbb3 ?
Seulement, cela va-t-il marcher pour une version phpbb3 ?
Re: Problème d'onglet avec ma PA.
Ha C'est donc une version phpBB3 Est bien normalement ces codes sont utilisés pour les versions phBB2-phBB3 Donc les codes sont bon après cela dépend de ton goût pour l'apparence du tableaux a onglet je te met un aperçu de ce tableau a onglet, celui dont je t'est donner les codes ci-dessus :
[MODÈLE 1]
Bon vue que j'aime particulièrement ces codes je parle spécialement pour les menues a onglet je vais te laisser d'autre modèles avec les codes cela t'évitera de chercher partout sur le Forum est en espérant que cela te convienne aussi bon je me lance voila tout :
[MODÈLE 2]
- Le code javascript
- Le code du message d'accueil
- Le code CSS
[MODÈLE 3]
- Le code javascript
- Le code du message d'accueil
- Le code CSS
[MODÈLE 1]
- Spoiler:
Bon vue que j'aime particulièrement ces codes je parle spécialement pour les menues a onglet je vais te laisser d'autre modèles avec les codes cela t'évitera de chercher partout sur le Forum est en espérant que cela te convienne aussi bon je me lance voila tout :
[MODÈLE 2]
- Spoiler:
- Le code javascript
- Code:
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';
}
}
}
}
- Le code du message d'accueil
- Code:
<table style="margin: auto;"><tr><td style="padding-bottom: 4px;" align="center"><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></td></tr>
<tr><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></div></td></tr></table>
- Le code CSS
- Code:
.mon_onglet{
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: #fff;
border: 1px solid #000;}
.mon_onglet:hover{
background: #b8efa1;}
.mon_onglet_selected{
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: #ffff;
border: 1px solid #000;}
.clear{
clear: both;}
.mon_contenu{
color: #000;
background: #fff;
border: 1px solid #000;
padding: 10px;
margin: 10 px;
height: 120px;
line-height: normal;
font-size: 11px;}
#mes_contenus, #mes_onglets{
height: 100%;
width:100%;}
[MODÈLE 3]
- Spoiler:
- Le code javascript
- Code:
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';
}
}
}
}
- Le code du message d'accueil
- Code:
<table style="margin: auto;"><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></td><td>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Mon contenu 1
bla bla bla</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></div></td></tr></table>
- Le code CSS
- Code:
<table style="margin: auto;"><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></td><td>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Mon contenu 1
bla bla bla</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></div></td></tr></table>
PS : Pour ajouter ou enlever un onglet il suffit pour rajouter de mettre une nouvelle ligne :
- Code:
<li id="o_X" class="mon_onglet" onclick="changeOnglet(this);">Onglet X</li>
"X" étant une variable, c'est un exemple c'est pour dire X onglet donc faut le remplacer par des chiffres. [Cela s'applique pour le modèle 1] Ajouter un onglet pour les autre modèles : [Cela s'applique pour le modèle 2 et 3]
- Code:
<div id="co_X" class="mon_contenu" style="display: none;">Mon contenu X</div>
- Code:
<span id="o_X" class="mon_onglet" onclick="changeOnglet(this);">Onglet X</span>
Et pour enlever un onglet il suffit d'enlever la ligne en question.
- Code:
<div id="co_X" class="mon_contenu" style="display: none;">Mon contenu X</div>
Re: Problème d'onglet avec ma PA.
Je pensais avoir mis ces codes là mais apparemment non ! ^^'
J'aurai préféré le modèle 1, mais n'ayant pas les codes à la suite, j'ai mis ceux du modèle 2 et au moins ça marche puis je ne vais pas faire ma difficile ! Merci beaucoup en tout cas !
J'aurai préféré le modèle 1, mais n'ayant pas les codes à la suite, j'ai mis ceux du modèle 2 et au moins ça marche puis je ne vais pas faire ma difficile ! Merci beaucoup en tout cas !
Sujets similaires
» problème avec affichage parfois du forum et problème avec mes mp...
» probleme avec CSS pour une barre de navigation avec boutons reactifs
» Problème avec l'apparence de mon forum. Changement de thème avec l'actualisation
» Problème avec les options des messages & cadrage du forum avec le fond
» Problème avec postbody avec dans les messages
» probleme avec CSS pour une barre de navigation avec boutons reactifs
» Problème avec l'apparence de mon forum. Changement de thème avec l'actualisation
» Problème avec les options des messages & cadrage du forum avec le fond
» Problème avec postbody avec dans les messages
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