Header

Partagez | 

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

Message Sujet: [Xooit] Faire une en-tête sous forme d'onglets   Lun 14 Mar - 15:44

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
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'aurai 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éparément 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 remplacer 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éparément. 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'appelle "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 tout 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éclencheur 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 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 Wink )

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:
<iframe name="En tete" src="http://miettes.sop.voila.net/en_tete_xooit.html" 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 >> 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




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].
Revenir en haut Aller en bas

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

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

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

Questions Fréquentes


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
[Xooit] Faire une en-tête sous forme d'onglets
Page 1 sur 1
 Sujets similaires
-
» [Messages privés] Afficher les MP sous forme de "sujets privés"
» Catégories sous forme de menu ?
» backup sous forme d'archive?
» Faire qu'un lien de sous-forums redirigent vers un sujet et pas ce sous-forum
» [Permissions] Mettre les permissions dans le PA sous forme de tableau intéractif
Réponse rapide

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

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens