Un menu d'accueil magnifique

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

Résolu Un menu d'accueil magnifique

Message par Kemsey Sam 23 Oct 2010 - 17:38

Bonjour alors voila je ne vais pas vous faire perdre votre temps je vais être bref
Comment est t-il possible de faire un menu d'accueil comme ce forum:

http://www.rpgmakervx-fr.com/forum.htm
Spoiler:

C'est magnifique:

Donc ma Demande se fait en 3 question:

01: Comment faire des onglet sur la page d'accueil
02: Comment faire un panneaux comme: Le Staff de la commu
03: Comment faire plusieurs fenêtre

Merci de m'aider


Dernière édition par Kemsey le Sam 23 Oct 2010 - 21:15, édité 1 fois
Kemsey

Kemsey
Nouveau membre

Masculin
Messages : 13
Inscrit(e) le : 14/07/2010

http://little-big-planet-co.forumactif.com/
Kemsey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un menu d'accueil magnifique

Message par Invité Sam 23 Oct 2010 - 17:52

Bonjour!

Commençons pas le tableau à onglets:
1. Copiez, enregistrez et hébergez ce fichier .js:
Code:
function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    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';
            }
        }
    }         
}
2.Placez ceci dans votre feuille CSS ( à personnaliser):
Code:
ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  cursor: pointer;
  margin-bottom: -1px;
}
.mon_onglet:hover{
  background: #b8efa1;
}         
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffff;
  border-top: 1px solid #ff0000;
  border-right: 1px solid #ff0000;
  border-left: 1px solid #ff0000;
  border-bottom: 1px solid #ffffff;
  cursor: pointer;
  margin-bottom: -1px;
}           
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
        margin: -1px;         
}
#mes_contenus, #mes_onglets{
  width: 400px;
}
3.Et voici le code du message d'accueil (à personnaliser):
Code:
<script src="ADRESSE_DU_FICHIER.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <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></ul>

Pour le staff c'est un système d'infobulles:
Le code infobulle à inserer dans le message d'accueil et à personnaliser:
Code:
<div class="infobulle"><a href="lien ou apparait l'infobulle"><br /><span>Contenu de la bulle</span></div>
La feuille CSS (à personnaliser):
Code:
.infobulle{position: relative;z-index: 0;}

.infobulle:hover{background-color: transparent;z-index: 50;}

.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.infobulle span img{border: 1px;padding: 5px;}

.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 150px ;
color:#FFFFFF;
border: 1px outset #e47509;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}

Pour la question 3, je 'ai pas compris ...

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Un menu d'accueil magnifique

Message par Kemsey Sam 23 Oct 2010 - 18:22

Excuse moi mais tu n'a pas fait d'erreur pour le fichier .js: ?
Kemsey

Kemsey
Nouveau membre

Masculin
Messages : 13
Inscrit(e) le : 14/07/2010

http://little-big-planet-co.forumactif.com/
Kemsey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un menu d'accueil magnifique

Message par Invité Sam 23 Oct 2010 - 18:38

Euh ...
Ce script n'est pas de moi, je l'ai recherché à la base pour ce sujet :
Onglets en page d'accueil . Je l'ai testé et cela fonctionne.
Mais je suis effectivement une débutante, il est donc possible que ce soit imparfait sans que je le sache. J'ai copié le script je l'ai enregistré en .js puis hébergé, et ça a fonctionné.
Si vous avez un correctif à apporter, je suis toute ouïe, car si le système peut être amélioré , ce n'en sera qu'encore mieux.

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Un menu d'accueil magnifique

Message par Kemsey Sam 23 Oct 2010 - 20:32

J'explique je suis sous-débutant je sais que c'est du java mais je ne sais ni l'enregistré ni l'héberger Confused
Kemsey

Kemsey
Nouveau membre

Masculin
Messages : 13
Inscrit(e) le : 14/07/2010

http://little-big-planet-co.forumactif.com/
Kemsey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un menu d'accueil magnifique

Message par Invité Sam 23 Oct 2010 - 20:54

Bonsoir,

Pas de soucis, je vous présente mes excuses pour cette méprise. Pour vous faciliter la tâche je vous donne l'adresse du script que j'utilise:
Code:
http://sd-2.archive-host.com/membres/up/86411517957321821/onglet.js
Si vous souhaitez l'héberger, inscrivez vous sur https://www.archive-host.com . Copiez/coller le script dans le bloc-note window et enregistrez le en mettant .js à la fin du nom. Vous n'aurez plus qu'à le telecharger sur Archive-Host pour obtenir l'adresse du fichier.

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Un menu d'accueil magnifique

Message par Kemsey Sam 23 Oct 2010 - 20:58

Ah ah ah c'était si simple donc je vais bosser dessus encore 30,40min pour voir

Merci pour tout vos indication et bonne chance pour la suite Very Happy
Kemsey

Kemsey
Nouveau membre

Masculin
Messages : 13
Inscrit(e) le : 14/07/2010

http://little-big-planet-co.forumactif.com/
Kemsey 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