Onglets ancrés en page d'accueil

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Onglets ancrés en page d'accueil

Message par lacavaliere27 le Sam 28 Mai 2011 - 11:08

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 :

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

lacavaliere27
**

Féminin
Messages : 52
Inscrit(e) le : 17/06/2008

http://horsestar.forums-actifs.com/index.htm
lacavaliere27 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets ancrés en page d'accueil

Message par lacavaliere27 le Sam 28 Mai 2011 - 14:02

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>

lacavaliere27
**

Féminin
Messages : 52
Inscrit(e) le : 17/06/2008

http://horsestar.forums-actifs.com/index.htm
lacavaliere27 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets ancrés en page d'accueil

Message par lacavaliere27 le Dim 29 Mai 2011 - 11:12

J'ai trouvé toute seule. Merci quand même.

lacavaliere27
**

Féminin
Messages : 52
Inscrit(e) le : 17/06/2008

http://horsestar.forums-actifs.com/index.htm
lacavaliere27 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum