Tableau à onglets

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

Résolu Tableau à onglets

Message par FCBfan le Dim 26 Sep 2010 - 23:23

Salut tout le monde, je voudrais savoir comment faire pour créer un tableau sur la page d'accueil, avec des onglets, c'est-à-dire lorsqu'on clic sur un onglet, le contenu change.
le meme genre que ça : http://www.fifa-tournois.com/
Merci




Dernière édition par FCBfan le Mar 28 Sep 2010 - 20:34, édité 1 fois

FCBfan
***

Masculin
Messages : 155
Inscrit(e) le : 25/05/2010

http://www.fifa-leagues.com
FCBfan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets

Message par Calimerotte le Dim 26 Sep 2010 - 23:25

Bonsoir Smile

Vous trouverez une réponse sur ce sujet :
Faire des onglets sur la Page d'Acceuil.

Cali. Wink

Calimerotte
+ Hyperactif +

Féminin
Messages : 11665
Inscrit(e) le : 12/08/2004

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

Résolu Re: Tableau à onglets

Message par FCBfan le Lun 27 Sep 2010 - 20:00

J'arrive pas à le faire, il y a trop de code, si quelqu'un pourrait me passer directement le code à mettre sa serait gentil.

FCBfan
***

Masculin
Messages : 155
Inscrit(e) le : 25/05/2010

http://www.fifa-leagues.com
FCBfan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets

Message par Invité le Mar 28 Sep 2010 - 9:33

Bonjour,

Si on vous donne le code tout fait, identique au forum que vous avez mis en exemple, ça s'appelle du plagiat. (d'autant plus qu'il y a sacrément de travail dessus!). Et si vous désirez changer le tableau, vous ne pourrez pas le faire seul. Je veux bien vous guider pas à pas, mais le résultat ne sera pas tout à fait identique au tableau en exemple car il y a des fonctionnalités que je ne connais pas ...

Il n'y a pas tant de code que ça, il y en a 2, la page d'accueil et la CSS.
Dans le message d'accueil:
Code:
<script src="http://pmsc.free.fr/J04/10912150254.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>
Dans la CSS:
Code:
ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #fff;
  background: #000000;
  border: 2px solid #4682b4;
  cursor: pointer;
  margin-bottom: -1px;

.mon_onglet:hover{
  background: #000000;
}           
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #fff;
  background:#000000;
  border-top: 2px solid #4682b4;
  border-right: 2px solid #4682b4;
  border-left: 2px solid #4682b4; 
  border-bottom: 1px solid #000000; 
  cursor: pointer; 
  margin-bottom: -1px;
}             
.clear{
  clear: both;
}
.mon_contenu{
  color: #fff;
  background: #000000;
  border: 2px solid #4682b4;
  padding: 10px;
        margin: -1px;           
}
#mes_contenus, #mes_onglets{
  width: 400px;
}

Pour le message de page d'accueil, remplacez "onglet 1" par le titre de l'onglet, et "Mon contenu 1" par ce que vous voulez voir en dessous.
Pour la CSS, si vous avez besoin d'aide pour la personnalisation, je peux essayer de vous aider.

Cordialement.

Invité
Invité


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

Résolu Re: Tableau à onglets

Message par FCBfan le Mar 28 Sep 2010 - 13:32

Non j'ai pas dis que je voulais avoir le même je demandai seulement le code pour faire un tableau à onglet ^^
Merci j'essaye sa de suite Smile

FCBfan
***

Masculin
Messages : 155
Inscrit(e) le : 25/05/2010

http://www.fifa-leagues.com
FCBfan 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