Faire des onglets sur la Page d'Acceuil.

+3
Link6740
Park Ha Gi
risa
7 participants

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 Ven 10 Sep 2010 - 19:08

Bonjours,
Je voudrais savoir comment réalisé ceci :
Faire des onglets sur la Page d'Acceuil. Rpg10
La-Pouic-Team

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 Sam 11 Sep 2010 - 3:11

Coucou, moi aussi je cherche ce code =)
risa

risa
***

Féminin
Messages : 155
Inscrit(e) le : 09/05/2006

https://fushigi-no-mori.forumactif.com
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 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

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é 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.
Anonymous

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 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

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é 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
Anonymous

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 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

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é 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 .
Anonymous

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 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

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é 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.
Anonymous

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 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

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é 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.
Anonymous

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 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

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 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

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.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 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

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é 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
Anonymous

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 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

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.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 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

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é 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:
Faire des onglets sur la Page d'Acceuil. Captur13
Anonymous

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 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
Faire des onglets sur la Page d'Acceuil. Ongles10

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

MERCI
Link6740

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 Sam 18 Sep 2010 - 13:30

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

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é 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.
Anonymous

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 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 ?
Faire des onglets sur la Page d'Acceuil. Lienn10

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

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é 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
Anonymous

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 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

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é 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.
Anonymous

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 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

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é 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.
Anonymous

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 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

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 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

* 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

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum