Installer des onglets de page d'acceuil ...?

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

Résolu Installer des onglets de page d'acceuil ...?

Message par SaphiraSephora le Jeu 26 Mai 2011 - 21:04

    Bonsoir (:
    J'ai un petit problème. Si j'ai trouvé des codes pour installer des onglets, je ne sais en revanche pas du tout du tout du tout comment les installer...serait-il possible de m'expliquer comment ? Je n'ai pas trouvé de tutoriel sur comment faire. Et si je n'ai pas assez cherché, desolé...

    Bref. Voilà les trois codes :

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

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

    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>

    Merci d'avance. ^^


Dernière édition par SaphiraSephora le Jeu 26 Mai 2011 - 21:06, édité 1 fois

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: Installer des onglets de page d'acceuil ...?

Message par Invité le Jeu 26 Mai 2011 - 21:06

Bonsoir,

Si voulez les installer en page d'accueil, vous allez dans le PA>affichage>page d'accueil>généralités et vous les insérez dans le message de la page d'accueil.

Cordialement

Edit : suivez les conseils bien plus avisés d'Isolde.


Dernière édition par Lydie1 le Jeu 26 Mai 2011 - 21:19, édité 1 fois

Invité
Invité


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

Résolu Re: Installer des onglets de page d'acceuil ...?

Message par Invité le Jeu 26 Mai 2011 - 21:13

Bonsoir,

Le premier code est la partie javascript, elle permet d'animer les onglets.
Il existe 3 possibilités pour placer le script javascript:
  • Enregistrer le script en .js et l'héberger permet de gagner un peu de place. La première ligne de la page d'accueil sera donc
    Code:
    <script src="http://le fichier hébérgé.js"></script>
  • Enregistrer le script dans une page Html du forum permet aussi de gagner un peu de place. La première ligne de la page d'accueil sera donc
    Code:
    <script src="adresse de la page html"></script>
  • Si vous ne manquez pas de place, mettre le script directement dans le message d'accueil avant le contenu, entre balise script:
    Code:
    <script>LE SCRIPT EN ENTIER</script>


Le second code est la partie CSS.
Le code CSS:
A placer dans Panneau d'admin' > Affichage > couleurs - feuille de style CSS.
Il est à personnaliser entièrement!

Le dernier code est celui du message d'accueil.
Le message d'accueil:
> A placer dans Panneau d'admin' > Affichage > Généralités.
> Remplacez "mon onglet" et "mon contenu" par le nom et le contenu désiré. Faites attention à bien faire correspondre l'onglet et le contenu.
> il est possible de mettre une image à la place du nom de l'onglet:
Code:
<img src="adresse de l'image" />
> On replace "onclick" par "onmouseover" pour que l'onglet change au survol.

Cordialement.


Invité
Invité


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

Résolu Re: Installer des onglets de page d'acceuil ...?

Message par SaphiraSephora le Jeu 26 Mai 2011 - 21:39

    Tout ça marche très bien, sauf que ça reste sur le contenu 1. =/

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: Installer des onglets de page d'acceuil ...?

Message par Invité le Jeu 26 Mai 2011 - 21:48

Si les onglets ne changent pas, le soucis vient sûrement du premier code. Quelle solution avez-vous choisi pour la partie javascript?

Cordialement

Invité
Invité


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

Résolu Re: Installer des onglets de page d'acceuil ...?

Message par SaphiraSephora le Jeu 26 Mai 2011 - 21:50

    Je l'ai mis dans la page HTML.

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: Installer des onglets de page d'acceuil ...?

Message par Invité le Jeu 26 Mai 2011 - 22:09

Ok,

Donc dans votre message d'accueil, avez-vous mis juste avant le début du tableau:
Code:
<script src="adresse de la page html"></script>
Avec l'adresse de votre page html?

Cordialement.

Invité
Invité


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

Résolu Re: Installer des onglets de page d'acceuil ...?

Message par SaphiraSephora le Jeu 26 Mai 2011 - 22:12

    Je peux à présent changer d'onglets, mais les boutons se déplace au-dessus du contenu. ^^'

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: Installer des onglets de page d'acceuil ...?

Message par Invité le Jeu 26 Mai 2011 - 22:43

scratch

C'est étrange ça, avez-vous modifié le CSS?

Invité
Invité


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

Résolu Re: Installer des onglets de page d'acceuil ...?

Message par SaphiraSephora le Ven 27 Mai 2011 - 17:28

    Oui... =/

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: Installer des onglets de page d'acceuil ...?

Message par Invité le Ven 27 Mai 2011 - 21:03

Bonsoir,

Dans ce cas, pourriez-vous me le donner, que je trouve ce qui pose soucis?

Cordialement.

Invité
Invité


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

Résolu Re: Installer des onglets de page d'acceuil ...?

Message par SaphiraSephora le Sam 28 Mai 2011 - 14:40

    Code:
    .mon_onglet{
      display: block;
      padding: 5px;
      margin: 4px;
      color: #000;
      background: #8F7451;
      border: 3px solid #C2AC8E;
    }
    .mon_onglet:hover{
      background: #C2AC8E;
    }       
    .mon_onglet_selected{
      display: block;
      padding: 5px;
      margin: 4px;
      color: #000;
      background: #8F7451;
      border: 1px solid #C2AC8E;
    }         
    .clear{
      clear: both;
    }
    .mon_contenu{
      color: #000;
      background: #ffffff;
      border: 1px solid #C2AC8E;
      padding: 10px;
      margin: 10 px;
      height: 120px;}
    #mes_contenus, #mes_onglets{
      height: 100%;
      width:100%;}

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: Installer des onglets de page d'acceuil ...?

Message par Invité le Sam 28 Mai 2011 - 14:52

Bonjour,

Avec le code de base, la feuille CSS ne pose pas de soucis, donc il ne reste plus qu'une solution : le soucis est dans le contenu du message, il doit manquer une balise à la fin du contenu du premier onglet.
Si vous ne parvenez pas à trouver, n'hésitez pas à me confier le contenu du message d'accueil.

Cordialement.

Invité
Invité


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

Résolu Re: Installer des onglets de page d'acceuil ...?

Message par SaphiraSephora le Sam 28 Mai 2011 - 14:57

Ha ... donc, je penses que vous vous attendez, mais je n'ai pas réussi à trouver le problème.

Code:
<script src="http://eternal-dream-rpg.forumactif.com/h1-tableau"></script>

<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">Bienvenue ! <br /> Sur ce forum de RPG que vous adorez, bien sûr, vous incarnerez un personnage du "Nouveau Monde", car oui, bien sûr, notre planéte Terre a finit par se dérégler. Tout ça avec le sourire sauf quand on passe en mode émotion (quoi que !) Enfin bref. Si tu es un petit nouveau, file lire le réglement et le contexte, sinon, eh bien, fait ce que tu veux. Reste poli, quand même, hein, faut pas péter les plombs non plus. BREF, amuseez-vous bien <3  <br /> <br /><center>
<select name="wxlmenu" size=1 style="font-family: arial; color: white; border: double #FBFBFB;-moz-border-radius:8px; font-size: 12; padding:3px; background-color: #8F7451;"><div style="border: double #FBFBFB;"><option>Partenaire</option>
<option>A venir</option>
<option>A venir</option>
<option>A venir</option></select></center></td></table></div></div></blockquote>
</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Youplahop</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>

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: Installer des onglets de page d'acceuil ...?

Message par Invité le Sam 28 Mai 2011 - 15:11

Smile
Le tableau contenu le menu déroulant n'était pas ouvert Razz. Essayez comme ceci:
Code:
<script src="http://eternal-dream-rpg.forumactif.com/h1-tableau"></script>

<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">Bienvenue ! <br /> Sur ce forum de RPG que vous adorez, bien sûr, vous incarnerez un personnage du "Nouveau Monde", car oui, bien sûr, notre planéte Terre a finit par se dérégler. Tout ça avec le sourire sauf quand on passe en mode émotion (quoi que !) Enfin bref. Si tu es un petit nouveau, file lire le réglement et le contexte, sinon, eh bien, fait ce que tu veux. Reste poli, quand même, hein, faut pas péter les plombs non plus. BREF, amuseez-vous bien <3  <br /> <br /><center><table><tr><td><center>
<select name="wxlmenu" size=1 style="font-family: arial; color: white; border: double #FBFBFB;-moz-border-radius:8px; font-size: 12; padding:3px; background-color: #8F7451;"><div style="border: double #FBFBFB;"><option>Partenaire</option>
<option>A venir</option>
<option>A venir</option>
<option>A venir</option></select></center></td></tr></table></center></div></div>

    <div id="co_2" class="mon_contenu" style="display: none;">Youplahop</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: Installer des onglets de page d'acceuil ...?

Message par SaphiraSephora le Sam 28 Mai 2011 - 15:15

    Haaaaaan, merci, merci de tout coeur, ça MARCHE. **

    Encore merci pour vootre précieuse aide. Mon problème est maintenant résolue. ^^Mr. Green

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.

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