Faire des onglets sur la Page d'Acceuil.

Page 1 sur 4 1, 2, 3, 4  Suivant

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

  • 0

Résolu Faire des onglets sur la Page d'Acceuil.

Message par La-Pouic-Team le Ven 10 Sep 2010 - 19:08

Bonjours,
Je voudrais savoir comment réalisé ceci :

La-Pouic-Team
***

Féminin
Messages : 176
Inscrit(e) le : 28/11/2009

http://Unites-by-the-fate.forumactif.com/
La-Pouic-Team a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par risa le Sam 11 Sep 2010 - 3:11

Coucou, moi aussi je cherche ce code =)

risa
**

Messages : 86
Inscrit(e) le : 09/05/2006

http://shoiyen-gakuen.jeun.fr/
risa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par b2uty le Sam 11 Sep 2010 - 14:58

Bonjour, je vais aussi suivre se sujet, ça fait un moment que je recherche
comment pouvoir faire celà.

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Invité le Dim 12 Sep 2010 - 10:17

Bonjour,

J'ai planché sur ce problème d'onglet ... et j'ai finalement trouvé le meilleur tuto possible sur ce Forum, proposé par un membre ... Voici le lien vers ce tuto:
http://www.johnstyle.fr/langage/javascript/creer-des-onglets-facilement/

La partie HTML va dans le message d'accueil, la partie CSS=> feuille de style CSS, et pour le code Javascript, collez-le dans un bloc note, enregistrer en .js et hebergez-le. Il suffit ensuite de mettre le code ci dessous en haut du message d'accueil:
Code:
<script src="url_du_code_en_.js"></script>

Pour réussir, c'est juste une question de patience Wink ! Bon courage à vous.

Cordialement.

Invité
Invité


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

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Park Ha Gi le Dim 12 Sep 2010 - 13:38

Bonjour, j'ai fait comme vous l'avez dit mais voilà ce que ça me fait : http://forumdesigntestforum.forumactif.com/forum.htm. T_T

Park Ha Gi
**

Féminin
Messages : 76
Inscrit(e) le : 03/12/2009

http://www.mybrowserbar.com/cgi/errors.cgi?q=http%3A%2F%2Fwww.th
Park Ha Gi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Invité le Dim 12 Sep 2010 - 14:28

Bonjour,

Sur mon forum cela fonctionne, mais il est vrai que j'ai retiré un petit bout du CSS ... j'ai mis ceci
Page d'accueil (penser à mettre l'adresse de votre fichier .js):
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>
Le CSS:
Code:
ul, li{
   list-style: none;
}
.mon_onglet{
   float: left;
   padding: 2px 10px;
   margin-right: 5px;
   color: #333;
   background: #d8f8ca;
   border: 1px solid #68ce3e;
   cursor: pointer;
   margin-bottom: -1px;
}   
.mon_onglet:hover{
   background: #b8efa1;
}            
.mon_onglet_selected{
   float: left;
   padding: 2px 10px;
   margin-right: 5px;
   color: #333;
   background: #b8efa1;
   border-top: 1px solid #68ce3e;
   border-right: 1px solid #68ce3e;
   border-left: 1px solid #68ce3e;   
   border-bottom: 1px solid #b8efa1;   
   cursor: pointer;   
   margin-bottom: -1px;
}               
.clear{
   clear: both;
}
.mon_contenu{
   color: #666;
   background: #b8efa1;
   border: 1px solid #68ce3e;
   padding: 10px;
        margin: -1px;            
}
#mes_contenus, #mes_onglets{
   width: 400px;
}

Wink

Invité
Invité


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

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Park Ha Gi le Dim 12 Sep 2010 - 14:55

Mon forum est mieux maintenant mais quand je clique par exemple sur l'onglet 2, rien de change ^^"

Park Ha Gi
**

Féminin
Messages : 76
Inscrit(e) le : 03/12/2009

http://www.mybrowserbar.com/cgi/errors.cgi?q=http%3A%2F%2Fwww.th
Park Ha Gi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Invité le Dim 12 Sep 2010 - 15:08

Re,

Contente qu'il y ait du mieux! j'ai eu un doute pendant un instant .
Pour les onglets qui ne changent pas, c'est peut être un problème avec le script... Vous avez bien mis les guillemets ( " ) de chaque coté de l'adresse? Un espace a pu se glisser quelques part aussi. L'adresse de votre fichier du script est bien du même genre que celle-ci:
Code:
http://pmsc.free.fr/J04/10912150254.js

Je ne vois pas ce qui pourrait bloquer, sinon scratch .

Invité
Invité


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

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par b2uty le Dim 12 Sep 2010 - 18:44

chez moi sa marche, je panse que c'est ton url ".js" qui n'est pas bon "Park Ha Gi"

par contre pour l habillage des onglets c'est trop dur, j'y arrive pas je voudrais metre une collone acoté des onglet comme ici :
http://skills-hysteria.forumactif.org/forum.htm
mais sa veux pas T.T en suite j'aurai voulu qu'on ne soit pas obliger de cliker sur chaque titre mais juste passer sa sourit pour que les onglets change de page,
je panse que pour ça il faut modifier :
" onclick="
mais je sais pas se qu'il faut metre à la place de "onclick".

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Invité le Dim 12 Sep 2010 - 19:01

Bonsoir,

Pour que l'onglet change, il faut effectivement remplacer le "onclick" . Il faut mettre "onmouseover" à la place Very Happy .

En ce qui concerne la colonne à coté du tableau à onglets c'est une autre cellule de tableau. Il faut essayer de mettre tous les éléments de la page d'accueil dans un tableau.

Invité
Invité


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

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par La-Pouic-Team le Dim 12 Sep 2010 - 22:02

Oh my god ... Je dois être vraiment débile parce que je n'ai rien compris --' Le truc c'est que quand je met le code CSS, ma page de déforme totalement ... Pourquoi ? ( genre la Pa est à 3 km de là où elle devrait être ... --')
Désolé d'être si incompétente >.<

La-Pouic-Team
***

Féminin
Messages : 176
Inscrit(e) le : 28/11/2009

http://Unites-by-the-fate.forumactif.com/
La-Pouic-Team a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Invité le Lun 13 Sep 2010 - 10:31

Bonjour,

Isolde a écrit:
Sur mon forum cela fonctionne, mais il est vrai que j'ai retiré un petit bout du CSS ... j'ai mis ceci
Page d'accueil (penser à mettre l'adresse de votre fichier .js):
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>
Le CSS:
Code:
ul, li{
   list-style: none;
}
.mon_onglet{
   float: left;
   padding: 2px 10px;
   margin-right: 5px;
   color: #333;
   background: #d8f8ca;
   border: 1px solid #68ce3e;
   cursor: pointer;
   margin-bottom: -1px;
}   
.mon_onglet:hover{
   background: #b8efa1;
}            
.mon_onglet_selected{
   float: left;
   padding: 2px 10px;
   margin-right: 5px;
   color: #333;
   background: #b8efa1;
   border-top: 1px solid #68ce3e;
   border-right: 1px solid #68ce3e;
   border-left: 1px solid #68ce3e;   
   border-bottom: 1px solid #b8efa1;   
   cursor: pointer;   
   margin-bottom: -1px;
}               
.clear{
   clear: both;
}
.mon_contenu{
   color: #666;
   background: #b8efa1;
   border: 1px solid #68ce3e;
   padding: 10px;
        margin: -1px;            
}
#mes_contenus, #mes_onglets{
   width: 400px;
}

Même comme ça, ça ne marche pas? Etrange. Il y a peut-être un conflit dans le CSS ...
Cordialement.

Invité
Invité


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

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par La-Pouic-Team le Mar 14 Sep 2010 - 21:01

Bonsoir,
LOL :$ Si ça marche comme ça ... (Merci xD) Mais je suis tellement trop nulle que moi dès que ça devient un peu compliqué... >.< ( En gros, dès qu'on me mache pas le boulot, la pauvre petit Pauline débile ne comprend rien XD )
Sinaah ( Oui ... je suis une vrai chieuse ...) où placer le dernier code ? Je l'ai mis sur la PA mais ça n'a pas marché ...

La-Pouic-Team
***

Féminin
Messages : 176
Inscrit(e) le : 28/11/2009

http://Unites-by-the-fate.forumactif.com/
La-Pouic-Team a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Lixyr le Mar 14 Sep 2010 - 23:16

Ce code ?

Code:
ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #d8f8ca;
  border: 1px solid #68ce3e;
  cursor: pointer;
  margin-bottom: -1px;

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

Tu vas dans PA >> Affichage >> couleurs >> feuille de style css

Tu le mets dans le champ, et tu enregistres.

Ensuite, tu peux modifier certaines indications, ou en rajouter, pour que le graphisme de tes onglets, l'intérieur, etc, te corresponde.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par La-Pouic-Team le Mer 15 Sep 2010 - 21:22

Bonsoir,
Non, pas celui-ci ( Oui, je suis débile, mais le CSS ça va, je comprend à peu près, c'est le javascript que je sais pas ou mettre lol)
Lui :
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';
         }
      }
   }         
}

La-Pouic-Team
***

Féminin
Messages : 176
Inscrit(e) le : 28/11/2009

http://Unites-by-the-fate.forumactif.com/
La-Pouic-Team a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Invité le Mer 15 Sep 2010 - 21:57

Bonsoir,

Le code que vous donnez est le script javascript . Il faut le copier dans le bloc-note sur votre PC et l'enregistrer en .js, puis héberger le fichier. Une fois cela fait vous notez l'adresse dans votre page d'accueil sous cette forme :
Code:
<script src="Url-du-script"></script>

Cordialement.

P.S. : je vous fait parvenir un exemple en MP Wink

Invité
Invité


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

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Lixyr le Mer 15 Sep 2010 - 21:59

Ca tu l'enregistres dans un bloc note, dans tes documents, sous le format .js et tu l'héberges sur un site qui héberge les fichiers, comme celui-ci, ensuite une fois qu'il est hébergé, tu prends l'adresse du lien, et tu la rentres dans cette partie du code qui va dans la page d'accueil :

Code:
<script src="L'URL DE TON FICHIER HEBERGE"></script><div id="mes_onglets">
    <ul>
        <li id="o_1" class="mon_onglet_selected"

celle-ci, en rouge :

<script src="L'URL DE TON FICHIER HEBERGE"></script><div id="mes_onglets">

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par La-Pouic-Team le Ven 17 Sep 2010 - 22:48

Bonsoir,
Hum ... Alors hum lol :$ Comment on fait pour mettre en format .js ? Parce que quand j'utilise Works par exemple il n'y a pas non plus & pour le format texte non plus ... Je suis vraiment nulle, je sais :$

La-Pouic-Team
***

Féminin
Messages : 176
Inscrit(e) le : 28/11/2009

http://Unites-by-the-fate.forumactif.com/
La-Pouic-Team a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Invité le Sam 18 Sep 2010 - 9:33

Bonjour,

Pour le format .js, c'est tout simple: Dans les accessoire de Windows, il y a un Bloc Note. Il suffit de copier le script dans dans ce bloc note puis l'enregistrer de cette manière:

Invité
Invité


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

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Link6740 le Sam 18 Sep 2010 - 13:19

Hello , merci pour le code je le cherchais justement mais quelqun c'est comment faire comme sur ce forum :

http://lesmagesnoirs.forum2ouf.com/forum.htm


Forum a l'abandon dommage j'aurai pu contacter l'admin pour lui demander ....

MERCI

Link6740
Nouveau membre

Masculin
Messages : 10
Inscrit(e) le : 15/09/2010

http://htt://google.fr
Link6740 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par La-Pouic-Team le Sam 18 Sep 2010 - 13:30

Bonjours,
Ha d'accord >.< ( Pauvre petit moi sans cervelle ... )

La-Pouic-Team
***

Féminin
Messages : 176
Inscrit(e) le : 28/11/2009

http://Unites-by-the-fate.forumactif.com/
La-Pouic-Team a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Invité le Sam 18 Sep 2010 - 13:47

Bonjour,
Pour faire ce que vous souhaitez Link6740 il faut modifier les template. Effectivement le code doit pouvoir s'adapter, mais je n'ai aucune idée de comment faire cela...

Cordialement.

Invité
Invité


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

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par La-Pouic-Team le Sam 18 Sep 2010 - 22:34

Re-bonsoir,
Voilà, piti problème ( Oui encore ... je sais >.< )
Le problème c'est que je ne comprend pas pourquoi le 4è onglet ne veut pas resté sur la première barre, j'ai d'abord pensé que mon contenu était trop petit et le texte de l'onglet trop grand, du coup j'ai mis lien à la place et je me suis rendu compte que cet onglet restait quand même en dessous des autres. Pourquoi ?
- Ensuite : Où règle-t-on la largeur ? ( C'est OK pour la hauteur...)
- Où arrondit-on les onglets ?


La PA :
Code:
<script src="http://pmsc.free.fr/J04/10918133120.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Bienvenue</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Contexte & Video</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Nos partenaires</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);"> Lien</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>

le CSS :
Code:
ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #E3C888;
  border: 1px solid #DBB764;
  cursor: pointer;
  margin-bottom: -1px;

.mon_onglet:hover{
  background:#E3C888;
}           
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #DBB764;
  border-top: 1px solid #DBB764;
  border-right: 1px solid #DBB764;
  border-left: 1px solid #DBB764; 
  border-bottom: 1px solid #DBB764; 
  cursor: pointer; 
  margin-bottom: -1px;
}             
.clear{
  clear: both;
}
.mon_contenu{
  color: #666;
  background: #E6D1A1;
  border: 2px solid #DBB764;
  padding: 100px;
        margin: -1px;           
}
#mes_contenus, #mes_onglets{
  width: 400px;
}

La-Pouic-Team
***

Féminin
Messages : 176
Inscrit(e) le : 28/11/2009

http://Unites-by-the-fate.forumactif.com/
La-Pouic-Team a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Invité le Sam 18 Sep 2010 - 23:01

Bonsoir,

Pour l'onglet, c'est juste un petit problème de dimensions dans ce code:
Code:
#mes_contenus, #mes_onglets{
  width: 400px;
}
Remplacez 400 par plus grand et cela devrait replacer le 4ème onglet à la suite des autres. Ce code détermine la longueur maximale de la boite, en gros la ligne d'onglet ne peut pas dépasser la taille indiquée.

Pour arrondir les onglets, il faut bien penser aux 3 endroits : l'onglet sur lequel on est, celui où on n'est pas, est celui où passe la souris:
Code:
.mon_onglet
.mon_onglet:hover
.mon_onglet_selected

Pour n'arrondir que le haut ajoutez le code ci dessous juste avant le "}" de chacun des codes cités ci-dessus:
Code:
 -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
Cordialement

Invité
Invité


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

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par La-Pouic-Team le Sam 18 Sep 2010 - 23:22

J'ai essayé de suivre vos indications, mais ça fait tout foiré >.< Je n'ai pas compris ou je me suis gourré ...
http://Instants-Magiques.forumactif.com/ ( Je m'en sert comme forum test en attendant de tout refaire son habillage parce que celui là est vraiment trop moche >.<)

Code:
ul, li{
  list-style: none;
} -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #E3C888;
  border: 1px solid #DBB764;
  cursor: pointer;
  margin-bottom: -1px;
} -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
.mon_onglet:hover{
  background:#E3C888;
} -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;         
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #DBB764;
  border-top: 1px solid #DBB764;
  border-right: 1px solid #DBB764;
  border-left: 1px solid #DBB764; 
  border-bottom: 1px solid #DBB764; 
  cursor: pointer; 
  margin-bottom: -1px;
}             
.clear{
  clear: both;
}
.mon_contenu{
  color: #666;
  background: #E6D1A1;
  border: 2px solid #DBB764;
  padding: 100px;
        margin: -1px;           
}
#mes_contenus, #mes_onglets{
  width: 600px;
}

La-Pouic-Team
***

Féminin
Messages : 176
Inscrit(e) le : 28/11/2009

http://Unites-by-the-fate.forumactif.com/
La-Pouic-Team a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Invité le Sam 18 Sep 2010 - 23:44

Re,

Laughing En effet, nous ne nous sommes pas comprises ... les codes vont dans ce sens là:
Code:
ul, li{
  list-style: none;
}

.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #E3C888;
  border: 1px solid #DBB764;
  cursor: pointer;
  margin-bottom: -1px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;}

.mon_onglet:hover{
  background:#E3C888;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;}     

.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #DBB764;
  border-top: 1px solid #DBB764;
  border-right: 1px solid #DBB764;
  border-left: 1px solid #DBB764;
  border-bottom: 1px solid #DBB764;
  cursor: pointer;
  margin-bottom: -1px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;  }
           
.clear{
  clear: both;
}

.mon_contenu{
  color: #666;
  background: #E6D1A1;
  border: 2px solid #DBB764;
  padding: 100px;
        margin: -1px;         
}
#mes_contenus, #mes_onglets{
  width: 600px;
}
Tout ce qui concerne le style doit être inclus entre { et } . Je me suis mal exprimée en disant "avant }" , désolée.

Invité
Invité


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

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par La-Pouic-Team le Dim 19 Sep 2010 - 13:37

Bonjours,
Haaa oui en effet ! xD Désolé je comprend jamais rien >.<

Heum ... Je voudrais que le tableau en dessous des onglet prenne toute la largeur de la PA ... Mais ça me fait ça :
http://instants-magiques.forumactif.com/
Et j'aimerait centré mes onglets aussi, mais je n'ai pas trouvé non plus :S

La-Pouic-Team
***

Féminin
Messages : 176
Inscrit(e) le : 28/11/2009

http://Unites-by-the-fate.forumactif.com/
La-Pouic-Team a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par Invité le Dim 19 Sep 2010 - 15:45

Bonjour,

J'arrive à faire en sorte que le contenu tienne toute la page en modifiant une partie du CSS. Je remplace
Code:
.mon_contenu{
  color: #666;
  background: #E6D1A1;
  border: 2px solid #DBB764;
  padding: 100px;
        margin: -1px;       
}
#mes_contenus, #mes_onglets{
  width: 600px;
}
Par
Code:
.mon_contenu{
  color: #666;
  background: #E6D1A1;
  border: 2px solid #DBB764;
  padding: 2px;
  margin-left: -40px;         
  height: 400px;}

#mes_contenus, #mes_onglets{
  width: 100%;
  }

Par contre je n'arrive pas a trouver comment centrer les onglets ...

Cordialement.

Invité
Invité


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

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par La-Pouic-Team le Dim 19 Sep 2010 - 16:57

Hum ... J'ai téléchargé notepadd++ comme vous me l'aviez conseillez dans un autre topic, mais une fois qu'on a mis notre code, comment on fait pour s'en servir quoi ? xD * Gourde pro est de retour x) *

La-Pouic-Team
***

Féminin
Messages : 176
Inscrit(e) le : 28/11/2009

http://Unites-by-the-fate.forumactif.com/
La-Pouic-Team a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des onglets sur la Page d'Acceuil.

Message par * Flowine le Dim 19 Sep 2010 - 17:50

Bonjour.
J'ai donc tout suivi, mais quand je mets le code sur la page d'accueil, le code n'apparaît pas, il s'affiche comme un code...

* Flowine
Nouveau membre

Féminin
Messages : 29
Inscrit(e) le : 26/12/2009

http://unclear-wolves.forumactif.com/
* Flowine a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 4 1, 2, 3, 4  Suivant

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