Header
Partagez | 

[ForumActif] Faire une en-tête sous forme d'onglets

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: [ForumActif] Faire une en-tête sous forme d'onglets   Ven 31 Déc - 18:52

Bonjour à tous Smile

Dans ce tutoriel, nous allons apprendre à faire un message d'en-tête à onglet de ce type Smile




Pour ce tutoriel, vous allez avoir besoin :
-> d'un logiciel de graphisme
-> d'un logiciel de traitement de texte (pour rédiger votre code)
-> d'avoir accès aux templates de votre forum
-> d'avoir accès aux pages html de votre forum


Partie 1 :: je crée mes différents onglets sous forme d'image.



Et oui, c'est la base. Pour ce tutoriel, je vais faire simple (on ne s'occupe pas de l'aspect graphique mais bel et bien du codage ^^)

4 Onglets :
onglet1:
 
onglet2:
 
onglet3:
 
onglet4:
 

J'aurais donc ces 4 onglets à coder

Partie 2 :: j'enregistre mes images



Maintenant qu'on connait la structure, il faut enregistrer les images dont on va avoir besoin :

les boutons de navigation:
 

les boutons de navigation survolés:
 

les images de fond des onglets:
 

Partie 3 :: je prépare mon code html



1/ On va commencer par coder chaque onglet séparemment en les mettant dans un span qui se nommera onglet Smile on aura donc :

Code:
<span class="onglet">le code de mon onglet</span>

2/ Maintenant, on ajoute l'image de navigation Smile Pour cela on va la mettre dans une div nommé navigation

Code:
<div class="navigation">Le code de mon image sera là</div>

On va ajouter une petite subtilité ici Smile Quand on va passer la souris sur l'image, celle-ci va changer. Pour cela, on va utiliser du javascript simple :

Code:
<img src="lien de mon image normal" onMouseOver="this.src ='lien de mon image quand survolée';" onMouseOut="this.src = 'lien de mon image normal';" alt="mon onglet" />

Essayons de comprendre un peu ce code :

-> onMouseOver = quand la souris est dessus
-> onMouseOut = quand la souris s'en va
-> this.src = le "this" correspond à "l'élement sur lequel est ma souris" et le "src" correspond au SRC de l'image. Donc en gros, on dit, je vais rempalce le contenu du src de cette image.

Donc si on assemble le tout on aura ça pour les boutons des onglets :

Code:
<div class="navigation"><img src="lien de mon image normal" onMouseOver="this.src ='lien de mon image quand survolée';" onMouseOut="this.src = 'lien de mon image normal';" alt="mon onglet" style="les propriétés de l'image" /></div>

3/ Je code maintenant le contenu de mon bloc et pour cela, je le mets dans une div nommé "bloc_texte" et je lui donne un nom bien précis pour travailler le style

Code:
<div class="bloc_texte" id="numero de l'onglet">mon contenu sera là</div>

Donc si on se résume, chaque onglet sera fait de cette façon :

Code:
<span class="onglet">
   <div class="navigation"><img src="lien de mon image normal" onMouseOver="this.src ='lien de mon image quand survolée';" onMouseOut="this.src = 'lien de mon image normal';" alt="mon onglet" style="les propriétés de l'image" /></div>
   
   <div class="bloc_texte" id="numero de l'onglet">mon contenu sera là</div>
</span>

Alors au boulot, codons chaque onglet séparamment. Nous avons donc cette page html ci :

Spoiler:
 

Partie 4 :: Ajoutons un peu de CSS



Ici, je ne vous donnerai que la base. A vous de personnaliser chaque onglet ensuite Wink

1/ Pour faire en sorte que les boutons de navigation et les onglets se mettent bien les uns à la suite des autres, il faut utiliser ce code :

Code:
span.onglet{
  float:left;
  }
 
 span.onglet img:hover{
  cursor:pointer;
  }

#en_tete  .bloc_texte{ 
  position:absolute;
  margin-top:0;
  }

On bloque donc chaque span qui s'apelle "onglet" à gauche.

2/ Maintenant, on va correctement placer nos onglets. Pour cela, on va donner une largeur (width) ainsi qu'une position centrée à nos "bloc_texte"

Code:
#en_tete  .bloc_texte{ 
  position:absolute;
  margin-top:0;
  width:800px;
  margin-left:50%;
  left: -400px; /* ceci correspond à la - (largeur / 2) */
  }


3/ Ensuite, on va ajouter des propriétés à chaque onglet : le fond, la hauteur minimale ...

>> onglet 1 :

Spoiler:
 

>> onglet 2 :

Spoiler:
 

>> onglet 3 :

Spoiler:
 

>> onglet 4 :

Spoiler:
 

3/ Autant préparer ça tout de suite, on va insérer le CSS dans notre code html. Pour cela, nous allons placer des balises
Code:
<style>

...

</style>

dans le head de la page. Ces balises style comprendront tous le CSS. Au final, nous avons donc cette page html :

Spoiler:
 

Partie 5 :: je fais mon code javascript



Ohh vous allez voir comme il est court Smile

Tout d'abord, on va appeler la bibliothéque jquery dans notre page html. Pour cela, il vous suffit de copier/coller ceci juste après les balises head de votre page.

Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Ensuite, on va appeler le script déclancheur des onglets de cette façon :

Code:
<script type="text/javascript" src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/js_onglet.js"></script>

Voici ce que contient ce code :

Code:
jQuery().ready(function(){
  $(".bloc_texte").hide();
  $("#onglet1").show();
  $(".navigation").click(function(){
      if($(this).next("div").is(":hidden")){                   
        $(".navigation").next("div:visible").hide();
        $(this).next("div").show();
      }
  }); 
});

Essayons de le décortiquer un peu Smile

Code:
jQuery().ready(function(){
>> la fonction se lance dès l'ouverture de la page html

Code:
$(".bloc_texte").hide();
  $("#onglet1").show();
>> On cache (hide) toutes les divs qui ont pour class "bloc_texte" . En revanche, on affiche (show) la div qui a pour id "onglet1"

Code:
  $(".navigation").click(function(){
>> On fait une fonction qui se déclanche quand on clique sur un bouton qui fait partie d'un bloc s'appelant "navigation"

Code:
if($(this).next("div").is(":hidden")){
>> Si la div qui suit le bouton sur lequel j'ai cliqué ( $(this).next("div") ) est caché (hide)

Code:
 $(".navigation").next("div:visible").hide();
        $(this).next("div").show();
>> alors je cache toutes les divs qui sont après un bloc "navigation"
>> et j'affiche la div qui suit le bouton navigation sur lequel je viens de cliquer.

Facile hein ? Smile

Donc vous devez avoir ça dans votre page html, juste avant la balise fermante "head"

Code:
   </style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/js_onglet.js"></script>
</head>

Partie 6 :: je place mon en-tête sur mon forum


*** Pour les forums sous ForumActif ***

1/ On va d'abord créer la page html qui va contenir notre en-tête. Pour cela, on fait : Panneau d'admin > Modules >> HTML >> gestion des pages html. Là vous créez une nouvelle page et vous y copier votre code.

Spoiler:
 

2/ On va maintenant appeler cette page pour faire notre en-tête Smile Pour cela, reprérez bien l'adresse de votre page.

Spoiler:
 

Ensuite, on va utiliser les iframes (si vous ne savez pas ce que c'est, je vous invite à lire [ce tutoriel]). Notre iframe aura cette tête :

Code:
<iframe name="En tete" src="http://test-miettes.exprimetoi.net/h4-en-tete" scrolling="no" height="450px" width="900px" align="center" frameborder="0" allowtransparency="yes" ></iframe>

Il ne nous reste plus qu'à copier ce code dans : Panneau d'admin >> Affichage >> Page d'accueil >> Généralité et le tour est joué Wink




Voilà, vous pouvez dès à présent réaliser un beau message d'en-tête digne d'un pro Wink

Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].


Dernière édition par Bowser le Dim 10 Avr - 22:31, édité 2 fois
Revenir en haut Aller en bas
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Re: [ForumActif] Faire une en-tête sous forme d'onglets   Dim 22 Juil - 15:13

Questions Fréquentes


J'ai un problème avec les accents


Il faut remplacer les caractères spéciaux par leur code "texte". Nous vous conseillons de vous aider de ce site : [clic]

Mettre des commentaires dans le code


*** Dans le css
Code:
/**onglet1**/

*** Dans le html
Code:
<!-- Onglet 1 -->

Tout est décallé !



N'oubliez pas d'ajouter ceci dans votre style
Code:
#en_tete{
  width:800px;
  min-height:400px;
  height:auto;
  margin:auto;
  }
Revenir en haut Aller en bas
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Re: [ForumActif] Faire une en-tête sous forme d'onglets   Ven 14 Fév - 14:06

Mettre les onglets en bas, sous le contenu



C'est possible ! Mais pour cela, nous allons devoir :
  • modifier un peu le html,
  • ajouter 2-3 détails da la CSS,
  • changer le javascript.


Rassurez-vous, je vous explique tout ça en détail.

La modification du HTML



Pour commencer, on va passer le bouton "onglet" (donc la navigation) en-dessous du bloc contenu.

Si on prend l'exemple de l'onglet 1, voici le nouveau code :
Code:
<span class="onglet">
  <div class="bloc_texte" id="onglet1">
      <div class="contenu">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare adipiscing vestibulum. In nulla sem, suscipit quis ultricies vitae, varius vitae turpis. Fusce lacinia enim tristique nunc lobortis laoreet. Maecenas at mauris non purus ornare dictum. Duis felis mauris, vestibulum ac congue sed, gravida quis sem. Fusce cursus pellentesque nisi et volutpat. Aenean pharetra dui sit amet enim sodales ornare. Ut ornare iaculis sapien a ornare. Etiam tincidunt nisi sit amet ante dapibus a mattis velit viverra. Quisque gravida fermentum quam sed varius. Suspendisse cursus vulputate mauris sollicitudin congue. Phasellus cursus facilisis adipiscing. Ut laoreet nulla lobortis nulla hendrerit tempor. Sed eget metus id arcu fermentum adipiscing quis sollicitudin velit. Nunc lacus arcu, imperdiet porttitor sodales quis, congue sit amet nisi.</p>
      </div>
      <div class="infos">
        <p>Ceci est l'onglet 1</p>
      </div>     
  </div>
  <div class="navigation"><img src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_02.png" style="height:61px;width:185px" alt="Mon onglet 1" onMouseOver="this.src ='http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_hover_02.png';" onMouseOut="this.src = 'http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_02.png';" /></div>
</span>

Ensuite, pour le JS, on va avoir besoin de "pointer" le bloc navigation sur lequel on a cliqué. On va donc ajouter pour chacun d'eux (sauf les 2 images qui n'ouvrent aucun onglet), un "name". Par exemple, pour l'onglet 1 :

Code:
 <div class="navigation" name="1"><img src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_02.png" style="height:61px;width:185px" alt="Mon onglet 1" onMouseOver="this.src ='http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_hover_02.png';" onMouseOut="this.src = 'http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_02.png';" /></div>

Idea Pour l'onglet 2, on mettra name="2" ; pour le 3, name ="3" ;...

La modification de la CSS



Si on s'arrête là, eh bien... on ne voit pas les boutons de navigation qui sont cachés sous le "bloc_texte". On va donc devoir ajouter à la class navigation une marge depuis le haut de l'onglet. Etant donné que, dans notre exemple, le "bloc_texte" fait 339px de haut, on va mettre une marge en haut de 339 et on va, par sécurité, ajouter cette hauteur fixe au "bloc_texte".
Code:
#en_tete .navigation{margin-top:339px;}

#en_tete  .bloc_texte{ 
  position:absolute;
  margin-top:0;
  width:800px;
  margin-left:50%;
  left:-400px;
  z-index:1;
  height:339px;
  }

On refait le JavaScript



La base est prête, on passe au js.

Ici, on va devoir intégrer nous même le js dans la page. On va donc commencer par remplacer ça :
Code:
<script type="text/javascript" src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/js_onglet.js"></script>
par ça, qui signifie "une fois que la page est chargée, on va faire..." :
Code:
<script type="text/javascript">

jQuery().ready(function(){
  /* Mon code sera ici */
});
 
</script>

Ensuite, pour commencer, on va dire au code : "une fois la page prête, on cache (hide) tous les «.bloc_texte» et on montre (show) le bloc «#onglet1» ". Ce qui nous donne :
Code:
<script type="text/javascript">

jQuery().ready(function(){
  $(".bloc_texte").hide(); /* je cache tous les .bloc_texte */
  $("#onglet1").show(); /* je montre l'onglet1 */
 
  /* La suite de mon code sera ici */
});
 
</script>

Maintenant, on va créer une variable qui va contenir le numéro de l'id ouvert :
Code:
<script type="text/javascript">

jQuery().ready(function(){
  $(".bloc_texte").hide(); /* je cache tous les .bloc_texte */
  $("#onglet1").show(); /* je montre l'onglet1 */
 
  var lastChoice = 1; /* J'initialise la variable "dernier onglet ouvert" */
 
  /* La suite de mon code sera ici */
});
 
</script>

C'est l'heure d'attaquer la partie intéressante : la fonction qui va se déclencher au "clic" sur un onglet. Donc, ici, on va commencer par dire au navigateur : "quand tu cliques sur un élément «.navigation» tu vas faire cette fonction :"
Code:
<script type="text/javascript">

jQuery().ready(function(){
  $(".bloc_texte").hide(); /* je cache tous les .bloc_texte */
  $("#onglet1").show(); /* je montre l'onglet1 */
 
  var lastChoice = 1; /* J'initialise la variable "dernier onglet ouvert" */
 
    $(".navigation").click(function(){
      /* La suite de mon code sera ici */
   }); 
});
 
</script>

1/ "Tu vas commencer par récupérer le «name» de l'élement sur lequel j'ai cliqué" :
Code:
<script type="text/javascript">

jQuery().ready(function(){
  $(".bloc_texte").hide(); /* je cache tous les .bloc_texte */
  $("#onglet1").show(); /* je montre l'onglet1 */
 
  var lastChoice = 1; /* J'initialise la variable "dernier onglet ouvert" */
 
    $(".navigation").click(function(){
       var info_element = $(this).attr('name'); /* Je récupére le name de l'élement sur lequel j'ai cliqué */
      /* La suite de mon code sera ici */
   }); 
});
 
</script>

2/ "Ensuite, tu vas vérifier que j'ai bien cliqué sur un bouton qui est lié à un onglet (autrement dit, pas une des 2 images aux extrémités). Pour cela, tu vas t'assurer que la variable «info_element» existe, c'est-à-dire qu'elle contient une donnée. Si oui, tu feras la fonction ; si non, tu t'arrêtes là (return)"
Code:
<script type="text/javascript">

jQuery().ready(function(){
  $(".bloc_texte").hide(); /* je cache tous les .bloc_texte */
  $("#onglet1").show(); /* je montre l'onglet1 */
 
  var lastChoice = 1; /* J'initialise la variable "dernier onglet ouvert" */
 
    $(".navigation").click(function(){
       var info_element = $(this).attr('name'); /* Je récupére le name de l'élement sur lequel j'ai cliqué */
      
       if(info_element){ 
         /* La suite de mon code sera ici */
      }else{
         return;
      }
      
      /* La suite de mon code sera ici */
   }); 
});
 
</script>

3/ "Tu affiches l'onglet que j'ai choisi" :
Code:
<script type="text/javascript">

jQuery().ready(function(){
  $(".bloc_texte").hide(); /* je cache tous les .bloc_texte */
  $("#onglet1").show(); /* je montre l'onglet1 */
 
  var lastChoice = 1; /* J'initialise la variable "dernier onglet ouvert" */
 
    $(".navigation").click(function(){
       var info_element = $(this).attr('name'); /* Je récupére le name de l'élement sur lequel j'ai cliqué */
     
      if(info_element){ 
        $('#onglet'+info_element+'').css({display: 'block'}); /* J'affiche l'onglet choisi */
        /* La suite de mon code sera ici */
      }else{
         return;
      }
    
   }); 
});
 
</script>

4/ "Tu masques l'ancien onglet" :
Code:
<script type="text/javascript">

jQuery().ready(function(){
  $(".bloc_texte").hide(); /* je cache tous les .bloc_texte */
  $("#onglet1").show(); /* je montre l'onglet1 */
 
  var lastChoice = 1; /* J'initialise la variable "dernier onglet ouvert" */
 
    $(".navigation").click(function(){
       var info_element = $(this).attr('name'); /* Je récupére le name de l'élement sur lequel j'ai cliqué */
     
      if(info_element){ 
        $('#onglet'+info_element+'').css({display: 'block'}); /* J'affiche l'onglet choisi */
        $('#onglet'+lastChoice+'').css({display: 'none'}); /* Je masque l'ancien onglet */
       
        /* La suite de mon code sera ici */
      }else{
         return;
      }
   }); 
});
 
</script>

5/ "Finalement, tu gardes en mémoire que l'onglet actuel est «l'ancien onglet ouvert»" :

Code:
<script type="text/javascript">

jQuery().ready(function(){
  $(".bloc_texte").hide(); /* je cache tous les .bloc_texte */
  $("#onglet1").show(); /* je montre l'onglet1 */
 
  var lastChoice = 1; /* J'initialise la variable "dernier onglet ouvert" */
 
    $(".navigation").click(function(){
       var info_element = $(this).attr('name'); /* Je récupére le name de l'élement sur lequel j'ai cliqué */
     
     if(info_element){ 
        $('#onglet'+info_element+'').css({display: 'block'}); /* J'affiche l'onglet choisi */
        $('#onglet'+lastChoice+'').css({display: 'none'}); /* Je masque l'ancien onglet */

        lastChoice = info_element; /* L'onglet que j'ai choisi devient "le dernier onglet ouvert" */
      }else{
         return;
      }
   }); 
});
 
</script>

C'est fini pour le js. ^^

Idea L'avantage de cette méthode, c'est qu'elle est "générique" : peu importe où tu places la barre de nav' (même si par la suite tu décides de la remettre en haut), le code fonctionnera. Smile




Au final, voici le nouveau code :

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=iso-8859-1" />
<title>Tuto faire une en tete sous forme d'onglet</title>

<style>
/**** Structure de l'en-tête ****/

body{
  background-color:transparent;
  }

#en_tete{
  width:800px;
  min-height:400px;
  height:auto;
  color:#1a3a2f;
  font-family: Verdana;
  border:1px solid #dedbc0;
  margin:auto;
  position:relative;
  }
 
#en_tete .navigation{margin-top:339px;}
 
#en_tete tr{
  vertical-align:top;
  }
 
#en_tete img{
  border:0;
  }
 
span.onglet{
  float:left;
  }
 
 span.onglet img:hover{
  cursor:pointer;
  }

#en_tete  .bloc_texte{ 
  position:absolute;
  margin-top:0;
  width:800px;
  margin-left:50%;
  left:-400px;
  z-index:1;
  height:339px;
  }
 
/** Onglet 1 **/

#en_tete  #onglet1{
  background-image:url("http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/fd_onglet1.png");
  background-repeat:no-repeat;
  background-position:top;
  min-height:339px;
  }
 
#en_tete  #onglet1 .contenu{
  width:296px;
  height:auto;
  background-image:url("http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/fd_texte.png");
  border:white 1px solid;
  margin-left:497px;
  margin-right:9px;
  text-align:center;
  font-size:12px;
  margin-top:10px;
  }

#en_tete  #onglet1 .contenu p{
  padding-left:12px;
  padding-right:12px;
  padding-top:2px;
  padding-bottom:2px;
  }
 
#en_tete  #onglet1 .infos{
  font-size:10px;
  margin-left:220px;
  margin-top:-40px;
  }
 
/** Onglet 2 **/

#en_tete  #onglet2{
  background-image:url("http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/fd_onglet.png");
  background-repeat:no-repeat;
  background-position:top;
  min-height:339px;
  }
 
#en_tete  #onglet2 .contenu{
  width:600px;
  height:auto;
  margin:auto;
  text-align:center;
  font-size:14px;
  margin-top:10px;
  }
 
#en_tete  #onglet2 .infos{
  font-size:10px;
  margin-left:30px;
  margin-top:90px;
  }
 
/** Onglet 3 **/

#en_tete  #onglet3{
  background-image:url("http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/fd_onglet.png");
  background-repeat:no-repeat;
  background-position:top;
  min-height:339px;
  }

#en_tete  #onglet3  #liste{
  width:225px;
  height:160px;
  margin-left:35px;
  background-image:url("http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/fd_texte.png");
  border:white 1px solid;
  font-size:12px;
  }
 
#en_tete  #onglet3  #texte{
  width:500px;
  height:auto;
  margin-left:285px;
  margin-right:15px;
  margin-top:-160px;
  background-image:url("http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/fd_texte.png");
  border:white 1px solid;
  text-align:center;
  font-size:14px;
  }
 
#en_tete  #onglet3 .infos{
  font-size:10px;
  margin-left:30px;
  margin-top:10px;
  }
 
/** Onglet 4 **/

#en_tete  #onglet4{
  background-image:url("http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/fd_onglet.png");
  background-repeat:no-repeat;
  background-position:top;
  min-height:339px;
  }


#en_tete  #onglet4 .infos{
  font-size:14px;
  margin-left:50px;
  margin-top:50px;
  }
  </style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

jQuery().ready(function(){
  $(".bloc_texte").hide(); /* je cache tous les .bloc_texte */
  $("#onglet1").show(); /* je montre l'onglet1 */
 
  var lastChoice = 1; /* J'initialise la variable "dernier onglet ouvert" */

  $(".navigation").click(function(){
      var info_element = $(this).attr('name'); /* Je récupére le name de l'élement sur lequel j'ai cliqué */
    
     if(info_element){ 
        $('#onglet'+info_element+'').css({display: 'block'}); /* J'affiche l'onglet choisi */
        $('#onglet'+lastChoice+'').css({display: 'none'}); /* Je masque l'ancien onglet */

        lastChoice = info_element; /* L'onglet que j'ai choisi devient "le dernier onglet ouvert" */
      }else{
         return;
      }
  }); 
 
});
 
</script>
</head>

<body>
<div id="en_tete">

<span class="onglet"><div class="navigation"><img src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_01.png" style="height:61px;width:35px" alt="nav" /></div></span>

<span class="onglet">
  <div class="bloc_texte" id="onglet1">
      <div class="contenu">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare adipiscing vestibulum. In nulla sem, suscipit quis ultricies vitae, varius vitae turpis. Fusce lacinia enim tristique nunc lobortis laoreet. Maecenas at mauris non purus ornare dictum. Duis felis mauris, vestibulum ac congue sed, gravida quis sem. Fusce cursus pellentesque nisi et volutpat. Aenean pharetra dui sit amet enim sodales ornare. Ut ornare iaculis sapien a ornare. Etiam tincidunt nisi sit amet ante dapibus a mattis velit viverra. Quisque gravida fermentum quam sed varius. Suspendisse cursus vulputate mauris sollicitudin congue. Phasellus cursus facilisis adipiscing. Ut laoreet nulla lobortis nulla hendrerit tempor. Sed eget metus id arcu fermentum adipiscing quis sollicitudin velit. Nunc lacus arcu, imperdiet porttitor sodales quis, congue sit amet nisi.</p>
      </div>
      <div class="infos">
        <p>Ceci est l'onglet 1</p>
      </div>     
  </div>
  <div class="navigation" name="1"><img src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_02.png" style="height:61px;width:185px" alt="Mon onglet 1" onMouseOver="this.src ='http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_hover_02.png';" onMouseOut="this.src = 'http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_02.png';" /></div>
</span>

<span class="onglet">
  <div class="bloc_texte" id="onglet2">
      <div class="contenu">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare adipiscing vestibulum. In nulla sem, suscipit quis ultricies vitae, varius vitae turpis. Fusce lacinia enim tristique nunc lobortis laoreet. Maecenas at mauris non purus ornare dictum. Duis felis mauris, vestibulum ac congue sed, gravida quis sem. Fusce cursus pellentesque nisi et volutpat. Aenean pharetra dui sit amet enim sodales ornare. Ut ornare iaculis sapien a ornare. Etiam tincidunt nisi sit amet ante dapibus a mattis velit viverra. Quisque gravida fermentum quam sed varius. Suspendisse cursus vulputate mauris sollicitudin congue. Phasellus cursus facilisis adipiscing. Ut laoreet nulla lobortis nulla hendrerit tempor. Sed eget metus id arcu fermentum adipiscing quis sollicitudin velit. Nunc lacus arcu, imperdiet porttitor sodales quis, congue sit amet nisi.</p>
      </div>
      <div class="infos">
        <p>Ceci est l'onglet 2</p>
      </div>     
  </div>
  <div class="navigation" name="2"><img src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_03.png" style="height:61px;width:180px" alt="Mon onglet 2" onMouseOver="this.src ='http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_hover_03.png';" onMouseOut="this.src = 'http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_03.png';" /></div>
</span>

<span class="onglet">
  <div class="bloc_texte" id="onglet3">
      <div class="contenu" id="liste">
        <ul>
            <li>point 1</li>
            <li>point 2</li>
            <li>point 3</li>
        </ul>
      </div>
      <div class="contenu" id="texte">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare adipiscing vestibulum. In nulla sem, suscipit quis ultricies vitae, varius vitae turpis. Fusce lacinia enim tristique nunc lobortis laoreet. Maecenas at mauris non purus ornare dictum. Duis felis mauris, vestibulum ac congue sed, gravida quis sem. Fusce cursus pellentesque nisi et volutpat. Aenean pharetra dui sit amet enim sodales ornare. Ut ornare iaculis sapien a ornare. Etiam tincidunt nisi sit amet ante dapibus a mattis velit viverra. Quisque gravida fermentum quam sed varius. Suspendisse cursus vulputate mauris sollicitudin congue. Phasellus cursus facilisis adipiscing. Ut laoreet nulla lobortis nulla hendrerit tempor. Sed eget metus id arcu fermentum adipiscing quis sollicitudin velit. Nunc lacus arcu, imperdiet porttitor sodales quis, congue sit amet nisi.</p>
      </div>
      <div class="infos">
        <p>Ceci est l'onglet 3</p>
      </div>     
  </div>
  <div class="navigation" name="3"><img src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_04.png" style="height:61px;width:184px" alt="Mon onglet 3" onMouseOver="this.src ='http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_hover_04.png';" onMouseOut="this.src = 'http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_04.png';" /></div>
</span>

<span class="onglet">
  <div class="bloc_texte" id="onglet4">
      <div class="infos">
        <p>Ceci est l'onglet 4</p>
      </div>     
  </div>
  <div class="navigation" name="4"><img src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_05.png" style="height:61px;width:180px" alt="Mon onglet 4" onMouseOver="this.src ='http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_hover_05.png';" onMouseOut="this.src = 'http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_05.png';" /></div>
</span>

<span class="onglet"><div class="navigation"><img src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/images/nav_06.png" style="height:61px;width:36px" alt="nav" /></div></span>

</div>

</body>

</html>
Revenir en haut Aller en bas
[ForumActif] Faire une en-tête sous forme d'onglets
Page 1 sur 1
 Sujets similaires
-
» [Résolu] une anime sous forme d'un arbre de recherche
» Impossible de faire une M.A.J avec Avira [Résolu]
» { Sujet résolu }  Faire apparaître les sous forum (sur les forums) sous forme de lien
» Zorg infobulle
» Enigme musicale N°49.......sous forme de Quizzz
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+