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

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:

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:

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:

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>

</head>

<body>

<div id="en_tete">

<span class="onglet"><img src="images/nav_01.png" style="height:61px;width:35px" alt="nav" /></span>

<span class="onglet">
<div class="navigation"><img src="images/nav_02.png" style="height:61px;width:185px" alt="Mon onglet 1" onMouseOver="this.src ='images/nav_hover_02.png';" onMouseOut="this.src = 'images/nav_02.png';" /></div>
<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>
</span>

<span class="onglet">
<div class="navigation"><img src="images/nav_03.png" style="height:61px;width:180px" alt="Mon onglet 2" onMouseOver="this.src ='images/nav_hover_03.png';" onMouseOut="this.src = 'images/nav_03.png';" /></div>
<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>
</span>

<span class="onglet">
<div class="navigation"><img src="images/nav_04.png" style="height:61px;width:180px" alt="Mon onglet 3" onMouseOver="this.src ='images/nav_hover_04.png';" onMouseOut="this.src = 'images/nav_04.png';" /></div>
<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>
</span>

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

<span class="onglet"><img src="images/nav_06.png" style="height:61px;width:36px" alt="nav" /></span>

</div>

</body>

</html>

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:

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

Spoiler:

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

#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;
}

/** 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>
</head>

<body>
<div id="en_tete">

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

<span class="onglet">
<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>
<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>
</span>

<span class="onglet">
<div class="navigation"><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>
<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>
</span>

<span class="onglet">
<div class="navigation"><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>
<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>
</span>

<span class="onglet">
<div class="navigation"><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>
<div class="bloc_texte" id="onglet4">
   <div class="infos">
      <p>Ceci est l'onglet 4</p>
   </div>
</div>
</span>

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

</div>

</body>

</html>

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:

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

Code:

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

1/ Il va d'abord falloir héberger votre page html. Pour cela, vous pouvez :
-> soit passer par le serveur FTP de votre fournisseur d'accès internet
-> soit vous créer un compte sur ce site [voilà.fr] (j'ai testé pour vous )

2/ On va transférer notre page HTML sur le ftp

3/ 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:

Il ne nous reste plus qu'à copier ce code dans : Panneau d'admin >> Général >> Page d'accueil >> Message d'en-tête 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

Si vous avez des questions, remarques, problèmes, n'hésitez pas à cliquer sur répondre Wink

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]