Faire des Onglets

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

Résolu Faire des Onglets

Message par Shiooooo le Lun 18 Avr 2011 - 22:46

A que coucou tout le monde,
Shio' vient implorer votre aide aidez moi
Je sais (grâce encore une fois à Isolde) faire une P.A en onglet (donc par la même occasion des signatures codées en onglet).
J'ai alors décidé de me faire un signature à onglet pour mon forum et pour les admins, le "hic" c'est qu'il y a plusieurs choses que je souhaiterais faire mais que je ne sais pas faire (ah... en effet, c'est un gros problème -.- ) :
* mettre les images (ou l'on clique pour changer d'onglet) non pas au dessus mais à gauche
* daire un effet que permet de faire "monter" l'onglets désiré quand on clique (voir plus ample explication après)

Voila ce que Isolde m'avait fait et que je sais désormais faire :


Voila ce que je souhaiterais faire, en montrant le contenu de chaque onglet (schémas fait avec Photoshop) :




Voila un codage qui utilise l'effet que je souhaite, c'est a dire quand on clique sur l'image de l'onglet, l'onglet "monte" du bas pour ce "mettre devant l'onglet que l'on "regardait" avant... j'explique mal ? alors voila l'exemple (cliquez sur le lien) :
http://forum-theme.forumperso.com/h10-fiche-pub
Pour un autre exemple de l'effet, allez sur le lien ci dessus et "cherchez" la signature codée de Reira ~ :
http://forum-theme.forumperso.com/t184-notre-fiche-de-pub#61763

Pour les image ou on clique, je les ferais sur 'toshop. Je parle de ces trucs là :


Je pense avoir tout dit... non ? En tout cas, merci beaucoupppp d'avance de vous intéresser à mon problème,

Cordialement,
Shio'




Dernière édition par Shiooooo le Lun 2 Mai 2011 - 23:58, édité 1 fois

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des Onglets

Message par Invité le Mar 19 Avr 2011 - 12:02

Bonjour,

Je n'ai qu'un début de solution à vous proposer.
Pour obtenir ceci:

On peut procéder comme pour les onglets en page d'accueil: un code javascript, du CSS et un tableau à 2 colonnes ( un pour les onglets, l'autre pour les contenus). Puisque c'est pour réaliser une signature, je suppose que le tout est dans une page Html .
Donc il vous faut le code javascript:
Code:
function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('span');
    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';
            }
        }
    }   
}
Le feuille de style ( à personnaliser Wink ):
Code:
.mon_onglet{
  display: block;
  padding: 5px;
  margin: 4px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}
.mon_onglet:hover{
  background: #b8efa1;
}       
.mon_onglet_selected{
  display: block;
  padding: 5px;
  margin: 4px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}         
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
  margin: 10 px;
  height: 120px;}
#mes_contenus, #mes_onglets{
  height: 100%;
  width:100%;}
Et le tableau:
Code:
<table><tr><td>
<div id="mes_onglets">
    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</span>
        <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
        <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</span></div></td>
<td>
        <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></td></tr></table>
Je mets le script en haut entre <script> et </script>, puis le CSS entre <style> et </style> et enfin le tableau.

Je n'ai pas trouvé pour le moment comment faire l'effet "glissée" de l'apparition des contenus. Je vais chercher mais je ne garantis pas de trouver Razz .

Cordialement.

Invité
Invité


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

Résolu Re: Faire des Onglets

Message par Shiooooo le Mar 19 Avr 2011 - 12:54

Oki merciii beaucoup !!!! Si tu ne trouves pas l'effet, c'est pas grave tu m'as déjà beaucoup aidée ;3

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des Onglets

Message par Shiooooo le Mar 19 Avr 2011 - 15:57

Désolé du DP mais quand je marque un texte avec des accents dans ma page html et que je prévisualise, j'obtient "é" ou "è".
exemple_ marqué => marqué
années => années
derrière => derrière

Comment empêcher cela ?

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des Onglets

Message par Invité le Mar 19 Avr 2011 - 16:08

Re,

Au début de votre page Html, ajoutez ceci:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset="UTF-8"" />
  </head>
  <body>
Et à la fin ajoutez:
Code:
  </body>
</html>
Est-ce que ça corrige le problème?

Cordialement.

Invité
Invité


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

Résolu Re: Faire des Onglets

Message par Shiooooo le Mar 19 Avr 2011 - 16:13

Eh... je viens d'essayer et rien n'a changé... comment faire alors ?

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des Onglets

Message par Invité le Mar 19 Avr 2011 - 16:17

Et en remplaçant charset="UTF-8" par "charset=iso-8859-1" ?

Si ça ne fonctionne toujours pas je n'aurai plus d'idée, désolée.

Cordialement.

Invité
Invité


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

Résolu Re: Faire des Onglets

Message par Shiooooo le Mar 19 Avr 2011 - 16:34

Ah ca marche !!! en faite tu as juste oublié de mettre " après content="text/html et tu as mis "" après charset="UTF-8""

Isolde a écrit:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8"" />
</head>
<body>

Merci beaucoup, finalement ca marchait, vous avez juste fait une faute d'inattention (l'erreur est humaine comme on dit) i!!!

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des Onglets

Message par Invité le Mer 20 Avr 2011 - 11:46

Bonjour,

Désolée pour cette gaffe ... je devrais me relire au moins 3 ou 4 fois avant d'envoyer mes messages Razz .

Après quelques recherches, pour réaliser ce que vous souhaitez, il faut partir sur une toute autre piste: un menu accordéon. J'ai trouvé un pack à télécharger sur ce site . Il y a des codes javascript à héberger, pas mal de CSS à personnaliser , et je n'ai pas tout bien compris dans le fonctionnement (ça va me demander du temps pour tout comprendre).
J'ai hébergé le script de l'accordéon et fait la page Html avec les infos contenu dans le fichier à télécharger. Je vous donne ça tel quel:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Javascript Accordions - by www.dezinerfolio.com</title>
<style type="text/css">
* {
   margin:0;
   padding:0;
   list-style:none;
}
body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   margin:10px;
}

#basic-accordian{
   border:5px solid #EEE;
   padding:5px;
   width:375px;
   position:absolute;
   left:50%;
   top:50%;
   margin-left:-175px;
   z-index:2;
   margin-top:-100px;
}

.accordion_headings{
   padding:5px;
   background:#99CC00;
   color:#FFFFFF;
   border:1px solid #FFF;
   cursor:pointer;
   font-weight:bold;
}

.accordion_headings:hover{
   background:#00CCFF;
}

.accordion_child{
   padding:15px;
   background:#EEE;
}

.header_highlight{
   background:#00CCFF;
}

</style>
<script type="text/javascript" src="http://sd-5.archive-host.com/membres/up/86411517957321821/menuaccordeon.js"></script>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">


<div id="basic-accordian" ><!--Parent of the Accordion-->


<div style="width:125px; float:left">
  <div id="test1-header" class="accordion_headings header_highlight" >onglet 1</div>
  <div id="test2-header" class="accordion_headings" >onglet 2</div>
  <div id="test3-header" class="accordion_headings" >onglet 3</div>
</div>

<div style="float:right; width:250px;">
  <div id="test1-content">
   <div class="accordion_child">
Contenu 1
    </div>
  </div>
 
  <div id="test2-content">
   <div class="accordion_child">
       Contenu 2
    </div>
  </div>
 
  <div id="test3-content">

   <div class="accordion_child">
       Contenu 3
    </div>
  </div>
</div>


</div><!--End of accordion parent-->

</body>
</html>
J'espère que vous réussirez à personnaliser tout ça! De mon coté je vais étudier ce code pour répondre à vos éventuelles questions Wink .

Cordialement.

Invité
Invité


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

Résolu Re: Faire des Onglets

Message par Shiooooo le Mer 20 Avr 2011 - 14:30

Déjà je vous remercie infiniment d'avoir trouvé le script !!!! Et oui, j'ai une question Siffleur :
ou dois-je mettre onmouseover="changeOnglet(this);" pour pouvoir ne pas avoir à cliquer mais juste à passer la souris pour changer d'onglet.
Désolé de vous solliciter autant.

Cordialement,
Shio'

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des Onglets

Message par Invité le Sam 23 Avr 2011 - 22:42

Bonsoir,

Alors, le mode de changement des onglets est géré par le script.
Donc dans votre page Html, cherchez:
Code:
<script type="text/javascript" src="http://sd-5.archive-host.com/membres/up/86411517957321821/menuaccordeon.js"></script>
et remplacez par:
Code:
<script type="text/javascript" src="http://sd-5.archive-host.com/membres/up/86411517957321821/menuaccordeonauto.js"></script>

Cordialement.

Invité
Invité


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

Résolu Re: Faire des Onglets

Message par Shiooooo le Lun 25 Avr 2011 - 21:35

Merci beaucoup d'avoir répondu à ma (première) question et désolé d'avoir mis du temps à vous remercier,
Mais j'ai une deuxième question *comme tu devais sûrement t'en douter* ... comment faire pour que les onglet sois "aligné" sous le contenu ? Un p'tit schéma pour expliquer :

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des Onglets

Message par Shiooooo le Mer 27 Avr 2011 - 14:09

Un p'tit up Wink

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire des Onglets

Message par Invité le Mer 27 Avr 2011 - 16:30

Bonjour,

Je ne vous ai pas oublié Wink, c'est simplement que je n'arrive pas à les aligner en dessous du contenu ... ça crée un drôle de bug. J'ai trouvé comment les aligner au dessus:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
    <title>Simple Javascript Accordions - by www.dezinerfolio.com</title>
    <style type="text/css">
    * {
      margin:0;
      padding:0;
      list-style:none;
    }
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      margin:10px;
    }

    #basic-accordian{
      border:5px solid #eee;
      padding:5px;
      width:375px;
      height: 100px;
      position:absolute;
      left:50%;
      top:50%;
      margin-left:-175px;
      z-index:2;
      margin-top:-100px;
    }

    .accordion_headings{
      float: left;
      padding:5px;
      background:#99CC00;
      color:#FFFFFF;
      border:1px solid #FFF;
      cursor:pointer;
      font-weight:bold;
    }

    .accordion_headings:hover{
      background:#00CCFF;
    }

    .accordion_child{
      padding:15px;
      background:#EEE;
    }

    .header_highlight{
      float: left;
      background:#00CCFF;
    }

    </style>
    <script type="text/javascript" src="http://sd-5.archive-host.com/membres/up/86411517957321821/menuaccordeon.js"></script>
    </head>
    <body onload="new Accordian('basic-accordian',5,'header_highlight');">


    <div id="basic-accordian" ><!--Parent of the Accordion-->

<table>
<tr>
    <td><div style="width:250px;">
      <div id="test1-header" class="accordion_headings header_highlight" >onglet 1</div>
      <div id="test2-header" class="accordion_headings" >onglet 2</div>
      <div id="test3-header" class="accordion_headings" >onglet 3</div>
    </div></td></tr>
<tr>
    <td><div style="width:250px;">
      <div id="test1-content">
      <div class="accordion_child">
    Contenu 1
        </div>
      </div>
   
      <div id="test2-content">
      <div class="accordion_child">
          Contenu 2
        </div>
        </div>

      <div id="test3-content">

      <div class="accordion_child">
          Contenu 3
        </div>
      </div>
    </div>
          </td></tr>
</table></div>
    <!--End of accordion parent-->

    </body>
    </html>
J'ai fait un tableau avec 2 lignes, une pour les onglets, la seconde pour le contenu. J'ai ajouté "float: left;" à la class des onglets.

Cordialement.

Invité
Invité


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

Résolu Re: Faire des Onglets

Message par Shiooooo le Lun 2 Mai 2011 - 23:57

Merci beaucoup et désolé de te répondre avec beaucoup de retard, mais comme c'était la reprise des cours j'étais un peu occupée. En tout cas, j'annonce que le sujet et résolu

Thanks beaucoup,
Shio

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo 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