Faire des Onglets

[Shiooooo]

A que coucou tout le monde,
Shio' vient implorer votre aide
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'

[Invité]

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

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 .

Cordialement.

[Shiooooo]

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

[Shiooooo]

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 ?

[Invité]

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.

[Shiooooo]

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

[Invité]

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.

[Shiooooo]

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

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

[Invité]

Bonjour,

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

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 .

Cordialement.

[Shiooooo]

Déjà je vous remercie infiniment d'avoir trouvé le script !!!! Et oui, j'ai une question :
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'

[Invité]

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.

[Shiooooo]

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]

Un p'tit up

[Invité]

Bonjour,

Je ne vous ai pas oublié , 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.

[Shiooooo]

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

:thanks: beaucoup,
Shio