Comment créer des onglets pour Page d'Accueil

[Rin_.]

Bonjour.
J'ai besoin d'aide rapidement pour un petit problème de design.
Comme cité dans le titre, c'est pour la page d'accueil de mon forum RPG.
J'ai cherché dans les archives mais en vain... j'ai besoin d'aide (je sais, je me répète)

Petit exemple du résultat voulu :



J'aimerai un code pour PA, et pas un lien vers un autre sujet dont il est question du même problème!
Merci de votre aide

[Rin_.]

Up !
J'attends vite vos réponses !

[Invité]

Coucou

vas voir ceci -> sa explique tout https://forum.forumactif.com/t302694-page-daccueil-original?highlight=css+pour+page+d+acceuil

j’espère t'aider bonne soirée

[Rin_.]

Merci à toi, mais en fait j'aimerai désormais les disposer à la verticale et non à l'horizontal.

[Invité]

Bonjour,

J'ai une solution à vous proposer.
Pour obtenir ceci:

On peut se servir de: un code javascript, du CSS et un tableau à 2 colonnes ( une pour les onglets, l'autre pour les contenus).
Donc il vous faut le code javascript (à héberger ou à placer entre les balises script au début du message d'accueil):

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 feuille de style CSS (à personnaliser ):

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%;}

Et le tableau du message d'accueil:

Code:

<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>

Cordialement.

[Rin_.]

Merci à vous Isolde.
Le sujet est résolu

Cordialement, Rin_.

[SaphiraSephora]

Bonsoir ^^
Je suis en train d'essayer de réaliser ma Pa, et je souhaiterais également des onglets. Serait-ce du plagiat si j'utilisais ces codes, même si je les personnalisais après ?

Merci d'avance. =)

[Invité]

je ne le pense pas car tout le monde peut utiliser ces codes

[Invité]

Bonsoir,

Ce code est facilement trouvable sur le net, et il a été demandé déjà plusieurs fois. Donc, effectivement, ce ne sera pas du plagiat, à vous d'apporter une touche personnelle qui le rendra différent des autres .

Cordialement.