Comment créer des onglets pour Page d'Accueil

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_. le Lun 23 Mai 2011 - 19: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 :



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 2011 - 20:29, édité 1 fois

Rin_.
****

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

http://google.fr
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_. le Mar 24 Mai 2011 - 20:17

Up !
J'attends vite vos réponses !

Rin_.
****

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

http://google.fr
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é le Mer 25 Mai 2011 - 21:01

Coucou

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

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

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_. le Mer 25 Mai 2011 - 21:34

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

Rin_.
****

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

http://google.fr
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é le Jeu 26 Mai 2011 - 9:09

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

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_. le Jeu 26 Mai 2011 - 15:23

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

Cordialement, Rin_.

Rin_.
****

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

http://google.fr
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 le Jeu 26 Mai 2011 - 18: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. =)

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é le Jeu 26 Mai 2011 - 20:08

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

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é le Jeu 26 Mai 2011 - 20: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.

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