Onglets ancrés en page d'accueil
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
Onglets ancrés en page d'accueil
Bonjour.
J'ai un forum en phpBB2 et je suis sur firefox.
J'ai réalisé des onglets dans ma page d'accueil mais je voudrais que ces onglets soient ancrés dans ma page d'accueil, c'est-à-dire que je voudrais que mes contenus soient l'intérieur de la page d'accueil et que mes onglets soient sur le contour de ma page d'accueil. Ce qui me gène, c'est que je ne sais pas comment modifier le template pour obtenir ce que je veux.
J'ai mis mon script dans une page html. Voilà mes codes :
J'ai réalisé des onglets dans ma page d'accueil mais je voudrais que ces onglets soient ancrés dans ma page d'accueil, c'est-à-dire que je voudrais que mes contenus soient l'intérieur de la page d'accueil et que mes onglets soient sur le contour de ma page d'accueil. Ce qui me gène, c'est que je ne sais pas comment modifier le template pour obtenir ce que je veux.
J'ai mis mon script dans une page html. Voilà mes codes :
- Code:
<script src="http://testsdesign.forumgratuit.org/h1-onglets-accueil"></script>
<table style="width: 600px;">
<tr>
<td><div id="mes_onglets"><span id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Général</span></div></td>
<td><div id="mes_onglets"><span id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Informations</span></div></td>
<td><div id="mes_onglets"><span id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Notre club</span></div></td>
</tr></table>
<table style="width: 600px;">
<tr style="width: 600px;">
<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></div></td></tr></table>
- Code:
/*ONGLETS PAGE D'ACCUEIL ET QEEL*/
.mon_onglet{
width:160px;
display: block;
padding: 5px;
margin: 4px;
color: #575A73;
background: #BEBFD4;
border-top: 2px solid #5A81A1;
border-left: 2px solid #5A81A1;
border-right: 2px solid #5A81A1;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
text-align: center;
-moz-box-shadow: 3px 3px 3px #000000;
}
.mon_onglet:hover{
background: #BEBFD4;
}
.mon_onglet_selected{
width:160px;
display: block;
padding: 5px;
margin: 4px;
color: #333547;
background: #BEBFD4;
border-top: 2px solid #5A81A1;
border-left: 2px solid #5A81A1;
border-right: 2px solid #5A81A1;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
text-align: center;
-moz-box-shadow: 3px 3px 3px #000000;
}
.clear{
clear: both;
}
.mon_contenu{
width: 600px;
height: 200px;
color: #575A73;
background: #BEBFD4;
padding: 10px;
margin: 10 px;
text-align: justify;
-moz-border-radius: 14px;
border: 1px #5A81A1 solid;
}
- 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';
}
}
}
}
Et je précise que mes contenus ne change pas quand je passe ma souris sur les différents onglets.
Dernière édition par lacavaliere27 le Dim 29 Mai 2011 - 11:12, édité 2 fois
Re: Onglets ancrés en page d'accueil
J'ai changé le code de ma page d'accueil et le changement d'onglets ne fonctionne toujours pas.
- Code:
<script src="http://testsdesign.forumgratuit.org/h1-onglets-accueil"></script><div id="mes_onglets"><ul>
<center><table><tr>
<td><li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Général</li></td>
<td><li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Informations</li></td>
<td><li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Notre club</li></td></tr></table></center>
</ul>
<div class="clear"><div id="mon_contenu">
<div id="co_1" class="mon_contenu">
<table style="width:100%;"><tr>
<td class="boîte">Vous connaissez peut-être le jeu Horse Star. Eh bien j'ai eu l'idée d'y créer un club. Je fus la première à prendre cette initiative en postant un sujet sur le forum officiel et depuis, d'autres personnes ont fait de même. Mon but est de crée un club avec des membres aux niveaux homogènes. Je veut que toutes les personnes de ce club soient à l'aise dans le groupe pour que l'on puisse progresser tout en s'amusant.<br><br><center>Mon club se nomme le club Upalame = Âmes précieuses.</center><br>Ce forum est donc dédié en partie à mon club car une catégorie est réservée à celui-ci. Cependant, j'ai décidée de créer une autre catégorie ouverte à tout le monde pour que tout le monde puisse venir sur le forum.</td>
<td>
<table><tr><td style="width: 400px; padding: 5px; margin: 4px; text-align: center; color: #575A73; background: #D3D3DE; text-decoration: none; font-family: Calibri; font-size: 12px; background-color:#E7E7E7; border: 2px solid #5A81A1; -moz-border-radius: 8px;">
<a href="http://horsestar.forums-actifs.com/reglement-et-contexte-f1/reglement-t1.htm">• Règlement •</a><br>
<a href="http://horsestar.forums-actifs.com/t80-club#182">• Le Club •</a><br>
<a href="http://horsestar.forums-actifs.com/club-house-f27/">• Présentez vous ! •</a><br>
<a href="http://horsestar.forums-actifs.com/bureau-f5/">• Bureau administratif •</a><br>
<a href="http://horsestar.forums-actifs.com/partie-invites-f6/">• Partie des Invités •</a></td></tr></table>
<br>
<table><tr><td style="width: 400px; padding: 5px; margin: 4px; text-align: center; color: #575A73; background: #D3D3DE; text-decoration: none; font-family: Calibri; font-size: 12px; background-color:#E7E7E7; border: 2px solid #5A81A1; -moz-border-radius: 8px;">
<a href="http://blog.horsestar.com/">• Blog officiel •</a><br>
<a href="http://fr.forum.horsestar.com/">• Forum officiel •</a><br>
<a href="http://fr.horsestar.com/">• Site officiel •</a></td></tr></table>
</td></tr></table></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></div></div>
Re: Onglets ancrés en page d'accueil
J'ai trouvé toute seule. Merci quand même.
Sujets similaires
» Faire des onglets sur la Page d'Acceuil.
» Page d'accueil à onglets
» Page d'accueil en onglets
» Créer des onglets sur sa page d'acceuil
» Ajouter des onglets sur page d'acceuil
» Page d'accueil à onglets
» Page d'accueil en onglets
» Créer des onglets sur sa page d'acceuil
» Ajouter des onglets sur page d'acceuil
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