Comment créer des onglets pour Page d'Accueil

2 participants

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

Résolu Comment créer des onglets pour Page d'Accueil

Message par Rin_. Lun 23 Mai - 17:13

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 :

Comment créer des onglets pour Page d'Accueil Helpk

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


Dernière édition par Rin_. le Mar 24 Mai - 18:29, édité 1 fois
Rin_.

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://chicken-eatgreen.forumactif.org
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer des onglets pour Page d'Accueil

Message par Rin_. Mar 24 Mai - 18:17

Up !
J'attends vite vos réponses !
Rin_.

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://chicken-eatgreen.forumactif.org
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer des onglets pour Page d'Accueil

Message par Invité Mer 25 Mai - 19:01

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer des onglets pour Page d'Accueil

Message par Rin_. Mer 25 Mai - 19:34

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

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://chicken-eatgreen.forumactif.org
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer des onglets pour Page d'Accueil

Message par Invité Jeu 26 Mai - 7:09

Bonjour,

J'ai une solution à vous proposer.
Pour obtenir ceci:
Comment créer des onglets pour Page d'Accueil Tab_a_onglet_C3
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 Wink ):
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.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer des onglets pour Page d'Accueil

Message par Rin_. Jeu 26 Mai - 13:23

Merci à vous Isolde.
Le sujet est résolu Smile

Cordialement, Rin_.
Rin_.

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://chicken-eatgreen.forumactif.org
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer des onglets pour Page d'Accueil

Message par SaphiraSephora Jeu 26 Mai - 16:39

    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. =)
avatar

SaphiraSephora
Nouveau membre

Messages : 21
Inscrit(e) le : 26/05/2011

http://eternal-dream-rpg.forumactif.com/
SaphiraSephora a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer des onglets pour Page d'Accueil

Message par Invité Jeu 26 Mai - 18:08

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer des onglets pour Page d'Accueil

Message par Invité Jeu 26 Mai - 18:40

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

Cordialement.
Anonymous

Invité
Invité


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