Script pour PA

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

Résolu Script pour PA

Message par Sakeb le Mer 13 Juil 2011 - 17:59

Bonjour à tous et je vous remercie d'avoir fait un tour su mon topic.
Je cherche de l'aide pour une PA en onglet. J'ai commencé à suivre le tuto d'un topic que j'avais trouvé sur ce forum et je suis arrivé à ceci : http://chapami.forums-actifs.net/ (c'est mon forum test).
Voici les codes :


CSS :
Code:
/*boite à  onglets*/
ul, li{
  list-style: none;/*evite les puces de liste dans les onglets*/
}
.mon_onglet{
  float: left;/*aligne les onglets sur une ligne horizontale*/
  padding: 2px 10px;/*marge intérieure autour du texte des onglets*/
  margin-right: 5px;/*marge extérieure droite des onglets*/
  color: #000;/*couleur du texte*/
  background: #ffffff;/*couleur du fond des onglets*/
  border: 1px solid #ff0000;/* epaisseur style et couleur des contours des onglets*/
  cursor: pointer;/* forme du curseur (facultatif)*/
  margin-bottom: -1px;/* reduction de la marge inférieure pour rapprocher les onglets du contenu*/
}
.mon_onglet:hover{
  background: #b8efa1;/*couleur de fond de l'onglet survolé*/
}       
.mon_onglet_selected{
  float: left;/*aligne l onglet sélectionné sur la meme  ligne que les autres*/
  padding: 2px 10px;/*marge intérieure autour du texte de l onglet selectionné*/
  margin-right: 5px;/*marge extérieure droite de l onglet selectionné*/
  color: #000;/*couleur du texte*/
  background: #ffffff;/*couleur du fond de l onglets sélectionné*/
  border-top: 1px solid #ff0000;/* epaisseur style et couleur du bord haut de l onglet selectionné*/
  border-right: 1px solid #ff0000;/* epaisseur style et couleur du bord droit de l onglet selectionné*/
  border-left: 1px solid #ff0000;/* epaisseur style et couleur du bord gauche de l onglet selectionné*/
  border-bottom: 1px solid #ffffff; /* epaisseur style et couleur du bord inférieur de l onglet selectionné*/
  cursor: pointer; /* forme du curseur (facultatif)*/
  margin-bottom: -1px;/* reduction de la marge inférieure pour rapprocher les onglets du contenu*/
}         
.clear{
  clear: both;/* cache le contenu quand on change d'onglet*/
}
.mon_contenu{
  color: #000;/* couleur du texte du contenu*/
  background: #ffffff;/couleur de fond du contenu*/
  border: 1px solid #ff0000;/* epaisseur style et couleur des contuours du contenu*/
  padding: 10px;/* marge intérieure autour du texte du contenu*/
        margin: -1px; /* reduction de la marge pour rapprocher les onglets du contenu*/       
}
#mes_contenus, #mes_onglets{
  width: 400px;/*largeur totale de la boite à onglet*/
}

PA :
Code:
<script src="http://sd-2.archive-host.com/membres/up/86411517957321821/onglet.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></div></ul></div>

J'ai beau essayer, je n'y arrive pas ...
J'aimerais que vous me codiez à partir de mon code la même PA que Naruto no Tenchi (laissez le contenue vide) pour que je puisse ensuite modifier à ma guise comme je le souhaite. Parce que j'ai de la misère à coder le début mais après, je me retrouve facilement. Merci d'avance Wink


Dernière édition par Sakeb le Mer 13 Juil 2011 - 18:50, édité 2 fois

Sakeb
Nouveau membre

Messages : 19
Inscrit(e) le : 12/07/2011

http://ascthree.forumpro.fr/
Sakeb a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script pour PA

Message par Alex Fowl le Mer 13 Juil 2011 - 18:00

Bonjour,

Afin de faciliter les recherches ultérieures, merci de respecter les règles concernant le titre de votre sujet. En effet, votre titre :
    - doit-être explicite (qui explique brièvement le problème),
    - ne doit pas être en majuscules,
    - ne doit pas contenir de mots trop généralistes : "aide" ; "help" ; "besoin d'aide" ; "problème"...

Merci de le modifier en cliquant sur le bouton :editer: de votre premier message. Wink

A bientôt sur ForumActif Smile

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script pour PA

Message par Sakeb le Mer 13 Juil 2011 - 18:06

Je ne vois pas le problème O.o ?
J'ai mis PA (pour ma PA), demande de script à partir du mien ..

Sakeb
Nouveau membre

Messages : 19
Inscrit(e) le : 12/07/2011

http://ascthree.forumpro.fr/
Sakeb a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script pour PA

Message par Alex Fowl le Mer 13 Juil 2011 - 18:08

Bonsoir,

Pouvez-vous être plus explicite dans la fonction de votre code dans votre titre, afin de faciliter la fonction recherche ? Smile

Cordialement,

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script pour PA

Message par Sakeb le Mer 13 Juil 2011 - 18:10

Sa va là ?
Sinon Alex, t'es capable xD ?

Sakeb
Nouveau membre

Messages : 19
Inscrit(e) le : 12/07/2011

http://ascthree.forumpro.fr/
Sakeb a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script pour PA

Message par Alex Fowl le Mer 13 Juil 2011 - 18:47

Bonsoir,

Ce code :
Code:
<div class="gensmall">
 
    <script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
        </script>

<style type="text/css">
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
cursor:pointer;
align:center;
width:20%;
border-left: #999999 5px solid;
border-bottom: #999999 1px solid;
border-right: #999999 5px solid;
border-top: #999999 1px solid;
}
.onglet_0
{
background:#FFF;
width:20%;
border-bottom:1px solid #999999;
}
.onglet_1
{
background:#999999;
width:20%;
border-left: #FFF 5px solid;
border-bottom: #FFF 1px solid;
border-right: #FFF 5px solid;
border-top: #FFF 1px solid;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#1d1d1d;
padding:5px;
display:none;
margin-top:3px;
width: 95%;
height:400px;
}
</style>

        <div class="systeme_onglets">
        <div class="onglets">
            <span class="onglet_1 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');"><center>--</center></span>
            <span class="onglet_0 onglet" id="onglet_qui" onmouseover="javascript:change_onglet('qui');"><center>--</center></span>

            <span class="onglet_0 onglet" id="onglet_pourquoi" onmouseover="javascript:change_onglet('pourquoi');"><center>--</center></span>
<span class="onglet_0 onglet" id="onglet_vote" onmouseover="javascript:change_onglet('vote');"><center>--</center></span>
        </div>
        <div class="contenu_onglets">
            <div style="display: block;" class="contenu_onglet" id="contenu_onglet_quoi">
                <br><table border="0"><tbody><tr>A
            </tr></tbody></table>
           
            </div>
           
         <div style="display: none;" class="contenu_onglet" id="contenu_onglet_qui">
                <br><table border="0"><tbody><tr>B
            </tr></tbody></table>
            </div>
            <div style="display: none;" class="contenu_onglet" id="contenu_onglet_pourquoi">
                <br><table border="0"><tbody><tr>C
            </tr></tbody></table>
            </div>
        </div>
    </div><div style="display: none;" class="contenu_onglet" id="contenu_onglet_vote">
                <br><table border="0"><tbody><tr>D
            </tr></tbody></table>
            </div>
       
   
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'quoi';
                change_onglet(anc_onglet);
        //-->
        </script>
<br><br></div>
Smile

Cordialement,

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script pour PA

Message par Sakeb le Mer 13 Juil 2011 - 18:47

Pour être sur, je le mets dans l'endroit CSS ?

Sakeb
Nouveau membre

Messages : 19
Inscrit(e) le : 12/07/2011

http://ascthree.forumpro.fr/
Sakeb a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script pour PA

Message par Sakeb le Mer 13 Juil 2011 - 18:49

J'ai compris c'est bon.
Merci

Sakeb
Nouveau membre

Messages : 19
Inscrit(e) le : 12/07/2011

http://ascthree.forumpro.fr/
Sakeb 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