AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


12 résultats trouvés pour onglets

Onyx

Qeel Carrousel (4 blocs) - css & html - Ven 30 Sep 2016 - 1:16



Qeel Carrousel



Salut !

Voici un petit LS de Qeel que j'ai fait pour la demande de P'tit loup. Le code vient de cette cette PA (page d'accueil) de Okhmhaka qui a été adaptée pour un qeel.

Pour voir l'aperçu du bloc de devant (bloc 1): cliquez ici.
Pour voir l'aperçu du bloc de droite (bloc 2) : cliquez ici.
Pour voir l'aperçu du bloc de droite (bloc 2) au survol d'une image de groupe : cliquez ici.
Pour voir l'aperçu du bloc de gauche (bloc 3) : cliquez ici.
Pour voir l'aperçu du bloc de gauche (3) au survol de l'image : cliquez ici.
Pour voir l'aperçu du bloc de derrière (4) : cliquez ici.

Ce LS est en deux parties.
  • Tout d'abord, nous allons installer le qeel dans le template et regarder comment ajouter/supprimer/modifier des groupes.
  • Puis, nous allons le mettre en forme à l'aide du CSS.


La largeur du Qeel est de 850 pixels et la hauteur 450px.
- La version du forum est PhpBB2.

Mettre un crédit vers Never-Utopia est obligatoire.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^





1. Corps du qeel (Template Index_Body)



Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_body" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BODY

Puis, il va nous falloir trouver le "BEGIN disable_viewonline" et le "END disable_viewonline". Normalement, ils sont respectivement aux lignes 173 et 220 du template.

Nous allons remplacer tout ce qu'il y a entre ces deux lignes par :
Code:
<script type="text/javascript">
        //<!--
                function change_qeelonglet(name)
                {
                        document.getElementById('qeelonglet_'+anc_qeelonglet).className = 'qeelonglet_0 qeelonglet';
                        document.getElementById('qeelonglet_'+name).className = 'qeelonglet_1 qeelonglet';
                        document.getElementById('contenu_qeelonglet_'+anc_qeelonglet).style.display = 'none';
                        document.getElementById('contenu_qeelonglet_'+name).style.display = 'block';
                        anc_qeelonglet = name;
                }
        //-->
</script>
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace" rel="stylesheet" />
<div id="qeeltarget1">
  <div id="qeeltarget2">
    <div id="qeeltarget3">
      <div id="qeeltarget4">
        <div id="qeelespace_top">
          <a href="{U_VIEWONLINE}" rel="nofollow">Qui se cache dans l'ombre ?</a>
        </div>
        <div id="qeelespace_carousel">
         
          <!-- ZONE 1 - DEFAUT -->
          <div id="qeelcarousel_1">
            <a href="#qeeltarget1" class="qeellien1"></a>
            <div class="qeelcarousel_1_content">
              <div class="qeel_subtitle">Statistiques</div>
              <div class="qeel_bloc">
                Bienvenue à<span id="newuser">{NEWEST_USER}</span> !
                <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
                <table id="connlist" cellspacing="0">{L_CONNECTED_MEMBERS}</table>
              </div>
            </div>
          </div>
         
          <!-- ZONE 2 -->
          <div id="qeelcarousel_2">
            <a href="#qeeltarget2" class="qeellien2"></a>
            <div class="qeelcarousel_2_content">
              <div class="qeel_subtitle">Groupes</div>
              <div class="qeel_bloc">
                <span class="qeelonglet_1 qeelonglet" id="qeelonglet_Groupe1" onmouseover="javascript:change_qeelonglet('Groupe1');">
                  <a href="#">NOM DU GROUPE 1</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe2" onmouseover="javascript:change_qeelonglet('Groupe2');">
                  <a href="#">NOM DU GROUPE 2</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe3" onmouseover="javascript:change_qeelonglet('Groupe3');">
                  <a href="#">NOM DU GROUPE 3</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe4" onmouseover="javascript:change_qeelonglet('Groupe4');">
                  <a href="#">NOM DU GROUPE 4</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onmouseover="javascript:change_qeelonglet('Groupe5');">
                  <a href="#">NOM DU GROUPE 5</a>
                </span>
              </div>
              <div class="qeel_bloc">
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe1">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 1" alt="Image du groupe 1" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 1
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe2">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 2" alt="Image du groupe 2" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 2
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe3">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 3" alt="Image du groupe 3" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 3
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe4">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 4" alt="Image du groupe 4" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 4
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 5" alt="Image du groupe 5" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 5
                  </div>
                </div>
              </div>
              <div class="clear"></div>
            </div>
          </div>
         
          <!-- ZONE 3 -->
          <div id="qeelcarousel_3">
            <a href="#qeeltarget3" class="qeellien3"></a>
            <div class="qeelcarousel_3_content">
              <div class="qeel_subtitle">Anniversaires</div>
              <div class="qeel_bloc">
                <table id="qeelbirthday" cellspacing="0">
                  {L_WHOSBIRTHDAY_TODAY}
                  {L_WHOSBIRTHDAY_WEEK}
                </table>
              </div>
              <div class="qeel_anniv_bas">
                <img class="qeel_img_anniv" src="URL IMAGE SOUS LES ANNIVERSAIRES" alt="machin" />
                <div class="qeel_anniv_texte">
                  Codage du Qeel par Okhmhaka et Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>.
                </div>
              </div>
            </div>
          </div>
         
          <!-- ZONE 4 -->
          <div id="qeelcarousel_4">
            <a href="#qeeltarget4" class="qeellien4"></a>
            <div class="qeelcarousel_4_content">
              <div class="qeel_subtitle">Partenaires</div>
              <div class="qeel_bloc">
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 1" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 2" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 3" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 4" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 5" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 6" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 7" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 8" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 9" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 10" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 11" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 12" /></a>
              </div>
            </div>
          </div>
         
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
</script>
    <script type="text/javascript">
        //<!--
                var anc_qeelonglet = 'Groupe1';
                change_qeelonglet(anc_qeelonglet);
        //-->
    </script>


Pour ce qui est rajouter, d'enlever ou de modifier un groupe, cela se fait par trois manipulations. Premièrement, on ajoute/enlève/modifie le nom du groupe. Puis, on enlève/ajoute/modifie la description du groupe. Enfin, on modifie la hauteur des groupes.

Les noms des groupes ressemblent à ceci :
Code:
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onmouseover="javascript:change_qeelonglet('Groupe5');">
                  <a href="#">NOM DU GROUPE 5</a>
                </span>


Quant aux descriptions des groupes, elles correspondent à ceci :
Code:
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 5" alt="Image du groupe 5" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 5
                  </div>
                </div>


Il suffit de changer le 5 à tous les endroits où il y en a un par un nouveau chiffre.

Pour la hauteur des groupes, il faut se rendre à cet endroit dans le CSS (que nous allons ajouter à la prochaine étape) :
Code:
/*Nom des groupes*/
.qeelonglet {
  display: block;
  font-size: 18px;
  height: 38px;
  padding: 15px 3px 0px 3px;
  margin-bottom: 1px;
  text-align: center;
  background: #E9E8E8;
  font-weight: bold;
  text-transform: uppercase;
}


Et vous devez modifier le "height" et le "padding" pour arriver à une hauteur des onglets qui vous convient.




2. Mise en forme (CSS)



Si vous regardez votre qeel, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre qeel à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/************************************************************ DÉBUT QEEL ************************************************************/

/*Fond du qeel*/
#qeel {
  position: relative;
  width: 800px;
  height: 680px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  background: #141313 url('http://img15.hostingpics.net/pics/570241qeel2.png') no-repeat top center;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #000000;
}


/*Titre du qeel*/
#qeel_title {
  color: goldenrod;
  font-size: 44px;
  font-family: 'Great Vibes', cursive;
  text-shadow: 1px 1px 2px #000000;
  padding-left: 15px;
}


/*Carré des informations sur les membres*/
#qeel_info_members {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 320px;
  height: 290px;
  background-color: rgba(20, 19, 19, 0.6);
  border-radius: 10px;
  box-shadow: 0px 0px 3px #141313;
  padding: 10px;
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: left;
}


/*Mise en forme des listes des membres connectés*/
#userlists {
  margin-top: 5px;
  height: 205px;
  overflow: auto;
}
#totalconn {
  margin-top: 5px;
}
#totalconn .row1{
  background: transparent;
  vertical-align: top;
}
#totalconn .gensmall {
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: left;
}


/*Section des groupes*/
#qeel_bottom {
  position: absolute;
  top: 418px;
  left: 0px;
  width: 800px;
  text-align: center; 
}


/*Nom des groupes*/
.qeelonglet {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 2px;
  height: 40px;
  font-size: 38px;
  font-family: 'Great Vibes', cursive;
  letter-spacing: 1px;
  text-shadow: 0px 0px 3px #000000;
  opacity: 0.6;
}
/*Groupe au survol*/
.qeelonglet_0:hover {
  cursor: pointer;
  opacity: 0.8;
}
/*Groupe actif*/
.qeelonglet_1 {
  opacity: 1;
}


/*Description des groupes*/
.contenu_qeelonglet {
  position: relative;
  width: 800px;
  height: 200px;
  margin-top: 20px;
  display: none;
}
/*Images des groupes*/
.contenu_qeelonglet img {
  width: 800px;
  height: 200px;
  border-radius: 0px 0px 20px 20px;
}
/*Descriptions des groupes*/
.qeel_desc {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 780px;
  height: 180px;
  background-color: rgba(20, 19, 19, 0.6);
  border-radius: 0px 0px 20px 20px;
  padding: 10px;
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: justify;
  overflow: auto;
  transition: 0.5s;
  opacity: 0;
}
/*Descriptions des groupes au survol*/
.contenu_qeelonglet:hover .qeel_desc {
  opacity: 1;
}

/************************************************************ FIN QEEL ************************************************************/





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !

Onyx

Fiche de Prédéfini avec onglets - Ven 30 Sep 2016 - 0:48




Fiche de Prédéfini avec onglets


Salut !

Voici un petit LS d'une fiche de prédéfini à onglets que j'ai faite suite à la demande de MPGuenette.

Pour voir l'aperçu : cliquez ici.
Pour voir l'aperçu, onglet Histoire : cliquez ici.
Pour voir l'aperçu, onglet Autres : cliquez ici.

Ce LS est en trois parties.
  • Tout d'abord, nous allons ajouter le javascript qui permet de faire fonctionner les onglets.
  • Puis, nous allons mettre en forme la fiche avec du CSS.
  • Enfin, nous allons poster la fiche.


Laisser le crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Ajouter le javascript


Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système d'onglets des prédéfinis".
On choisit le placement "Sur les sujets".

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function() {
  var index_onglet;
  $('.predef_onglet').click(function(){
    $(this).parent().find('.predef_actif').removeClass('predef_actif');
    $(this).parent().find('.predef_contenu_actif').removeClass('predef_contenu_actif');
    index_onglet = $(this).index();
    $(this).parent().find('.predef_contenu').eq(index_onglet).addClass('predef_contenu_actif');
    $(this).addClass('predef_actif');
  });
});




2. Mise en forme (CSS)


Il est maintenant temps de mettre en forme notre fiche à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/*Bloc de predef*/
.predef_bloc {
  width: 500px;
  margin: auto;
  background: url('http://www.zupimages.net/up/16/36/ss1h.jpg') center top;
  font-family: 'Playfair Display SC', serif;
  padding-bottom: 25px;
  font-size: 14px;
  position: relative;
}
/*Titre de predef*/
.predef_title {
  background: #101010;
  padding: 10px 5px 5px 5px;
  font-family: 'UnifrakturCook', cursive;
  margin-bottom: 25px;
  font-size: 32px;
  color: #656565;
  text-align: center;
}
/*Citation de predef*/
.predef_cite {
  padding-top: 5px;
  font-size: 20px;
  color: #454545;
}
/*Bloc milieu*/
.predef_bloc_middle {
  padding-top: 5px;
  margin: auto;
  width: 450px;
  background-color: rgb(53, 53, 53);
  background-color: rgba(53, 53, 53, 0.75);
  text-align: center;
}
/*Onglet predef*/
.predef_onglet {
  display: inline-block;
  width: 120px;
  margin: 10px;
  text-align: center;
  font-size: 24px;
  color: #959595;
  cursor: pointer;
}
.predef_onglet:hover {
  color: #a3a3a3;
}
/*Onglet predef actif*/
.predef_actif {
  color: #b5b5b5!important;
  cursor: default;
}
/*Contenu de onglet*/
.predef_contenu {
  display: none;
  margin: auto;
  padding: 5px 15px 15px 15px;
  width: 420px;
  text-align: justify;
}
.predef_contenu_actif {
  display: block;
}
/*Image*/
.predef_img {
  float: left;
  height: 320px;
  width: 200px;
}
/*Bloc de texte*/
.predef_text {
  border: 2px solid #b5b5b5;
  color: #b5b5b5;
  float: left;
  width: 196px;
  margin-left: 10px;
  height: 306px;
  padding: 5px;
  overflow: auto;
}
.predef_contenu:nth-of-type(2) .predef_text {
  margin-left: 0px;
  width: 406px;
}
.predef_contenu:nth-of-type(3) .predef_text {
  margin-left: 0px;
  margin-right: 10px;
}
/*Crédits*/
.predef_credit {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 1px;
  left: 0px;
  font-size: 10px;
  color: #000000;
}
.predef_credit a {
  color: #c4c4c4;
}
.predef_credit a:hover {
  color: #ffffff;
}




3. Poster la fiche (html)


Il suffit de vous rendre là où vous voulez poster la fiche et d'y mettre ce code :
Code:
<link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC|UnifrakturCook:700" rel="stylesheet" /><div class="predef_bloc"><div class="predef_title">TITRE OU NOM DU PRÉDÉFINI<div class="predef_cite">SOUS-TITRE OU CITATION</div></div><div class="predef_bloc_middle"><span class="predef_onglet predef_actif">Général</span><span class="predef_onglet">Histoire</span><span class="predef_onglet">Autres</span><div class="predef_contenu predef_contenu_actif"><img class="predef_img" src="URL IMAGE 1ER ONGLET" alt="avatar1" /><div class="predef_text">TEXTE DU 1ER ONGLET</div><div style="clear: both;"></div></div><div class="predef_contenu"><div class="predef_text">TEXTE DU 2E ONGLET</div><div style="clear: both;"></div></div><div class="predef_contenu"><div class="predef_text">TEXTE DU 3E ONGLET</div><img class="predef_img" src="URL IMAGE 3E ONGLET" alt="avatar2" /><div style="clear: both;"></div></div></div><div class="predef_credit">Par Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a></div></div>


Les majuscules servent à indiquer où mettre le contenu.




C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !

Cacher/révéler certains forums de différentes catégories (onglets) - Mar 20 Sep 2016 - 6:38



Cacher/révéler certains forums de différentes catégories (onglets)


Salut !

Sur le thème actuel (septembre 2016), il est possible de cocher/décocher les différents types de forums sur le menu afin de cacher/révéler les forums qui parlent uniquement de RPG, codage ou graphisme, même s'ils font partie de plusieurs catégories. Ce tutoriel vous permettra de faire la même chose avec l'option de garder vos choix en mémoire pour que vous n'ayez pas besoin cacher/révéler les forums que vous voulez à chaque fois que vous rechargez la page.

Exemple d'application :
Disons que vous avez un forum pirate et que vous avez séparé les catégories selon les parties du monde (Asie, Europe, Amérique, etc.). Seulement, certains forums sont principalement utilisés par pirates, d'autres par la marine, d'autres par les civils et d'autres par tout le monde. Histoire de faciliter la vie à tout le monde, vous décidez d'installer le système pour que les membres aient le choix de cocher/décocher les forums qu'ils veulent voir ou non.

Ce LS est en quatre parties.
  • Tout d'abord, nous allons modifier un peu les catégories pour ajouter le système d'onglets.
  • Puis, nous allons ajouter le javascript qui permet de faire fonctionner cette astuce.
  • ensuite, nous allons voir comment personnaliser le javascript avec vos onglets.
  • Enfin, nous allons styliser un peu les onglets avec du CSS.


Vos catégories doivent avoir la hiérarchie "Séparer sur l'index : Moyen".
Mettre un crédit vers Never-Utopia est obligatoire.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^





1. Ajout du système d'onglet (Template Index_Box)



Nous allons commencer par aller dans les templates, plus précisément dans le template "index_box".

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BOX

Puis, tout en haut du template, on va ajouter ceci :
Code:
<table id="selector">
  <tr>
    <td class="selectoroption">Nom onglet 1</td>
    <td class="selectoroption">Nom onglet 2</td>
    <td class="selectoroption">Nom onglet 3</td>
  </tr>
</table>


Je pense que je n'ai pas besoin de vous expliquer comment ajouter/modifier/enlever des onglets, c'est pas mal explicite u_u




Maintenant, on va entourer chaque forum d'une div pour bien les sélectionner et on va mettre un lien pour les identifier.

ATTENTION : Si vous utilisez PunBB ou phpBB2 et que vous n'avez jamais modifié vos templates ou que vos catégories sont encore codées avec des tableaux (balises table), allez dans le spoiler plus bas.

Ensuite, trouvez ceci :
Code:
<!-- BEGIN forumrow -->


Et ajoutez ceci juste après :
Code:
<a class="forum_distribution" href="{catrow.forumrow.U_VIEWFORUM}" style="display: none;"></a><div>


Enfin, trouvez ceci :
Code:
<!-- END forumrow -->


Et ajoutez ceci juste avant :
Code:
</div>


Spoiler pour PunBB et phpBB2:





2. Ajouter le javascript



Maintenant que les onglets ont été créés, on va aller ajouter le javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système d'onglets de forum".
On choisit le placement "Sur toutes les pages".

ATTENTION : Si vous utilisez PunBB ou phpBB2 et que vous n'avez jamais modifié vos templates ou que vos catégories sont encore codées avec des tableaux (balises table), allez dans le spoiler plus bas.

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function(){

  var nbselectoroption = $('#selector').find('.selectoroption').length;
  var tableauop = [];
  var localname;
  var optionindex;
  var queloptionquel;

  function nomsforum() {
    if (optionindex == 0) { /*Onglet 1*/
      tableauop = [
        "/f2-", /*1er forum à enlever ou rajouter dans onglet 1*/
        "/f6-", /*2e forum à enlever ou rajouter dans onglet 1*/
      ];
    }
    else if (optionindex == 1) { /*Onglet 2*/
      tableauop = [
        "/f1-", /*1er forum à enlever ou rajouter dans onglet 2*/
        "/f10-", /*2e forum à enlever ou rajouter dans onglet 2*/
      ];
    }
  }

  function rendreinvisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').next().css('display', 'none');
      }
    }
  }

  function rendrevisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').next().css('display', 'block');
      }
    }
  }

 if (nbselectoroption > 0) {
    for (i = 0; i < nbselectoroption; i++) {
      optionindex = i;
      var forlocalname = 'option' + i;
      var visibleounon = localStorage.getItem(forlocalname);
      if (visibleounon == "Invisible") {
        var queloption = $('.selectoroption').eq(i);
        queloption.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  }

  $('.selectoroption').click(function(){
    if (nbselectoroption > 0) {
      queloptionquel = $(this);
      optionindex = queloptionquel.index();
      localname = 'option' + optionindex;
      if (queloptionquel.hasClass('selectoroption_hidden')) {
        localStorage.setItem(localname, "Visible");
        queloptionquel.removeClass('selectoroption_hidden');
        nomsforum();
        rendrevisible();
      }
      else {
        localStorage.setItem(localname, "Invisible");
        queloptionquel.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  });

});


Spoiler pour PunBB et phpBB2:




3. Personnaliser le javascript selon votre situation


La première étape est d'aller regarder ce bout de code :
Code:
  function nomsforum() {
    if (optionindex == 0) { /*Onglet 1*/
      tableauop = [
        "/f2-", /*1er forum à enlever ou rajouter dans onglet 1*/
        "/f6-", /*2e forum à enlever ou rajouter dans onglet 1*/
      ];
    }
    else if (optionindex == 1) { /*Onglet 2*/
      tableauop = [
        "/f1-", /*1er forum à enlever ou rajouter dans onglet 2*/
        "/f10-", /*2e forum à enlever ou rajouter dans onglet 2*/
      ];
    }
  }


En gros, cette fonction associe les onglets à certains forums pour que le reste du javascript sache quel forum cacher/révéler et quand.

Pour rajouter un onglet, vous rajoutez cette partie avant le dernier } de la function :
Code:
    else if (optionindex == W) { /*Onglet Y*/
      tableauop = [
        "/fZ-", /*1er forum à enlever ou rajouter dans onglet Y*/
        "/fZ-", /*2e forum à enlever ou rajouter dans onglet Y*/
      ];
    }


Pour personnaliser le truc :
Le "W" est le numéro de l'onglet moins 1, donc si vous êtes au 3e onglet, vous remplacez le "W" par "2".
Le "Y" est le numéro de l'onglet.
Le "Z" est le numéro du forum à cacher/révéler. Pour savoir quel nombre mettre, allez sur le forum en question et regardez l'adresse url. Elle sera sous cette forme "http://nomduforum.com/f14-trucquelconque". Juste après le /f vous avez un nombre. C'est ce nombre là que vous devez mettre à la place du "Z".

Je pense que vous comprenez le principe ^^




Pour ceux qui ne veulent pas que la décision de cacher/révéler des forums reste en mémoire dans leur navigateur, vous pouvez enlever cette option en supprimant ce bout de code :
Code:
  if (nbselectoroption > 0) {
    for (i = 0; i < nbselectoroption; i++) {
      optionindex = i;
      var forlocalname = 'option' + i;
      var visibleounon = localStorage.getItem(forlocalname);
      if (visibleounon == "Invisible") {
        var queloption = $('.selectoroption').eq(i);
        queloption.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  }





3. Mettre en forme les onglets (CSS)



Vous remarquez, sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme les onglets à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/*Bloc qui entoure les onglets*/
#selector {
  margin: 10px auto 10px auto;
  width: 100%;
  border-spacing: 5px;
  background: #353535; /*Couleur de fond*/
  border: none;
}
/*Onglets actifs*/
.selectoroption {
  padding: 5px;
  background: #656565; /*Couleur de fond*/
  color: #dfdfdf; /*Couleur de la police*/
  font-family: 'Cambria';
  font-size: 14px;
  opacity: 1;
  text-align: center;
  cursor: pointer;
}
/*Onglets non-actifs*/
.selectoroption_hidden {
  opacity: 0.5;
}





C'est tout! Si jamais vous avez des problèmes avec cette astuce, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier le fonctionnement de l'astuce et que vous avez besoin d'aide.

À plus !

Invité

Galerie d'image en onclick - Ven 26 Aoû 2016 - 17:31

{#}html{/#} {#}css{/#} {#}onglets{/#} {#}javascript{/#} {#}jquery{/#} {#}auteur_Sacha73{/#}

Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Les Amis de la pub


Sacha.

Loukoum

PA avec Onglets - Ven 25 Sep 2015 - 12:13



Bonjour / Bonsoir chers amis de Never-Utopia!  :hug:  


Me voici ici pour vous laisser un petit code assez sympa de Page d'Accueil, codé par mes petites mains de A à Z!  :artiste:
Vous comprendrez donc que le crédit "PA de Loukoum sur Never-Utopia" est à laisser sous peine de mort...  :bandit:

A savoir que cette PA est une page HTLM, il faut donc être à l'aise avec ce genre de codes! A savoir aussi que votre page HTLM ne devra être modifiée qu'à l'aide de ce bouton Tag onglets sur Never Utopia - graphisme, codage et game design Editer-html et non de celui ci Tag onglets sur Never Utopia - graphisme, codage et game design Editer.
:nanere:   Donc si vous êtes déjà perdu, passez votre chemin.

Pour ceux qui sont trop fort  :cowboy:  nous allons passer au visuel =D
Et pour que tout soit parfait, voici la PA en pleine application ici =D

Donc pour ceux qui se sentent pousser des ailes, voilà les codes  :wesh:

Etape 1 - Notre PA
Voici donc le plus gros, la vrai PA!

Vous devez donc créer une nouvelle page HTLM (PA > Module > Gestion des Pages HTLM), mais faites bien attention à cliquer sur "Création en mode avancé (HTLM)" et non sur "Création en mode simple (WYSIWYG)"!!!

/!\ Les images pour les sabliers sont en 70x70. Si vous êtes à l'aise avec les codes, vous pouvez changer la taille. Mais si ce n'est pas le cas, comme il y a beaucoup de changement à faire, gardez cette taille (ou demandez de l'aide si vraiment vous voulez changer je vous mangerais pas)

Pour le contexte, il y a de quoi intégrer une vidéo. Pensez à mettre le lien mais aussi à changer la taille, qui est pour le moment réglé à 0x0!
Code:
<!DOCTYPE html>
<html>
<head>
  <base target="_blank" />
  <meta charset="UTF-8" />
  <title>Titre</title>
  <style>
/*Effet sur les mots soulignés*/
u {
  border-bottom: 2px dotted;
  border-color: #1d0e14;
  text-decoration: none;
}

/*Effet sur les mots en italique*/
i {
  border-bottom: none;
  color: #ad8c62;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000;
}

/*Effets sur vos liens*/
a,a:link,a:visited,a:hover {
  text-decoration: none;
}

a {
  color: #C0A27B;
  font-family: Georgia;
  font-size: 10px;
  text-decoration: none;
}

a:hover {
  color: #00FFBF;
  font-size: 10px;
  font-family: Georgia;
  text-decoration: none;
}

a.lien,a.lien:link,a.lien:visited,a.lien:hover {
  text-decoration: none;
}

a.lien {
  font-size: 10px;
  font-family: Georgia;
  color: #C0A27B;
  text-shadow: 1px 1px 1px #000;
  text-decoration: none;
}

a.lien:hover {
  font-size: 10px;
  font-family: Georgia;
  color: #00FFBF;
  text-shadow: 1px 1px 1px #000;
  font-weight: bolder;
  text-decoration: none;
}

/*Affichage des Titres de votre PA*/
.titre {
  background: #E5D5BA;
  font-family: 'MV Boli';
  font-size: 15px;
  text-align: center;
  text-shadow: 1px 1px 0 #62584b;
  border: 2px solid #1d0e14;
  border-bottom: 2px dotted #1d0e14;
}

/*Les styles des différents cadres. Vous pouvez tout changer SAUF la taille, soit width et height*/
.staff {
  background: #E5D5BA;
  width: 310px;
  height: 140px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  padding: 10px;
}

/*Ces "info" sont les infobulles, vous pouvez donc changer la couleur et la taille. Normalement la position d'affichage ne doit pas être changée! L'info1 et info2 sont pour le Staff, et la 4 pour les Scénarios*/
.info1 {
  position: relative;
  z-index: 24;
  text-decoration: none;
  font-family: Georgia;
  font-size: 10px;
}

.info1:hover {
  z-index: 25;
}

.info1 span {
  display: none;
}

.info1:hover span {
  display: block;
  position: absolute;
  top: -41px;
  left: -3px;
  width: 105px;
  height: 50px;
  background-color: #ad8c62;
  color: #61574b;
  text-align: center;
  font-weight: none;
  font-family: Georgia;
  font-size: 10px;
  border-radius: 20%;
}

/*Ceci concerne l'image des infobulles*/
.imgwidget {
  border-radius: 20%;
  width: 100px;
  height: 50px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.info2 {
  position: relative;
  z-index: 24;
  text-decoration: none;
  font-family: Georgia;
  font-size: 10px;
}

.info2:hover {
  z-index: 25;
}

.info2 span {
  display: none;
}

.info2:hover span {
  display: block;
  position: absolute;
  top: -21px;
  left: 0;
  width: 100px;
  height: 30px;
  background-color: #ad8c62;
  color: #61574b;
  text-align: center;
  font-weight: none;
  font-family: Georgia;
  font-size: 10px;
}

.imgwidget1 {
  width: 100px;
  height: 30px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

/*Ici on retrouve un code identique à notre complément de PA, alors touchez uniquement la même chose que tout à l'heure*/
.onglet {
  cursor: pointer;
  font-family: 'MV Boli';
  font-size: 15px;
  text-align: center;
  text-shadow: 1px 1px 0 #62584b;
  border: 2px solid #1d0e14;
  border-bottom: 2px dotted #1d0e14;
}

.onglet_0 {
  background: #E5D5BA;
  border-bottom: 2px solid #1d0e14;
}

.onglet_1 {
  background: #E5D5BA;
}

.contenu_onglet {
  background: #E5D5BA;
  display: none;
  width: 300px;
  height: 146px;
  padding: 8px;
  overflow: auto;
  border: 2px solid #1d0e14;
  color: #61574b;
  font-size: 12px;
  text-align: justify;
}

.wanted {
  background: #E5D5BA;
  width: 320px;
  height: 150px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: center;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
}

.info4 {
  position: relative;
  z-index: 24;
  text-decoration: none;
  font-family: Georgia;
  font-size: 10px;
}

.info4:hover {
  z-index: 25;
}

.info4 span {
  display: none;
}

.info4:hover span {
  display: block;
  position: absolute;
  top: -2em;
  left: -2em;
  width: 150px;
  background-color: #ad8c62;
  color: #61574b;
  text-align: center;
  font-weight: none;
  border: 2px solid #1d0e14;
  font-family: Georgia;
  font-size: 10px;
}

.imgwidget2 {
  border-radius: 50%;
  width: 65px;
  height: 65px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
}

.imgwidget2:hover {
  border-radius: 50%;
  width: 65px;
  height: 65px;
  -moz-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

.tops {
  width: 141px;
  background: #E5D5BA;
  height: 150px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: center;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
  overflow: auto;
}

.news {
  background: #E5D5BA;
  width: 141px;
  height: 150px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: justify;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
  overflow: auto;
}

.meteo {
  background: #E5D5BA;
  width: 320px;
  height: 110px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: justify;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
  overflow: auto;
}

.imgwidget3 {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.systeme_paonglets {
  width: 300px;
  margin: auto;
  text-align: center;
}

.paonglets {
  text-align: center;
}

/*Le style d'affichage des paonglets*/
.paonglet {
  cursor: pointer;
  font-family: 'MV Boli';
  font-size: 15px;
  text-align: center;
  text-shadow: 1px 1px 0 #62584b;
  border: 2px solid #1d0e14;
  border-bottom: 2px dotted #1d0e14;
}

/*Ne pas toucher*/
.paonglet_0 {
  background: #E5D5BA;
  border-bottom: 2px solid #1d0e14;
}

/*Ne pas toucher*/
.paonglet_1 {
  background: #E5D5BA;
}

/*Le style d'affichage du contenu des paonglets*/
.contenu_paonglet {
  margin: auto;
  background: #E5D5BA;
  display: none;
  width: 300px;
/*Ne pas toucher*/
  height: 105px;
/*Ne pas toucher*/
  padding: 8px;
  overflow: auto;
  border: 2px solid #1d0e14;
  color: #61574b;
  font-size: 12px;
  text-align: justify;
}

/*Les codes qui suivent sont pour mon paonglet "Sablier", permettant de donner cet effet glissé sur les images et l'apparition du texte en dessous*/
.cate2 {
  width: 70px;
  height: 70px;
  overflow: hidden;
}

.cate2_img {
  position: relative;
  z-index: 2;
  width: 70px;
  height: 70px;
  margin-left: 0;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  background-color: #ad8c62;
}

.cate2:hover .cate2_img {
  margin-left: 70px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.cate2_description {
  position: relative;
  z-index: 1;
  width: 70px;
  height: 70x;
  margin-top: -70px;
  text-align: center;
  font-size: 11px;
  color: #FAF6F2;
  padding: 2px;
  overflow: auto;
}

/*modifier l'apparence des scrollbars de tout le forum*/
::-webkit-scrollbar {
  width: 5px;
/*largeur de la scrollbar verticale*/
  height: 5px;
/*hauteur de la scrollbar horizontale*/
  background-color: #ad8c62;
}

::-webkit-scrollbar-track {
  background-color: #ad8c62;
/*couleur du fond de la scrollbar*/
}

::-webkit-scrollbar-thumb {
/*la petite bande qui monte/descend*/
  background-color: /*couleur de l'ascenseur*/
#1d0e14;
}
  </style>
</head>
<body>
  <table align="center">
    <tr>
      <td>
        <div class="titre">
          Staff
        </div>
        <div class="staff">
          <span class="info1"><img class="imgwidget" src="IMAGE1" /> <span>TEXTE1 <a href="LIEN1" target="_blank">Profil</a> // <a href="LIEN1" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE2" /> <span>TEXTE2 <a href="LIEN2" target="_blank">Profil</a> // <a href="LIEN2" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE3" /> <span>TEXTE3 <a href="LIEN3" target="_blank">Profil</a> // <a href="LIEN3" target="_blank">MP</a></span></span><br />
          <span class="info1"><img class="imgwidget" src="IMAGE4" /> <span>TEXTE4 <a href="LIEN4" target="_blank">Profil</a> // <a href="LIEN4" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE5" /> <span>TEXTE5 <a href="LIEN5" target="_blank">Profil</a> // <a href="LIEN5" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE6" /> <span>TEXTE6 <a href="LIEN6" target="_blank">Profil</a> // <a href="LIEN6" target="_blank">MP</a></span></span><br />
          <div style="text-align: center;">
            <span class="info2"><img class="imgwidget1" src="IMAGE7" /> <span>TEXTE7 <a href="LIEN7" target="_blank">Profil</a> // <a href="LIEN7" target="_blank">MP</a></span></span>
            <span class="info2"><img class="imgwidget1" src="IMAGE8" /> <span>TEXTE8 <a href="LIEN8" target="_blank">Profil</a> // <a href="LIEN8" target="_blank">MP</a></span></span>
          </div>
        </div>
      </td>
      <td>
        <script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
        </script>
        <div class="systeme_onglets">
          <div align="center" class="onglets">
            <span class="onglet_1 onglet" id="onglet_NomOnglet1" onclick="javascript:change_onglet('NomOnglet1');"> Contexte </span>  <span class="onglet_0 onglet" id="onglet_NomOnglet2" onclick="javascript:change_onglet('NomOnglet2');"> Chronologie </span>  <span class="onglet_0 onglet" id="onglet_NomOnglet3" onclick="javascript:change_onglet('NomOnglet3');"> Nos écoles </span> 
          </div>
          <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_NomOnglet1">
              <!-- Debut 1er onglet -->
              <iframe allowfullscreen="" frameborder="0" src="LIEN%20VIDEO" style="width: 0px; height: 0px; float:left;"></iframe> ICI VOTRE CONTEXTE
            </div><!-- Fin 1er onglet -->
            <div class="contenu_onglet" id="contenu_onglet_NomOnglet2">
              <!-- Debut 2em onglet -->
              ICI VOTRE CHRONO SI VOUS EN AVEZ UNE
            </div><!-- Fin 2em onglet -->
            <div class="contenu_onglet" id="contenu_onglet_NomOnglet3">
              <!-- Debut 3em onglet -->
              SI COMME NOUS VOUS AVEZ D'AUTRES FORUMS OU ALORS TROUVEZ UNE UTILITE A CET ONGLET, OU SUPPRIMEZ LE TOUT SIMPLEMENT ^^
            </div><!-- Fin 3em onglet -->
            <script type="text/javascript">
            //<!--
                var anc_onglet = 'NomOnglet1';
                change_onglet(anc_onglet);
            //-->
            </script>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="titre">
          On les veux
        </div>
        <div class="wanted">
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE1" /> <span>TEXTE1<br />
            <a class="postlink" href="LIEN1" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE2" /> <span>TEXTE2<br />
            <a class="postlink" href="LIEN2" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE3" /> <span>TEXTE3<br />
            <a class="postlink" href="LIEN3" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE4" /> <span>TEXTE4<br />
            <a class="postlink" href="LIEN4" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span><br />
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE5" /> <span>TEXTE5<br />
            <a class="postlink" href="LIEN5" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE6" /> <span>TEXET6<br />
            <a class="postlink" href="LIEN6" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE7" /> <span>IMAGE7<br />
            <a class="postlink" href="LIEN7" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE8" /> <span>TEXTE8<br />
            <a class="postlink" href="LIEN8" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span><br />
         
          <a class="postlink" href="LIEN" rel="nofollow" target="_blank">Découvrir plus de prédéfinis</a>
        </div>
      </td>
      <td>
        <table>
          <tr>
            <td>
              <div class="titre">
                Nos tops-sites
              </div>
              <div class="tops">
                VOS TOP SITES
              </div>
            </td>
            <td>
              <div class="titre">
                News
              </div>
              <div class="news">
                <span style="color: #E7D197;">¤ DATE -</span> VOTRE SUPER NOUVELLE
              </div>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <div class="titre">
          Météo
        </div>
        <div class="meteo">
          <img class="imgwidget3" src="LIEN" style="float:left;" /> ICI SI VOUS VOULEZ METTRE LA METEO ET LA DATE A LAQUELLE SE DEROULE VOTRE RPG, VOUS POUVEZ =D
        </div>
      </td>
      <td>
        <script type="text/javascript">
        //<!--
                function change_paonglet(name)
                {
                        document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                        document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                        document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                        document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                        anc_paonglet = name;
                }
        //-->
        </script>
        <div class="systeme_paonglets">
          <span class="paonglet_1 paonglet" id="paonglet_NomPaonglet1" onclick="javascript:change_paonglet('NomPaonglet1');"> Partenaires </span>  <span class="paonglet_0 paonglet" id="paonglet_NomPaonglet2" onclick="javascript:change_paonglet('NomPaonglet2');"> Crédits </span>  <span class="paonglet_0 paonglet" id="paonglet_NomPaonglet3" onclick="javascript:change_paonglet('NomPaonglet3');"> Sabliers </span>
          <div class="contenu_paonglets">
            <!-- Debut 1er paonglet -->
            <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet1">
              Ici la liste de vos partenaires.
            </div><!-- Fin 1er paonglet -->
            <!-- Debut 2em paonglet -->
            <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet2">
              La PA a été réalisée par <a href="http://mondeandmagiev5.forumactif.org/" target="_blank">Loukoum</a> sur <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>.<br />
              Ici le reste de vos crédits
            </div><!-- Fin 2em paonglet -->
            <!-- Debut 3em paonglet -->
            <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet3">
              <table>
                <tr>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE1" /></div>
                      <div class="cate2_description">
                        TEXTE 1
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE2" /></div>
                      <div class="cate2_description">
                        TEXTE 2
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE3" /></div>
                      <div class="cate2_description">
                        TEXTE 3
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE4" /></div>
                      <div class="cate2_description">
                        TEXTE 4
                      </div>
                    </div>
                  </td>
                </tr>
              </table>
              <div style="text-align: center;">
                ICI UN PETIT TEXTE SI VOUS LE VOULEZ
              </div>
            </div><!-- Fin 3em paonglet -->
          </div>
          <script type="text/javascript">
          //<!--
                var anc_paonglet = 'NomPaonglet1';
                change_paonglet(anc_paonglet);
          //-->
          </script>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>



Etape 2 - Mettre la PA en place
Pour cela il vous suffit d'aller dans: PA > Affichage > Généralités, et de copier ce code =D
Code:
 
<div style="font-size: 40px; font-family: Mistral; text-align: center;">
                             Bienvenue sur TITRE DE VOTRE FORUM, {USERNAME} !                         
</div><br /><br /> 
<div style="font-size: 18px; font-family: 'Monotype Corsiva'; text-align: center;">
                             <a href="LIEN" class="postlink" target="_blank" rel="nofollow">~ Guide du débutant ~</a><br /><a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Règlement</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Contexte</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Bottin des Avatars</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> 
</div>
  <iframe src="ICI LE LIEN DE LA PAGE HTLM DE VOTRE PA" frameborder="0" scrolling="no" style="margin: auto; width: 700px; height: 570px;"></iframe>


Et voilà =D
Félicitation pour avoir survécu   :friends:

Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Vos commentaires et remerciements sont toujours bienvenus ^^
Si vous avez des problèmes avec ce LS, venez poster ici.

Onyx

Signature à onglets - Jeu 25 Sep 2014 - 2:56




LS - Signature à onglets


Voici un petit LS de signature à onglets j'ai fait pour la demande de Madii-x.

Pour voir l'aperçu de l'onglet "Signature" : cliquez ici.
Pour voir l'aperçu de l'onglet "Cadeaux" : cliquez ici.
Pour voir l'aperçu de l'onglet "Moi" : cliquez ici.

Ce LS est en deux parties.
  • Tout d'abord, nous allons créer notre signature dans une page html.
  • Puis, nous allons mettre l'iframe qui contient la page html dans notre signature.

  • Puisqu'on se sert d'une page html, il que vous ayez votre propre forum pour héberger la page html ou que votre administrateur accepte de le faire sur son propre forum.

  • Il ne faudrait pas que l'image de l'onglet "signature" dépasse 500x200 pixels.

  • L'image dans l'onglet "moi" a une hauteur de 180 pixels.
Merci de ne pas enlever le crédit vers Never-Utopia.



1. Le corps de la signature (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre signature.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)"
On choisit un nom, comme "Signature de NOM" par exemple.
Enfin, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Signature</title>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />
<script type="text/javascript">
        //<!--
                function change_ongletii(name)
                {
document.getElementById('ongletii_'+anc_ongletii)
.className = 'ongletii_0 ongletii';
document.getElementById('ongletii_'+name).
className = 'ongletii_1 ongletii';
document.getElementById('contenu_ongletii_'+anc_ongletii)
.style.display = 'none';
document.getElementById('contenu_ongletii_'+name).
style.display = 'block';
                        anc_ongletii = name;
                }
        //-->
</script>
<style type="text/css">
/*Fond par HTML*/
body {
  margin: 0px;
}

/*Tableau qui entoure la sign*/
.signii {
  border: 1px solid #fe285a;
  width: 502px;
  height: 218px;
}
 
/*Onglets*/
.ongletii {
  background: #fe285a;
  height: 20px;
  font-size: 16px;
  color: white;
  font-family: abel;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid #fe285a;
}
/*Onglet au survol*/
.ongletii_0:hover {
  cursor: pointer;
}
/*Onglet actif*/
.ongletii_1 {
  background: #c8254b;
}
 
/*Contenu des onglets*/
.contenu_ongletii {
  background: url('http://i39.servimg.com/u/f39/18/85/39/07/transi10.jpg');
  display: none;
  font-family: abel;
  color: #fe285a;
  font-size: 14px;
}
 
/*Contenu onglet SIGNATURE*/
.inside_1 {
  height: 200px;
}

/*Contenu onglet CADEAUX*/
.inside_2 {
  overflow: auto;
  height: 200px;
}

/*Contenu onglet MOI*/
.inside_3 {
  padding: 9px;
  padding-right: 0px;
  height: 182px;
}

/*Image dans contenu onglet MOI*/
.imgii {
  float: left;
  height: 180px;
  border: 1px solid #fe285a;
  margin-right: 10px;
}
 
/*Texte dans contenu onglet MOI*/
.textii {
  height: 172px;
  padding-right: 10px;
  text-align: justify;
  overflow: auto;
}

/*Liens dans contenu onglet MOI en bas*/
.linksii a {
  display: inline-block;
  color: #fe285a;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none!important;
  margin-right: 20px;
  margin-bottom: -8px;
}
/*Liens au survol dans contenu onglet MOI en bas*/
.linksii a:hover {
  color: #7a162d;
  font-size: 14px;
}
</style>
</head>
<body>
  <table align="center" border="0" cellpadding="0" cellspacing="0" class="signii"><tr>
    <td width="33%">
      <div onmouseover="javascript:change_ongletii('1er');" id="ongletii_1er" class="ongletii_1 ongletii">
        Signature
      </div>
    </td>
    <td width="34%">
      <div onmouseover="javascript:change_ongletii('2eme');" id="ongletii_2eme" class="ongletii_0 ongletii">
        Cadeaux
      </div>
    </td>
    <td width="33%">
      <div onmouseover="javascript:change_ongletii('3eme');" id="ongletii_3eme" class="ongletii_0 ongletii">
        Moi
      </div>
    </td></tr><tr>
    <td colspan="3">
      <div id="contenu_ongletii_1er" class="contenu_ongletii">
        <div align="center" class="inside_1">
          Contenu de l'onglet "Signature"
        </div>
      </div>
      <div id="contenu_ongletii_2eme" class="contenu_ongletii">
        <div align="center" class="inside_2">
          Contenu de l'onglet "Cadeaux"
        </div>
      </div>
      <div id="contenu_ongletii_3eme" class="contenu_ongletii">
        <div class="inside_3">
          <img src="URL DE L'IMAGE DE L'ONGLET MOI" alt=" " class="imgii" />
          <div class="textii">
            Texte de l'onglet moi.
          </div>
          <div align="right" class="linksii">
            <a href="LIEN VERS LE PROFIL" target="_blank">Profil</a>
            <a href="LIEN VERS LES MP" target="_blank">MP</a>
            <a href="http://www.never-utopia.com/t51249-signature-a-onglets" target="_blank">N-U</a>
          </div>
        </div>
      </div>
    </td></tr>
  </table>
<script type="text/javascript">
        //<!--
                var anc_ongletii = '1er';
                change_ongletii(anc_ongletii);
        //-->
</script>
</body>
</html>


Changer les images/texte
Si jamais vous voulez changer ce qu'il y a dans les onglets, c'est indiqué par "contenu de l'onglet signature", "contenu de l'onglet cadeaux", "URL DE L'IMAGE DE L'ONGLET MOI", "texte de l'onglet moi", etc... Je vous fais confiance pour vous y retrouver Wink

Modifier les onglets pour qu'ils changent au clic
Il vous suffit de trouver tous les endroits où il est indiqué "onmouseover" et de le remplacer par "onclick".

Comment modifier le style ou la mise en forme
Dans ce code, il y a aussi du CSS qui met en forme la signature. Si vous voulez modifier la police, les couleurs ou autres éléments de mise en forme, c'est là qu'il faudra le faire. Le CSS est entre les balises suivantes :
Code:
<style type="text/css">
VOTRE CSS EST ICI
</style>


Lorsque vous modifiez votre signature, il faut cliquer sur l'engrenage où c'est inscrit "HTML", pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.



1. Mettre l'iframe (espace signature)


Maintenant que la page HTML est créée avec votre signature à l'intérieur, on va aller la mettre dans votre profil à l'aide d'un iframe.

Pour cela, nous allons aller dans :
> PROFIL
> > SIGNATURE

Puis, nous allons mettre le code suivant :
Code:
<iframe src="LIEN DE LA PAGE HTML" style="display: block; margin: auto; height: 230px; width: 510px; border: none;"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, notre signature), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec un tutoriel".

À plus !

Créer des onglets onclick en full CSS3 (ex: fiche de présentation) - Jeu 17 Juil 2014 - 14:58



Onglets en full CSS3



Mais oui je vous bombarde de tutos! Maintenant, un petit tuto qui fait suite à mon tuto sur le slideshow, bien que je vais prendre tous les points dont j'ai parlé dans le tuto des slideshow. Donc pas de panique: je ne vous demande pas d'avoir lu quoi que ce soit avant de lire ce tuto!


Toutes versions ▬ CSS3 & HTML5


Voici une rapide explication de comment le tuto est découpé: tout d'abord, je vais parler du principe général que j'utilise pour faire les onglets, pour vous expliquer rapidement comment ça marche. Ensuite, je passerais par un exemple pour montrer ce qu'on peut faire. Pour ce faire, je vais créer une fiche de présentation, car en effet, contrairement au Javascript qui n'est pas utilisable dans les messages,  le CSS3, lui, l'est! Du coup je découperais la deuxième partie en deux: la première sur le HTML et la seconde sur le CSS!

J'espère que je serais assez claire dans ce tuto, mais en cas de doute, n'hésitez pas à utiliser la section des problèmes en codage!


Le principe général


Comme vous pouvez vous l'imaginer, mon but était ici de créer des ognlets similaires au Javascript, c'est à dire qu'on a pas à chaque fois un "nouveau lien" pour chaque onglet qu'on ouvre, contrairement aux :target. C'est pour ça qu'en écrivant sur le slideshow à l'aide des input et des labels, j'ai vite eu l'idée de l'adapter au principe des onglets.

Le principe est très simple, et pour cela, il faut que je vous explique deux choses: ce qu'est le sélecteur ~ et ce qu'est la pseudo-élément :checked! (Vous retrouverez la même explication dans mon tuto sur le slideshow, mais ici, elle est "en clair" Wink )

Le pseudo-élément :checked
Le pseudo-élément checked est utilisé dans le CSS pour les formulaires, plus particulièrement pour les input de types radios (les petits ronds pour les votes quand vous ne pouvez voter que pour un choix) ou pour les types choix multiples (quand vous pouvez voter pour plusieurs choix). Ici, dans notre tutoriel, nous utiliserons uniquement des input de type radio (car on ne veut qu'un seul onglet à la fois).
En gros, :checked nous permet de voir si un input a été coché ou non. En somme, si nous avons par exemple ceci:
Code:
<input name="fiche" id="physique" type="radio" />

Si dans mon CSS je mets ceci:
Code:
#physique:checked ~ label {
color: white;
}

Cela veut dire que quand physique est coché, alors tout label frère sera blanc.

"Eh!" me direz-vous "mais je sais pas ce que c'est ce  ~ moi!". Bah oui, mais j'y arrive! =P

Cependant, tout ce que vous avez à retenir de :checked, c'est qu'on regarde lequel a été coché (d'input) et on agit en conséquence.


Le sélecteur ~
Ce sélecteur signifie "l'élément frère le plus proche".
Mais qu'est un élément frère? Eh bien ce sont des éléments qui sont "sur la même ligne verticale" ou plutôt, qui ont la même grandeur d'encapsulation. Cependant, même comme ça, ça ne doit pas vous dire grand chose, alors voici des exemples:

Exemple:
Code:
<div id="un">
 <div id="deux">
 </div>
</div>

Ici, un est l'élément père de deux, et deux est l'élément fils de un.
Code:
<div id="un">
</div>
<div id="deux">
</div>

Ici, un est deux sont des éléments frères.

En somme, si votre code est bien indenté, il est facile de voir quels éléments sont des frères/sœurs, et lesquels sont des parents/enfants les uns des autres. En effet, les frères/sœurs seront sur le même niveau, et les parents/enfants seront sur des niveaux différents!
Il est à noter que seul les deux éléments qui entourent le ~ doivent être des frères! On peut bien sûr faire appel à d'autres classes avant pour l'élément à gauche du sélecteur (par exemple si on veut sélectionner une class mais à un endroit spécifique du code, par exemple dans un id spécifique) ou alors plus bas dans la hiérarchie pour celui à droite du sélecteur. Par exemple .hallow #machin p .important ~.livres #chouette marche, tanr que .important (qui est le fils d'un p qui lui-même est le fils de #machin, qui lui-même est le fils de .hallow) est frère de .livres, le code va marcher, et effectivement s'exécuter sur #chouette qui se trouve dans .livres!


Et voilà, maintenant que vous connaissez ces deux petites choses, on peut commencer avec les choses sérieuses!
Tout d'abord, commençons donc avec une div tout simple, qui va entourer tout notre système d'onglets. C'est important, car cela nous permettra de facilement appeler par le CSS les input, si on ne veut pas mettre une class.
Ensuite, nous allons créer autant de input que nous voulons d'onglet, en leur donnant à chacun un id particulier. Je rappelle qu'un id est UNIQUE, donc ne doit pas se trouver ailleurs sur la page!
Pour vous donner un exemple, j'utilise déjà la fiche de présentation que je vais faire plus tard. Pour elle, j'ai cinq onglets, donc cinq input! Ils seront tous de type radio, et auront le même nom: la seule chose qui les différencie est l'id.

Code:
<div class="fiche"><!-- Ceci est donc la div qui va contenir l'ensemble du système d'onglets. -->
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
</div>



Maintenant: tout ce que vous ajoutez, mais surtout tout ce que vous voulez pouvoir change au click sur l'onglet doit se trouver en dessous des input. En effet, grâce au sélecteur que nous avons vu plus tôt, nous pourrons facilement choisir tout et n'importe quoi qui se trouve à la SUITE des input.
Du coup, je vous conseille toujours mettre les input tout en haut de votre conteneur principal d'onglets, le reste, même s'il ne change pas au gré des onglets, pourra être après: ça ne rajoute pas des lignes de CSS, ce n'est pas plus difficile, etc.

Bref, maintenant que nous avons nos input, nous devrions ajouter nos label. Les labels, ce sont les "boutons" qui vont nous permettre d'aller à un onglet à un autre. En effet, lorsqu'un label qui correspond à un input, est cliqué, eh bien c'est comme si on avait coché l'input correspondant. Cela vous rappelle quelque chose? Eh bien oui! C'est ce qui va nous permettre "d’appeler" le :checked dans le CSS!
Pour faire correspondre un lable à n input, il suffit de mettre dans l'attribut "for" du label, l'id de l'input correspondant.
Cependant, pour la pratique, vous devriez mettre tous les labels dans une seule et meme div d'une certaine classe, notamment si vous voulez leur donner à tous ne même allure lorsqu'ils sont actif, non actifs ou au passage de la souris!

Donc niveau code, on aurait ça:

Code:
<div class="fiche">
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
</div>


Vous voyez également que je leur ai donné à chacun deux classes (mettre class="lab hist" par exemple, signifie que l'élément est à la fois de la classe lab ET de la classe hist).

Maintenant, il vous suffit de placer tout ce que vous voulez dans vos onglets avant ou même après les label mais toujours après les input. Je vous conseillerais cependant de toujours mettre un div conteneur de tout les trucs changeant dans vos onglets pur facilement leur donner des position, ou des changements globaux, comme la taille, etc.
Pour mon code futur, j'aurais quelque chose comme ça:

Code:
<div class="fiche">
<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
<div class="images"><!--  Ici des images qui changeront à chaque onglet --></div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="contenu_onglet"><!--  Ici des div contenant mes contenus (description physique, infos, etc) --></div>
</div>



Maintenant, parlons rapidement du CSS.
Tout d'abord, il faut savoir que les inut ne nous sont utiles à rien "visuellement" parlant. C'est pru cela que la première chose qu'on va faire, c'est de les "cacher" à l'aide d'un display. Cependant, attention de ne pas le faire sur les input seul, mais uniquement sur les input de votre fiche, ou sinon, vous serez incapable de créer des sujets ou envoyer des messages, vu que les boutons envoyer, prévisualiser et les titres sont TOUS des input.
Donc pour l'instant on a ça:

Code:
.fiche input {
  display: none;
}



Maintenant, pour ce qui est de l'effet lors du click du bouton de l'onglet, c'est ici qu'on va utiliser le sélecteur ~ tout comme :checked. Prenons par exemple, si je veux modifier le label "Infos" quand je clique dessus, pour bien indiquer que c'est sur CE label que je suis (comme l'onglet actif en Javascript) il me suffit d'écrir:

Code:
#informations:checked ~ .boutons .lab.infos { color: red; }


Ici, je dis: lorsque l'élément à id informations et coché (checked) alors le plus proche frère de classe boutons, verra son fils de classe lab ET infos modifié ainsi: sa couleur deviendra rouge.

C'est le même principe avec tout! Imaginons que j'ai une image de class="imag infos" que je veux aussi modifier lorsque #informations:checked, alors j'écris:

Code:
#informations:checked ~ .images .imag.infos { opacity: 1; }



Bien sûr, il faudrait de façon optimale qu'à la "base", c'est à dire que quand le label est non-coché, l'élément qui sera modifié (dans nos deux exemples le label d'informations puis l'image d'informations) ait une autre allure, et si possible, tous la même.  On pourrait par exemple penser à une opacité à 0 pour toutes les images quand l'input correspondant n'est pas coché, ou un display: none pour le contenu des onglets. C'est pour cela que les "double classes" sont utiles: dans mon exemple, j'aurais toutes les images qui seront de classe imag, et chacune des images aura une classe supplémentaire différente: infos, phys, car, hist et ecr. Cela me permettra donc de donner une allure générale à toutes mes images en mettant un:

Code:
.fiche .images .imag {
  opacity: 0;
  transition: all ease 1s;
]


Qui me permet de toutes les rendre invisibles, et le code plus haut me permet de les rendre visible seulement quand le on input est coché.

J'espère donc que tout ceci est assez claire: c'est vraiment la base de ce qu'il faut savoir, et si vous avez compris, l'exemple à la suite ne vous sera pas nécessaire. Cependant, si vous n'avez pas très bien compris, j'espère que l'exemple qui va suivre sera assez compréhensible pour que vous puissiez faire par vous même par la suite!


Exemple: faire une fiche de présentation


Pour cette exemple voilà ce que je vais vous montrer comment faire. Comme vous pouvez le voir, les labels sont donc les différentes parties usuelles d'une présentation (Infos, Physique, Caractère, Histoire et Derrière l'écran) et autant le texte interne que l'image du haut change.
Si vous avez bien lu ce qu'il y a plus haut, vous pouvez vous imaginer plus ou moins comment j'ai fait tout ça mais malgré tout, je vais vous expliquer pas à pas!

Le HTML


Rappelez-vous plus haut, j'ai dit que ma base était ceci:

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images"></div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>
</div>

J'ai juste renommé contenu_onglets par interne.

Vu que je veux en faire une fiche de présentation, je vais tout de suite ajouter deux choses: le Nom et Prénom et une petite citation:

Code:
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>


Ce qui donne, sachant que je veux mettre le nom sous l'image et qui "empiète" sur l'image:

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images"></div>
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>
</div>



Maintenant, il est temps de rajouter les images. Je vais créer des div avec deux classes, comme expliqué plus haut: la class imag pour chacune d'entre elle, et leur classe qui leur est "propre" qui va me permettre de la changer au gré de boutons.

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images">
<div class="imag infos" style="background-image: url('http://38.media.tumblr.com/baa66b83079e0cfb94328d9d721b7acc/tumblr_n8ucrv9CWu1taqwcpo5_500.gif');"></div>
<div class="imag phys" style="background-image: url('http://33.media.tumblr.com/6406227aace1b8d25a5c94c4fae05f04/tumblr_n8ucrv9CWu1taqwcpo6_500.gif');"></div>
<div class="imag car" style="background-image: url('http://33.media.tumblr.com/4cba62a69dc06430c78675a25b783669/tumblr_n8ucrv9CWu1taqwcpo9_500.gif');"></div>
<div class="imag hist" style="background-image: url('http://31.media.tumblr.com/22f282d3778e8ec3811cd6c82fa8977f/tumblr_n8ucrv9CWu1taqwcpo8_400.gif');"></div>
<div class="imag ecr" style="background-image: url('http://media.tumblr.com/tumblr_lnmvmtBDbM1qm00hqo1_500.gif');"></div>
</div>
<h1>Prénom Nom</h1>
<div class="citation">« Une jolie petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"></div>


Vous remarquerez que j'ai mit tout de suite dans la balise style l'image de fond. De cette façon, les membres pourront changer les images comme bon leur semble. C'est aussi la raison pour laquelle j'ai mit des balises div et non pas des balises img, car on ne sait jamais la taille des images que vont nous donner les membres. Je redimensionne ici la largeur automatiquement dans le CSS, mais je déteste donner une hauteur et une largeur fixe, qui déformerait alors les images. Je préfère donc mettre une div. C'est donc une préférence personnelle: vous n'êtes pas obligés de faire comme moi.

Maintenant, rajoutons les div qui contiendront nos descriptions physique, mental, l'histoire et les infos (tant RP que joueur). Ce sera le même principe que celui des images: je donne une classe générale à tous mes contenus qui s'appelle justement contenu et une class qui leur est spécifique. Vu que je n'utilise jamais les classes spécifiques aux images ou au contenu seules pour quoi que ce soit, et que j'écris toujours dans CSS leur deux classes (donc par exemple .imag.infos ou .contenu.info et jamais .infos seul) j'ai mit la même classe "spécifique" tant à l'image qu'au contenu correspondant.
J'ai le droit de le faire: une classe n'est pas un id, et donc, n'a pas à être unique! Cependant, faites bien attention de ne PAS spécifier dans le CSS de choses pour els classes communes à des choses qui n'ont rien à voir, mais bien d'utiliser les deux classes qui les décrivent!

Quoiqu'il en soit, voilà tout le HTML maintenant que j'ai ajouté le contenu de chaque onglet:

Code:
<div class="fiche"><input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" /><div class="images">
<div class="imag infos" style="background-image: url('http://38.media.tumblr.com/baa66b83079e0cfb94328d9d721b7acc/tumblr_n8ucrv9CWu1taqwcpo5_500.gif');"></div>
<div class="imag phys" style="background-image: url('http://33.media.tumblr.com/6406227aace1b8d25a5c94c4fae05f04/tumblr_n8ucrv9CWu1taqwcpo6_500.gif');"></div>
<div class="imag car" style="background-image: url('http://33.media.tumblr.com/4cba62a69dc06430c78675a25b783669/tumblr_n8ucrv9CWu1taqwcpo9_500.gif');"></div>
<div class="imag hist" style="background-image: url('http://31.media.tumblr.com/22f282d3778e8ec3811cd6c82fa8977f/tumblr_n8ucrv9CWu1taqwcpo8_400.gif');"></div>
<div class="imag ecr" style="background-image: url('http://media.tumblr.com/tumblr_lnmvmtBDbM1qm00hqo1_500.gif');"></div>
</div>
<h1>Prénom Nome</h1>
<div class="citation">« Une toute petite citation »</div>
<div class="boutons"><label for="informations" class="lab infos">Infos</label> <label for="physique" class="lab phys">Physique</label> <label for="caractere" class="lab car">Caractère</label> <label for="histoire" class="lab hist">Histoire</label> <label for="ecran" class="lab ecr">Derrière l'écran</label> </div>
<div class="interne"><div class="contenu infos">Hello, mon nom c'est [b]Mushu[/b] et je suis la [strike]mascotte[/strike] l'esprit animal de la famille Fa. En gros [b]je suis un peu pauvre[/b] parce qu'on m'oblige à m'occuper des vieux esprits de la famille Fa et c'est hyper chiant. Sinon [b]je suis vraiment très vieux[/b], mais genre, super vieux. Et [b]j'adore les pancakes, Mulan et les blagues pas drôles[/b] et je déteste [b]ce satané [strike]Cricket[/strike], les Huns et le faite que je sois si petit[/b].
Sinon [b]j'ai comme signe particulier le faite que je sois un dragon orange et très petit[/b]. Mon plus grand secret [b]ne vous regarde pas[/b]!</div>
<div class="contenu phys">Ici la description physique. </div>
<div class="contenu car">Ici la description du caractère</div>
<div class="contenu hist"> Ici l'histoire</div>
<div class="contenu ecr">Ici les informations joueurs</div></div>
</div>


Il est à noter que j'ai également deux link de polices de Google Fonts qui sont ajoutées à ma présentation, mais vus devriez les mettre dans votre overall_header. Ces deux polices sont Abel et Lobster.


Le CSS


Maintenant, il est temps de passer au CSS de ma fiche!

Tout d'abord, on va mette en forme la fiche de façon tout à fait normale. Du coup, ça ne tient que du CSS dont vous avez l'habitude et de mettre la fiche en forme comme on veut.

Tout d'abord, on va cacher les input en haut de fiche. On ne veut pas qu'ils apparaissent, parce qu'ils sont un peu moche, mais aussi et surtout parce qu'ils ne sont pas utiles. On  a donc ceci:

Code:
/* On cache les input */
.fiche > input { display: none; }



Ensuite, je crée la fiche. Bords arrondis, un fond, une taille, je la centre. Rien de bien compliqué.

Code:
/* On met en place la fiche et son image de fond */
.fiche {
  position: relative;
  width: 500px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  background: url('http://image.noelshack.com/fichiers/2015/53/1451484327-img-thing.jpg');
  background-size: 150px;
}



Maintenant, je vais aussi mettre en forme tous els "invariants" de la fiche. C'est à dire, tout ce qui ne va pas changer au gré des onglets. Pour moi, c'est le titre et la citation. Je les mets donc en forme:

Code:
/* Mise en forme du titre de la fiche */
.fiche > h1 {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0px;
  margin-top: -34px;
  text-align: center;
  font-weight: normal;
  font-family: 'Lobster';
  font-size: 30px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* Mise en forme de la citation de la fiche */
.fiche .citation {
  width: 100%;
  padding-bottom: 2px;
  background: #BA2F23;
  text-align: center;
  font-family: 'Abel';
  font-size: 15px;
  font-style: italic;
  line-height: 20px;
  color: white;
  text-shadow: 1px 1px 1px black;
}




Maintenant, on a les labels (qui sont donc nos titre des onglets), ainsi que le contenu à mettre en forme. Là, ça devient un peu plus corsé, parce qu'on veut que ça change.
Cependant, ce n'est pas si compliqué que cela. En effet, on va mettre en forme simplement comme s'il n'y avait pas d'onglets. Donc on va simplement mettre en forme les différents éléments, comme si on faisait une fiche normale.

Je commence par les images. Je vais donc leur donner des tailles (vu qu'elles sont dans des div), ainsi que de mettre une taille pour l'image de fond. Je les place alors toutes au bon endroit.

Petite subtilité ici: j'ai le conteneur "images" que je emts en relative, simplement parce que je veux créer un effet d'apparition en fondu pour les onglets. Du coup, il faut que toutes mes images ("imag") à l'intérieur aient une position absolue et se trouve au même endroit.

Pourquoi? Eh bien tout simplement parce que je devrais ensuite les mettre en opacité 0, mais que cela ne va pas les "effacer". C'est à dire qu'elles feront toujours la même taille, et donc, resteront à la même "place".
Si vous voulez éviter ceci, et que vous ne souhaitez pas forcément d'effet de fondu, vous pouvez tout simplement utiliser à la place de mes opacity et visibility, un display: none; puis un display: block; pour refaire apparaître.

Notez que cela sera pareil pour mes contenus plus bas.


Je mets également tout de suite l'opacité à 0 et la visibilité à invisible. En effet, je ne veux faire apparaître mes images que lorsque le bon onglet est sélectionné. Cependant, si vous voulez voir le résultat pour votre fiche avant d'avoir activé les onglets, juste pour voir à quoi ça ressemble, vous pouvez effacer ces deux lignes.

Code:
/* Mise en place la partie qui contient les images */
.fiche .images {
  position: relative;
  width: 500px;
  height: 220px;
}

/* Mise en place des images. On les cache également de base */
.fiche .images .imag {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 220px;
  background-size: 500px;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}



Mettons également les lables, ou les titres d'onglets, en forme. Ici, on les met en forme quand les onglets sont non-sélectionnés, mais aussi lorsqu'on passe la souris sur eux. Je mets également le cursor: pointer;  pour que l'on voie que le label est cliquable, et représente donc un onglet.
Avec l'aide de mon conteneur "boutons" je vais aussi faire en sorte que les labels soient bien centrés.

Code:
/* On met les labels au centre */
.fiche .boutons { text-align: center; }

/* Mise en forme des labels/titre des onglets normal */
.fiche .boutons label {
  margin-left: 6px;
  margin-right: 6px;
  color: white;
  font-size: 23px;
  font-family: 'Abel';
  cursor: pointer;
  text-shadow: 1px 1px 1px black;
  transition: all ease 0.5s;
}

/* Effet au survol des labels */
.fiche .boutons label:hover {
  color: #EAFF05;
  transition: all ease 0.5s;
}



À présent, je vais mettre en place et en forme la partie de la contenue de ma fiche. Tout d'abord, vu que je veux un effet d'apparition en fondu, je dois donner une hauteur à mon contenuer "interne" et le mettre en position relative. Les "contenu" devront également avoir une hauteur prédéfinie et un overflow: auto; pour que le texte ne dépasse pas. Comme pour les images, je les mets tout de suite l'opacité à 0 et la visibilité à invisible, vu que je ne veux faire apparaître mon contenu que lorsque le bon onglet est sélectionné.

Si vous n'aimez pas les barres de navigation/scroll pour les longs contenus, vous pouvez très bien supprimer le positionnement absolu des "contenu" et plutôt que d'utiliser opacity: 0; et visibility: hidden;, vous pouvez utiliser display: none;. Vous n'aurez cependant plus d'apparition en fondu.

Code:

/* On met en place le bloc qui va contenir le contenu de chaque onglet */
.fiche .interne {
  position: relative;
  width: 90%;
  height: 300px;
  margin: auto;
  border-radius: 10px;
  background: white;
  box-shadow: 1px 1px 10px grey inset;
  font-family: 'Abel';
  font-size: 15px;
  color: black;
}

/* On met en place et en forme le contenu de chaque onglet */
.fiche .interne .contenu {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 90%;
  height: 260px;
  padding: 10px;
  margin: auto;
  overflow: auto;
  text-align: justify;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}



Enfin, dernière partie de la mise en forme de base: je vais mettre un petit effet sur ce que je mets en gras dans la fiche. Je veux une autre couleur.

Code:
/* Petit effet sur les b: on change la couleur */
.fiche .interne strong { color: #BA2F23; }



Il est donc temps de modifier selon quel onglet est changé. En fait, c'est très simple à comprendre avec les explications de plus haut. Vu qu'on a bien fait en sorte que les input soient frères aux classes "boutons", "images" et "interne", il suffit pour chaque bon input/onglet (donc ce qu'on a décrit avec une id, qui deviendra donc #informations ) de faire apparaître ou modifier le bon élément.

Ici, vu qu'on a utilisé des classes similaires pour chaque éléments (donc .infos, .phys, .car, .hist et .ecr), on a n'a qu'à changer la classe qui précède. Pour plus de sécurité cependant, j'ai utilisé la "double-classe" comme ceci: .lab.infos. Cependant, au lieu de .fiche #informations:checked ~ .boutons .lab.infos vous auriez pu simplement écrire .fiche #informations:checked ~ .boutons .infos.

Si vous avez décidé d'utiliser le display: none; plutôt que l'opacité et la visibilité, n'oubliez pas ici d'utiliser un display: block; plutôt que le code actuel!


Code:

/* Fait le changement de style sur les labels sélectionnés */
.fiche #informations:checked ~ .boutons .lab.infos,
.fiche #physique:checked ~ .boutons .lab.phys,
.fiche #caractere:checked ~ .boutons .lab.car,
.fiche #histoire:checked ~ .boutons .lab.hist,
.fiche #ecran:checked ~ .boutons .lab.ecr {
  font-family: 'Lobster';
  color: #EAFF05;
}

/* Fait apparaitre l'image de l'onglet sélectionné */
.fiche #informations:checked ~ .images .imag.infos,
.fiche #physique:checked ~ .images .imag.phys,
.fiche #caractere:checked ~ .images .imag.car,
.fiche #histoire:checked ~ .images .imag.hist,
.fiche #ecran:checked ~ .images .imag.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}

/* Fait apparaitre le contenu de l'onglet sélectionné */
.fiche #informations:checked ~ .interne .contenu.infos,
.fiche #physique:checked ~ .interne .contenu.phys,
.fiche #caractere:checked ~ .interne .contenu.car,
.fiche #histoire:checked ~ .interne .contenu.hist,
.fiche #ecran:checked ~ .interne .contenu.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}



Voici donc le CSS complet et commenté:

Code:

    /************************************************ FICHE ************************************************/
/* On met en place la fiche et son image de fond */
.fiche {
  position: relative;
  width: 500px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  background: url('http://image.noelshack.com/fichiers/2015/53/1451484327-img-thing.jpg');
  background-size: 150px;
}

/* On cache les input */
.fiche > input { display: none; }

/* Mise en place la partie qui contient les images */
.fiche .images {
  position: relative;
  width: 500px;
  height: 220px;
}

/* Mise en place des images. On les cache également de base */
.fiche .images .imag {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 220px;
  background-size: 500px;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}

/* Mise en forme du titre de la fiche */
.fiche > h1 {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0px;
  margin-top: -34px;
  text-align: center;
  font-weight: normal;
  font-family: 'Lobster';
  font-size: 30px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* Mise en forme de la citation de la fiche */
.fiche .citation {
  width: 100%;
  padding-bottom: 2px;
  background: #BA2F23;
  text-align: center;
  font-family: 'Abel';
  font-size: 15px;
  font-style: italic;
  line-height: 20px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* On met les labels au centre */
.fiche .boutons { text-align: center; }

/* Mise en forme des labels/titre des onglets normal */
.fiche .boutons label {
  margin-left: 6px;
  margin-right: 6px;
  color: white;
  font-size: 23px;
  font-family: 'Abel';
  cursor: pointer;
  text-shadow: 1px 1px 1px black;
  transition: all ease 0.5s;
}

/* Effet au survol des labels */
.fiche .boutons label:hover {
  color: #EAFF05;
  transition: all ease 0.5s;
}

/* On met en place le bloc qui va contenir le contenu de chaque onglet */
.fiche .interne {
  position: relative;
  width: 90%;
  height: 300px;
  margin: auto;
  border-radius: 10px;
  background: white;
  box-shadow: 1px 1px 10px grey inset;
  font-family: 'Abel';
  font-size: 15px;
  color: black;
}

/* On met en place et en forme le contenu de chaque onglet */
.fiche .interne .contenu {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 90%;
  height: 260px;
  padding: 10px;
  margin: auto;
  overflow: auto;
  text-align: justify;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}

/* Petit effet sur les b: on change la couleur */
.fiche .interne strong { color: #BA2F23; }

/* Fait le changement de style sur les labels sélectionnés */
.fiche #informations:checked ~ .boutons .lab.infos,
.fiche #physique:checked ~ .boutons .lab.phys,
.fiche #caractere:checked ~ .boutons .lab.car,
.fiche #histoire:checked ~ .boutons .lab.hist,
.fiche #ecran:checked ~ .boutons .lab.ecr {
  font-family: 'Lobster';
  color: #EAFF05;
}

/* Fait apparaitre l'image de l'onglet sélectionné */
.fiche #informations:checked ~ .images .imag.infos,
.fiche #physique:checked ~ .images .imag.phys,
.fiche #caractere:checked ~ .images .imag.car,
.fiche #histoire:checked ~ .images .imag.hist,
.fiche #ecran:checked ~ .images .imag.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}

/* Fait apparaitre le contenu de l'onglet sélectionné */
.fiche #informations:checked ~ .interne .contenu.infos,
.fiche #physique:checked ~ .interne .contenu.phys,
.fiche #caractere:checked ~ .interne .contenu.car,
.fiche #histoire:checked ~ .interne .contenu.hist,
.fiche #ecran:checked ~ .interne .contenu.ecr {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}

NyoTheNeko

Slideshow full CSS3 sans :target ! - Sam 12 Juil 2014 - 17:27



Slideshow full CSS3





   
Ceci est un tuto, optimal pour une PA, crée suite à la Demande d'SatoruMasao, ici.
Notez, en tant que petit disclaimer, que je ne sors pas tout ça de mon chapeau. Vous trouverez en lien le slideshow que j'ai prit en base, qui montrait comment ne pas utiliser les :target mais plutôt les input et label (ce qui évite de faire comme une "nouvelle page" et permet de cliquer sur le bouton de "précédent" du navigateur pour vraiment aller sur la page précédente et non pas l'id du slide précédent.


Toutes versions ▬ CSS3 & HTML5 ▬ Ce que ça donne


   
Notez que je vais donc vous montrer comment faire autant le slideshow simple, que les personnages avec la petite bulle qui apparait au passage de la souris! Cependant, vous n'êtes pas obliger de mettre forcément des render de personnages et des petits bulles, mais pouvez très bien remplir d'autres choses! En gros, cela dépend fortement de votre imagination et de vos compétences. Le cas échéant, la section des problèmes est là pour vous aider!




Le slideshow de base


Avant de commencer à s'amuser à mettre les petites bulles d'informations sur les personnages ou même quoi que ce soit d'autres, il faudrait tout d'abord commencer à créer le slideshow de base, c'est à dire, le conteneur, les slides (de simples div pour l'instant) et les flèches avec l'animation qui devrait y avoir.

Je vais aller étape par étape, mais tout de même montrer tout le HTML avant de montrer tout le CSS. Cependant, il est à noter que sans le CSS, le HTML risque d'être très moche (et surtout de ne rien faire!).

Le HTML


Alors, tout d'abord, commençons par le commencement!
Nous allons créer notre toute première div qui va contenir tous le slideshow. Vous pouvez l’appeler comme vous le voulez, mais ici, elle sera appelée "slideshow". Elle contiendra alors tout ce qui a un rapport avec le slider: les slides, les boutons pour aller d'un slide à l'autre, etc. Donc la voici:

Code:
<div id="slideshow">
</div>


C'est très simple n'est-ce pas?

Maintenant, nous allons rajouter des balises input de type radio. Ces balises, ce sont normalement ce qu'on utilise dans le formulaires, pour choisir une option ou une autre. Un exemple simple est sur ForumActif, plus précisément sur NeverUtopia: quand vous créez un sujet, sous "Icône de sujet" vous avez à côté de chaque icône un petit rond qu vous pouvez cocher. Eh bien c'est ça les input de type radio d'un formulaire!
Mais pourquoi utiliser ça, mais surtout, à quoi ça sert? Eh bien plutôt que d'utiliser des liens et d'utiliser ensuite le pseudo-élément :target, ici nous allons utiliser les input et leur pseudo-élément :checked, qui regarde si un input est coché ou non. Cela permet donc de ne pas ouvrir un "nouveau lien" à chaque slide, mais bel et bien de toujours avoir le même lien dans la barre de navigation.

Nous allons donc mettre autant d'input que nous voulons de slides, ici 5:

Code:

<input checked name="slideshow" id="slide1" type="radio" />
<input name="slideshow" id="slide2" type="radio" />
<input name="slideshow" id="slide3" type="radio" />
<input name="slideshow" id="slide4" type="radio" />
<input name="slideshow" id="slide5" type="radio" />


   
Si vous ne connaissez pas la balise input, laissez-moi vous expliquer ce qu'est chacun des éléments ici présent. Premièrement, le nom (name)  permet simplement de... donner un nom à l'élément. Normalement, on tente d'en donner un unique à chacun, notamment lorsqu'on  utilise le JavaScript ou alors que l'on utilise ça vraiment comme un formulaire, et non pas pour un slideshow comme ici. Cependant, ici ce n'est pas important et tous nos input s'appellent slideshow.
Ensuite, on a donné un id à chacun de nos éléments, qui correspond au combientième slide on est. Cela est important pour le CSS, pour savoir que input a été coché, alors que le name n'est pas utilisé pour ça.
Le type est ensuite, eh bien, le type de l'input. Ici on a radio, c'est à dire que seul un input peut être coché à la fois, mais il existe beaucoup de différents types d'input (vu que c'est un formulaire: il y a pour du texte, un choix multiple, une barre avec plusieurs choix de mots, etc). Ici cependant, on a besoin du type radio pour notre slideshow.
Enfin, vous aurez pu remarquer que le premier input a le mot clé "checked" ajouté dans la balise. Cela veut dire que par défaut, c'est l'input slide1 qui est coché et donc, celle-ci qui sera affichée à l'ouverture de la page. Cela peut très bien changer! Vous pourriez choisir d'avoir le troisième slide d'affiché à l'ouverture ou même le dernier! En gros, c'est le input qui est checked qui sera vu en premier par les gens naviguant sur votre site!


Pour rester dans le thème des input, parlons tout de suite comment et pourquoi ils seront utilisé: les flèches qui "contrôlent" le slideshow, et décident quel input est checked ou non. Pour cela, nous utilisons des labels.
On va d'ailleurs mettre ces labels dans un id que vous pouvez nommer comme vous le voulez mais que je nomme "controls". Cela nous permettra alors de placer les flèches et de faire certains effets dessus dans le CSS, mais aussi de les sélectionner correctement grâce au CSS (dont je parlerais plus tard)

Code:
<div id="controls">
 <label for="slide1"></label>
 <label for="slide2"></label>
 <label for="slide3"></label>
 <label for="slide4"></label>
 <label for="slide5"></label>
</div>


Comme vous pouvez le constater, chaque slide a son propre label, et c'est l'attribut for qui dit pour quel label est chaque input. En effet, si vous cliquez sur un label qui est for un certain input, alors cet input sera coché. Je suppose donc que vous comprenez à présent un peu mieux comment ça marche: on clique sur une flèche qui est en fait un label pour un certain input d'un slide, et ce slide sera alors coché, ce qui permettra, grâce au CSS, à aller au slide correspondant!
Remarquez cependant que le for doit avoir le même nom que l'id de l'input correspondant.

Donc jusqu'à présent, on a ça:

Code:
<div id="slideshow">
 <input checked name="slideshow" id="slide1" type="radio" />
 <input name="slideshow" id="slide2" type="radio" />
 <input name="slideshow" id="slide3" type="radio" />
 <input name="slideshow" id="slide4" type="radio" />
 <input name="slideshow" id="slide5" type="radio" />
 <div id="controls">
 <label for="slide1"></label>
 <label for="slide2"></label>
 <label for="slide3"></label>
 <label for="slide4"></label>
 <label for="slide5"></label>
 </div>
</div>


Ce n'est pour l'instant pas grand chose, cependant: c'est le plus important. en effet, bien que vous n'avez pas encore les slides à proprement parler, vous avez déjà la plus grosse partir du HTML, et ce qui va faire marcher tout le slideshow. Cependant, vu qu'un slideshow n'est rien sans slides, il nous faut les ajouter!

Nous allons donc créer une div qui va contenir tous nos slides, que l'on mettra entre les inputs et les controls (l'importance de ceci est expliquée plus tard) qui sera de la taille de tous les slides additionnés (que je nommerais inner), mais également un autre div, qui contiendra inner et qui permettra de cacher les slides en trop (à l'aide d'un overflow: hidden) de telle sorte à afficher un seul slide à la fois. Je le nommerais slides.
Nous avons donc ceci:

Code:
<div id="slides">
 <div class="inner">
 </div>
</div>



Je vais alors ajouter mes cinq slides dans inner, en leur donnant à chacun la classe a_slide (que vous pouvez appeler comme vous le voulez) qui me permettra de mettre la taille aux slides, mais aussi d'appliquer les effets nécessaires. J'ai donc ceci:

Code:
<div id="slides">
 <div class="inner">
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 </div>
</div>



À présent, pour que l'on puisse tout de suite tester les slides, j'ai mit dans chaque slide une image (le render) avec une class selon où je les veux positionnés, entourés d'un lien. En effet, je veux alterner entre le render à gauche et le render à droite, cependant, vous pouvez créer autan de positions que vous voulez (au milieu, un peu à droit,e un peu à gauche, etc), u même placer à l'aide d'id plutôt que de classe chaque image indépendamment. De même, vous pouvez mettre autre chose dans chaque slide qu'une image!

Code:
<div id="slides">
 <div class="inner">
 <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/SgVARN7.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/To2uhmJ.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/LOhfzmf.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/CIw0pQ9.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="left" src="http://www.renders-graphiques.fr/image/upload/normal/Kakuzu-1.png" /></a>
 </div>
 </div>
</div>



Et voilà! Le HTML est terminé! En résumé, nous avons ceci (HTML complet pour l'étape du slideshow simple):

Code:
<div id="slideshow">
 <input checked name="slideshow" id="slide1" type="radio" />
 <input name="slideshow" id="slide2" type="radio" />
 <input name="slideshow" id="slide3" type="radio" />
 <input name="slideshow" id="slide4" type="radio" />
 <input name="slideshow" id="slide5" type="radio" />
 <div id="slides">
 <div class="inner">
 <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/SgVARN7.png" /></a>
 </div>
  <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/To2uhmJ.png" /></a>
 </div>
  <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/LOhfzmf.png" /></a>
 </div>
 <div class="a_slide">
  <a href="#"><img class="right" src="http://i.imgur.com/CIw0pQ9.png" /></a>
  </div>
  <div class="a_slide">
  <a href="#"><img class="left" src="http://www.renders-graphiques.fr/image/upload/normal/Kakuzu-1.png" /></a>
  </div>
  </div>
 </div>
 <div id="controls">
 <label for="slide1"></label>
 <label for="slide2"></label>
 <label for="slide3"></label>
 <label for="slide4"></label>
 <label for="slide5"></label>
 </div>
</div>



Le CSS


Si vous envoyez à présent le HTML sans le CSS sur votre PA, vous verrez très vite que ça ne ressemble pas à grand chose... En effet, vu que nous avons que des class et des id, les div n'ont aucune hauteur ou largeur et donc, rien ne s'affiche. Enfin, mis à part les input (donc les boutons de type radio) dont le premier est coché... Et comme vous le voyez dans le résultat final, ces derniers ne sont même pas présents! Mais pas de panique: le CSS3 et sa magie va bientôt opérer, et vous aurez bientôt un superbe slideshow!

Cependant, nous avons beaucoup de choses à voir, alors là aussi je vais utiliser quelques titres pour les séparer un peu mieux!

Mise en place du bloc du slideshow


Tout d'abord, nous allons masquer les input, c'est à dire, faire en sorte qu'ils n'apparaissent pas. En effet vu que pour l'instant c'est la seule chose qui apparaisse mais que c'est la seule chose qu'on ne veut PAS voir apparaître, il suffit de faire en srte qu'ils ne s'affichent pas à l'aide d'un display: none;
Nous avons donc ceci:

Code:
/* Permet de cacher les input (apparait sous forme radio sinon) */
#slideshow input {
  display: none;
}



Maintenant que nous avons un "tableau blanc" sur lequel travailler, il est donc temps de commencer par le commencement: la balise qui entoure notre slideshow, à laquelle j'avais donné plus tôt l'id "slideshow". Nous allons donc tout de suite lui donner une largeur et une hauteur, mais aussi un position relative. C'est important, notamment pour positionner les flèches, ou tout autre élément que vous voudriez jouter aux slideshow (autre que les slides et les flèches).
Nous avons donc ceci:

Code:
/* Création du slideshow (contour) */
#slideshow {
  position: relative;
  width: 800px;
  height: 400px;
}



Maintenant, dans l'ordre logique des choses, je vais m'occuper des slides. Je vais donc commencer par la div à laquelle j'ai donné plus tôt l'id "slides", qui me permettra d'afficher un seul slide à la fois. Je vais donc lui donner la taille d'un seul slide (qui pour moi est la même taille que le slideshow en entier), le positionner de manière absolue tout en haut du slideshow (avec une position absolute) et un overflow: hidden, ce qui va me permettre de cacher tout ce qui dépasse de là, et donc, vous l'aurez compris, de cacher toutes les autres slides. En plus de cela, vu que mon slideshow aura une image de fond fixe et que seul des render vont passer par-dessus, j'ai mit une image de fond.

Code:
/* Conteneur de inner et de tous les slides, permet d'afficher un seul slide à la fois. */
#slides {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 800px;
  height: 400px;
  background-image: url('http://animeipics.files.wordpress.com/2014/01/konoha-thrids-era.jpg');
  background-size: 800px;
  background-position: center center;
  overflow: hidden;
}

   
Le background-size: 800px; me permet de faire en sorte que mon image de fond ait une largeur appropriée et le background-position lui donne la bonne position. Ici, le background-size a la largeur qui est fixée mais la hauteur s'adapte automatiquement (proportionnellement à l'image de base). Si j'avais écrit Si j'avais écris background-size: auto 400px; ce serait la hauteur qui se serait fixée à 400px et la largeur qui se serait automatiquement mise à la bonne proportion. On peut aussi fixer les deux attributs, pour fixer la largeur (toujours en premier) et la hateur, comme ceci: background-size: 800px 400px;.
Le z-index est également important. En effet, les flèches sont dans un div plus tard, c'est à dire que normalement, il est "plus haut" sur le z-index que les slides. Il faut donc changer cela, et on va donner à controls un z-index plus petit que slides!


Maintenant que nous avons ceci, nous allons regarder la première div fille de slides, qui n'est autre que la div à la class "inner". C'est donc lui qui va avoir tous nos slides. Je lui donne donc la bonne taille (donc pour qu'il contienne 5 slides). Rien de spécial donc... mis à part donner une largeur!

Code:
/* Conteneur de tous les slides */
#slides .inner {
  width: 500%;
}


Ici, on met une largeur en pourcentage plutôt qu'en px. En effet, vu que le div d'id slides nous donne déjà la largeur d'un slide, et que donc cela correspond à 100%, il faut mettre le nombre de slides * 100 comme nombre. Donc ici, 5 slides sont 500%, 6 slides serait 600%, 4 slides serait 400%, etc. C'est important, plus tard, pour déplacer les slides. On pourrait très bien le faire en px, mais cela demande un peu plus de calcul tout de même Wink


On a donc les deux conteneurs des slides, mais maintenant, il faudrait mettre en forme les slides eux-même! On va donc leur donner une taille (la même que #slides), mais également une position relative (pour pouvoir positionner les choses en absolu dedans, notamment les images et, bien plus tard, les bulles, que l'on verra dans la seconde partie) et enfin un float: left;

Code:
/* Mise en forme des slides */
#slides .a_slide {
  position: relative;
  width: 800px;
  height: 400px;
  float: left;
}


Le float: left permet de faire en sorte que tous les slides se mette les uns à côtés des autres sans marge. En effet, les div étant normalement des éléments bloc, ils retournent à la ligne avant ET après, or ici, nous ne voulons pas que ce soit le cas!
Il n'y aura d'ailleurs aucun problème au niveau du float, vu que le conteneur a un overflow: hidden. Pour plus d'informations, je vous invite à lire l'annexe sur les float que j'ai écris moi-même dans le cursus Wink


Et c'est presque fini! en effet, à présent, il y a le code pour le déplacement des slideshow à faire! Et là, on en aura terminé pour le bloc "brut" du slideshow!
Voici donc la partie la plus importante du code, qui est aussi présente sur le slider dont je me suis inspirée pour faire celui-ci:

Code:
/* Déplacement des slides */
#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }


OMFG!? C'est quoi ce checked? Et ce ~ là, ça veut dire quoi? AAAAAAH.
Pas de panique! O__O J'explique tout en-dessous!


Le pseudo-élément :checked
C'est ce qui va me permettre de voir quel input a été coché. J'en ai vaguement parlé plus tôt. Comme vous avez pu le voir dans le CSS, on regarde quel input est coché: celui de l'id slide 1, slide2, slide3, slide4 ou slide5. En effet, selon lequel est coché, on voudrait que inner soit décalé vers la gauche de plusieurs pourcent (c'est pourquoi aussi c'était important d'avoir en pourcentages la largeur d'inner). Pour afficher le premier slide c'est de 0, le second c'est de 100&, le troisème de 200%, etc. Notez qu'il faudrait en rajouter si on a plus de slides, tout comme il faut rajouter des input. Enfin, j'espère que le tuto est assez claire pour que vous ayez compris ça de par vous-même, mais j'aime autant préciser!
Donc en gros, ce pseudo-élément sert à ça: regarder lequel est coché et faire des choses en conséquence!


Le sélécteur ~
Ce sélécteur signifique "l'élément frère le plus proche". C'est à dire, dans notre code, le frère nommé "#slides .inner" le plus proche du input nommé #slideX qui est checked.
Mais qu'est un élément frère? Eh bien dans notre code par exemple, le div d'id "slideshow" a comme élément fils les input, le div d'id slides et enfin le div d'id controls. Cela implique donc que tous les trois sont des "frères" (ou sœurs).

Exemple:
Code:
<div id="un">
 <div id="deux">
 </div>
</div>

Ici, un est l'élément père de deux, et deux est l'élément filsè d eun.

Code:
<div id="un">
</div>
<div id="deux">
</div>


Ici, un est deux sont des éléments frères.

En somme, si votre code est bien indenté, il est facile de voir quels éléments sont des frères/sœurs, et lesquels sont des parents/enfants les uns des autres. En effet, les frères/sœurs seront sur le même niveau, et les parents/enfants seront sur des niveaux différents!


Je pense donc qu'à présent vous comprenez le code! Si tel input est checked, on change la marge à gauche de l’élément frère #slides .inner

Vous pouvez à présent envoyer votre code et voir... une image fixe! Et oui! Il n'y a pas encore les contrôles, donc les flèches, qui nous permettront de cocher les différents input! Du coup, eh bien... rien ne bouge! Il va donc falloir lire la suite pour mettre en place les flèches et, donc, ce qui nous permettra de contrôler le slideshow et de passer d'une slide à l'autre!

Mise en place des contrôles (flèches)


Les codes pour les contrôles est en réalité vraiment très "simple" dans le sens où, il n' a pas beaucoup de lignes, cependant, il peut être difficile à comprendre! Cependant, pas de panique: je suis là pour ça!

Commençons par le plus simple, qui est, le placement des flèches. Comme vous pouvez le voir, les flèches dépassent du slideshow. Ce n'est pas un problème, et d'ailleurs, vous pouvez bien sûr changer ça selon comment vous voulez avoir votre slideshow (avec les position: absolute de #slides et de #controls).
Quoiqu'il en soit, à l'aide du div d'id "controls" on va positionner les flèches au milieu de notre slideshow (à l'aide du top: 45%), et lui donner comme hauteur la taille des images que l'on va utiliser pour nos flèches. En plus de cela, il faut lui donner un z-index de 0 (ou en tout cas un z-index plus petit que celui de #slides) pour qu'ils soit derrière slides.
Notez cependant que si vous voulez que les flèches soient par-dessus votre slide, il va falloir changer ça, et même peut-être, avoir à placer chaque flèche individuellement! (car il faudrait que le z-index soit plus grand que celui des slides pour que les flèches apparaissent et soient cliquables, cependant, sur toute la longueur et hauteur de controls, les slides ne seraient plus cliquables (et n'auraient plus d'effet au passage de la souris).
Bref, en gros, voici le code:
[/b]
Code:
/* Mise ne place de l'élément contenant les flèches */
#controls {
  position: absolute;
  top: 45%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 50px;
}



Assez simple n'est-ce pas? Mais pour l'instant, on a toujours pas les flèches! En effet, nous voulons que les flèches s'affichent toujours, mais soient par rapport au bon label, c'est à dire, que lorsque le slide1 est coché, qu'il y ait la flèche de droite qui aille vers le slide2, et la flèche de gauche qui aille vers le slide5 (le dernier slide). Du coup, il faut une manière de cacher TOUS les labels, sauf le bon label correspondant au slide précédent et au slide suivant (et les bons qui plus est). Il faut donc tout d'abord mettre ce code:

Code:
/* On met les labels à la bonne taille et on les cache */
#controls label {
  display: none;
  width: 50px;
  height: 50px;
}


Donc ici, on cache tous les label et on leur donne la taille de l'image. MAintenant, passons au code compliqué!


Code:
/* Mise en place de la flèche vers le slide suivant */
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
  background: url('http://csscience.com/responsiveslidercss3/next.png') no-repeat;
  float: right;
  margin: 0 -70px 0 0;
  display: block;
}

/* Mise en place de la flèche vers le slide précédent */
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
  background: url('http://csscience.com/responsiveslidercss3/prev.png') no-repeat;
  float: left;
  margin: 0 0 0 -70px;
  display: block;
}


AAAAAAH!
Non mais faut apprendre à se calmer hein O__O

En réalité, ce code est très simple une fois qu'on comprend à quoi sert la pseudo-classe :nth-child(X). En effet, nth-child désigne le nième enfant du type de la classe/objet qui est mit avant. Donc label:nth-child signifie le n-ième enfant qui est un label, et dans ce cas, se trouve dans l'id #controls. Le chiffre en parenthèse, est donc ce fameux nième enfant: label:nth-child(4) signifie le 4ième enfant de type label. C'est assez simple non? Il suffit donc de regarder dans votre HTML et compter à quel enfant vous voulez aller.

Vous comprenez alors que lorsque slide1 est coché (donc le pseudo-élément :checked), on veut que la flèche next soit le label pour le slide2, qui est dans notre HTML le 2ième enfant de type label dans #controls. De même, on veut que notre flèche previous nous envoie vers le slide5, qui est dans notre HTML le 5ième enfant de type label dans #controls!  

Pour ce qui est du reste du code, le float nous permet de positionner les flèches tout à droite et tout à gauche du bloc, la marge nous permet de les mettre en dehors du slideshow, le display_block nous permet d'annuler le display: none du précédent code, de telle sorte à ce que seul le label que l'on veut s'affiche et enfin, le background est bien sûr l'image de la flpche, respectivement de celle vers la droite et celle vers la gauche.


Nous avons donc à présent les flèches et le slide en pleine état de marche, cependant, sans les animations, eh bien, c'est un peu moche... Mais pas de soucis, les animations arrivent dans la partie suivante!

Animer les slides et effets sur les flèches


Nous allons tout d'abord faire l'animation sur les flches. Tout simplement parce que, eh bien, c'est le plus simple! En effet, comme vous pouvez le voir, le seul effet sur mes flèches est un changement d'opacité. Très simple donc, et un changement qu'il suffit d'appliquer sur le CSS #controls label en ajoutant de l'opacité, et en faisant un changement au passage d ela souris grâce à la pseudo-classe :hover!
Je vous donne donc le code, qui n'a vraiment rien de compliqué !

Code:
/* On met les labels à la bonne taille et on les cache */
#controls label {
  display: none;
  width: 50px;
  height: 50px;
  opacity: 0.3;
  transition: all ease-out 0.2s;
}

/* Effet au passage de la souris sur les flèches */
#controls label:hover {
  opacity: 0.8;
  transition: all ease-out 0.2s;
}



Voilà donc qui est fait pour les flèches! Maintenant, il est temps de passer au slides, pour qu'ils se déplacent de façon fluide. Le code est assez court (deux lignes), mais vraiment très condensé: je vous explique cependant tout!

Code:
/* Animation slides */
#slides .inner {
  -webkit-transform: translateZ(0);
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}



Tout d'abord, le  -webkit-transform: translateZ(0); n'a vraiment pas d'autre fonction que d'assurer que l'animation se fait sans à-coups dans Chrome. En effet, si vous avez ce navigateur, vous verrez la différence si vous le mettez ou non. Ca ne change rien en soit, mais c'est plus joli, et surtout, uniquement pour Chrome qu'il y a cette ligne, vraiment xD
Vous voyez que la prochaine est une transition. Si vous avez un peu suivvi la plupart des Ls ici ou plusieurs Tutos, vous savez que cette ligne permet justement d'avoir l'animation, et donc un truc fluide. Cependant, vous voyez aussi que c'est une fonction bien compliquée que l'on utilise comme fonction de transition (cubic-bezier avec pleins de nombres dans ses parenthèses, contrairement aux habitues linear, ease-in, ease-out, ease-in-out et ease!). Cependant, pour déjà comprendre les deux premier termes de cette ligne: all signifie que tout ce qui peut être animé le sera. Ici, pour nous, c'est simplement le déplacement de inner. Ensuite, les 800ms est le temps durant lequel va durer l'animation. C'est 0.8 secondes en somme.

Revenons donc à cubic-bezier. En réalité, ease, ease-in, etc sont toutes des courbes de Bézier qui déterminent la transition. Et de même, chacun d'entre eux pourraient être écrits sous la forme de cubic-bezier (par exemple, ease pourrait s'écrire cubic-bezier(0.25, 0.1, 0.25, 1.0)). Donc, en gros, c'es une fonction de transition tout à fait normale, sauf que nous avons nous-même crée la façon dont l'animation va se jouer. En gros, c'est purement mathématique.
Vous avez cet outil qui vous permet de créer vos propres courbez de Bézier et les utiliser dans vos transitions, qui permet également de comparer avec les transitions "communes" ease, lineat, ease-in, ease-out et ease-in-out. Vous pouvez donc voir que notre courbe est très similaire au ease-in-out, bien que légèrement plus "rapide" dans sa transition.
Si vous voulez en apprendre plus sur la syntaxe de la fonction cubic-bezier, je vous invite à lire la partie de ce tuto qui en parle, qui est assez complet. Pour nous, ce n'est pas vraiment le sujet, on ne fait que l'utiliser Wink


Et maintenant, tout est bon! Nous n'avons plus qu'à placer les images correctement (comme je l'ai prévu dès le départ à gauche et à droite de chaque slide) et on en aura fini de cette première partie pour la création du slideshow!

Mise en place des images


Maintenant que nous avons tout le slideshow, il est temps de placer les images au bon endroit, comme j'avais dit lorsque j'ai écrit le HTML, j'ai prévu d'en mettre certaines à gauches et certaines à droites.
Je vais tout d'abord commencer par mettre toutes les images en position absolue. Je vais aussi faire en sorte qu'elle ne dépassent pas la hauteur du slideshow, donc les redimensionner à une hauteur de 400px.

Code:
/* Placer toutes les images en absolu. */
.a_slide img {
  position: absolute;
  display: block;
  height: 400px;
}



Maintenant, on va placer toutes les images avec la classe left à gauche

Code:
/* On place les images à gauche */
.a_slide img.left {
  bottom: 0px;
  left: 0px;
}



Et toutes les images avec la classe right à droite!

Code:
/* On place les images à droite */
.a_slide img.right {
  bottom: 0px;
  right: 0px;
}



Vous pourriez très bien utiliser les bottom, top, left et right pour placer les images ailleurs, et donc avoir plus de classes ou même des id pour chaque image si chacune doit être mise à un endroit spécifique! En somme, vous pouvez utiliser la position absolue comme vous le voulez pour placer les images!

Maintenant, il est temps de passer à la deuxième étape si vous voulez placer des bulles d’informations au passage de la souris sur les images!

NyoTheNeko

Faire des onglets en Javascript - Ven 30 Mai 2014 - 15:00



Faire des onglets en Javascript



Bonjour à tous! Voilà un petit tutoriel pour vous apprendre à faire des onglets en Javascript! Il est à noter que c'est très utile pour nos PA et nos QEEL qui demandent des onglets, et c'est parfois plus facile à comprendre que l'utilisation du :target en CSS. Cependant le javascript ne marche pas dans les messages forumactif (et ce, pour des questions de sécurité), c'est à dire que vous ne pouvez pas utiliser ce code dans les messages, mais uniquement sur le templates ou la page d'accueil de votre forum! Si vous voulez des onglets dans vos messages, il faudra passer par le CSS!

Ce tutoriel est donc une généralisation du tutoriel de Sui pour faire un QEEL en onglets. Il faut bien comprendre que vous pouvez l'utiliser de plein de façon différentes, autres que pour un QEEL: que ce soit une PA, un profil, une signature dans une iframe, une fiche de pub, etc. C'est donc un tutoriel pour que vous compreniez les mécanismes derrière et puissiez les réutiliser comme bon vous semble!


Le Javascript



Commençons tout de suite par un premier bout de script:
Code:
<script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
</script>


Ca fait beaucoup n'est-ce pas? Et pour la plupart d'entre vous, ce sera probablement du charabia! Mais pas de panique, les explications arrivent, pas à pas, tout de suite!

Tout d'abord un petit mot sur ces balises:
Code:
<script type="text/javascript"></script>


Cela implique que entre ces deux balises, vous retrouverez un code javascript. Facile donc de le repérer au milieu du reste du HTML: il suffit de chercher les balises script!

Commençons maintenant l'analyse du code en lui-même!


Code:
function change_onglet(name)

Ce début est tout simple, nous indiquons que nous créons une fonction (function) du nom de change_onglet et qui prend comme arguments name. Cet argument pourrait très bien s’appeler prout, petit_coeur, machin ou chose, c'est juste que ce sera utilisé ensuite dans la fonction. La fonction en elle-même pourrait aussi avoir le nom que l'on veut: tout ce qui importe, c'est que plus tard, on appelle la fonction par ce nom que l'on a défini!
Le terme important est donc function car cela signifie qu'on déclares une fonction javascript.


Code:
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';

Plus compliqué ici. Là, on prend l'élément passé par son id, (getElementById) et on prend donc son nom, qu'on dit commencer par "onglet_" et le reste de son nom enregistré dans anc_onglet (exemple: si anc_onglet contient un, on cherche l'élément avec l'id onglet_un). Là, on change sa class actuelle (.className) par onglet_0 onglet.

Donc, pour essayer d'expliquer un peu mieux que ce charabia: pour l'onglet qui était actif avant le click, on change la class actuel par la class "onglet_0 onglet".

Notons que la class "onglet_0 onglet" est en réalité deux class: onglet et onglet_0. On pourrait également les nommer autrement! En effet, ces class sont surtout là pour ensuite, par le CSS, mettre en forme les onglets! onglets étant la classe de TOUS les anglets, et onglet_0, la class des onglets inactifs.


Code:
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';

Comme vous voyez, ici, on reprend l'argument "name" passé à la fonction! Ici, c'est donc similaire: on prend l'onglet qu'on vient de cliquer, et on lui donne la classe onglet_1 onglet. Il y a donc ici un changement de classe entre l'actif et l'inactif!
Notons, encore une fois, que la classe pourrait changer! En effet, on pourrait l’appeler comme on veut, cela permet simplement de mettre dans le CSS une certaine mise en forme! On n'est d'ailleurs pas obligé d'avoir deux class!

En effet, avoir deux class (dont une seule qui change) permet de donner à tous les onglets la même mise en forme, mais de donner une différence tout de même à l'onglet actif et aux onlgets inactifs. Par exemple, les class pourraient très ben être inactif onglet et actif onglet respectivement!


D'ailleurs, si on ne souhaite pas que tous les onglets aient la même mise en forme, on pourrait tout simplement supprimer "onglet" et simplement avoir:
Code:
document.getElementById('onglet_'+anc_onglet).className = 'inactif';
                        document.getElementById('onglet_'+name).className = 'actif';

avec inactif la class d'un onglet inactif et actif le code d'un onglet actif. Pr exemple, inactif serait d'une certaine couleur, et actif d'une autre.


Passons à la suite:
Code:
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';

Ici, on dit que l'onglet actif avant le click doit changer de style de display: il doit passer à none. Donc ici, on change directement le CSS, qu'on appelle avec le .style, et on change la balise qu'on appelle avec .display!
En gros, on fait en sorte que l'onglet courant ne s'affiche plus.


Code:
document.getElementById('contenu_onglet_'+name).style.display = 'block';

Ici, on fat pareil, mais l'inverse! C'est à dire que c'est l'onglet qu'on vient de cliquer qui passe à un display: block, donc apparait!

Notez qu'on pourrait également changer ici le CSS, par exemple en mettant opacity, qui passerait de 0 à 1. Dans le CSS, on pourrait alors mettre une transition dans l'endroit concerné! Il faut aussi faire attention, plus loin, dans le CSS, que l'on ne mette pas display:none mais bel et bien opacity: 0 (cf plus tard, la partie CSS).

Et enfin:
Code:
anc_onglet = name;

Ici certainement le truc le plus important: on transfère à anc_onglet la valeur de name, c'est à dire que l'on dit que notre onglet courant est à présent l'onglet que l'on vient de cliquer! Comme ça, au prochain passage dans la fonction, la valeur de anc_onglet ne sera plus la même, et on pourra repasser d'un onglet à un autre de la même façon!


Passons à présent au second bout de code javascript nécessaire:
Code:
<script type="text/javascript">
        //<!--
                var anc_onglet = 'un';
                change_onglet(anc_onglet);
        //-->
</script>

Ça, c'est le code qui permet de déterminer, à l'ouverture de la page, quel est l'onglet qui sera ouvert. Donc en gros on crée une "var" (= variable) du nom anc_onglet (que l'on réutilise dans le code JS plus haut Wink), et on lui donne comme valeur 'un'. On passe alors cette variable créée dans la fonction change_onglet de plus tôt. Ceci étant un code qui ne demande pas d'appel, ça s'exécute au rafraichissement ou démarrage de la page!
Faites bien attention à ce que vous remplaciez "un" par le nom effectif d'un de vos onglets!


Le HTML



Tout d'abord, créons les "boutons" des onglets, c'est à dire, sr quoi on va cliquer pour afficher les onglets!
Code:
<span class="onglet_0 onglet" id="onglet_un" onclick="javascript:change_onglet('un');"> Onglet 1</span><span class="onglet_0 onglet" id="onglet_deux" onclick="javascript:change_onglet('deux');"> Onglet 2</span>



Il suffit de copier ce bout de code:
Code:
<span class="onglet_0 onglet" id="onglet_NOM" onclick="javascript:change_onglet('NOM');">TITRE_ONGLET</span>

pour créer un nouveau onglet. bien sûr, remplacez NOM par une valeur unique, qui désignera donc cet onglet là!

Ce bout de code:
Code:
onclick="javascript:change_onglet('deux');"

est l'appel à la fonction écrite plus haut. En somme on dit: au click de la souris (onclick) on fait appel à la fonction javascript du nom change_onglet, avec le paramètre "deux". On pourrait aussi changer pour que ce soit au passage de la souris avec "onmouseover" au lieu de onclick. Bien sûr, le paramètre passé correspond au contenu à afficher!


Et maintenant, créons le contenu des onglets:
Code:
<div class="contenu_onglet" id="contenu_onglet_un">Contenu du 1er onglet</div>
<div class="contenu_onglet" id="contenu_onglet_deux">Contenu du 2ième onglet</div>


Bien sûr, comme plus tôt, cette partie est à copier et à nommer pour autant d'onglets que l'on a du même nom que le bouton d'onglet correspondant:
Code:
<div class="contenu_onglet" id="contenu_onglet_NOM">Contenu du NOMième onglet</div>

On a donc l'id, qui identifie quel contenu d'onglet c'est pour que le code JS puisse le modifier comme voulu (et donc qui a le même "nom" que le bouton d'onglet), et la class, qui permet notamment de faire des manipulations CSS (et notamment de l'afficher quand il le faut).

Si vous voulez mettre une image comme "bouton" de votre onglet, il suffit de faire ceci:
Code:
<span class="onglet_0 onglet" id="onglet_NOM" onclick="javascript:change_onglet('NOM');"><img src="URL_DE_L'IMAGE" /></span>



Le CSS


Le seul code obligatoire à mettre est celui-ci:
Code:
.contenu_onglet {
  display:none;
}

Qui permet, en effet, de mettre un display: none, par défaut, à tous les onglets inactifs! Donc, à remplacer par opacity:0 et une transition si vous avez effectué le changement dont j'ai parlé plus haut!


Le reste du code CSS est optionnel, mais bien sûr, pour mettre en forme correctement, vous en aurez besoin!
Voici donc le squelette, sans rien dedans, pour la mise en forme! Attention cependant, si vous avez changé le nom de certaines classes, il faudra aussi les changer dans le CSS!

Code:
.onglet {
/* Permet de mettre en forme tous les onglets (enfin la partie à clicker). Par exemple, de tous les entourer. */
}

.onglet_0 {
/* Permet de mettre en forme tous les onglets inactifs. PAr exemple, leur donner une couleur ou couleur de fond particulière. */
}

.onglet_1 {
/* Permet de mettre en forme l'onglet actif. Par exemple, lui donner une couleur ou couleur de fond particulière. */
}

#onglet_NOM {
/* Changez NOM par le nom de l'onglet à modifier. Cela permet de mettre en forme un onglet en particulier. */
}

.contenu_onglet {
/* Mise en forme de tous les contenus d'onglets. Utile notamment pour les positionner quelque part */
}

#contenu_onglet_NOM {
/* Changez NOM par le nom du contenu d'onglet à modifier. Cela permet de mettre en forme un contenu d'onglet en particulier. */
}


Et voilà, c'est un peu tout! Si vous avez des questions ou que des passages n'étaient pas clairs, n'hésitez pas à demander!

Astuce pour ôter le saut de page avec l'utilisation du target - Lun 10 Juin 2013 - 19:53


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


On utilise souvent le target pour les ancres ou pour les onglets.

Cependant, il arrive souvent que lorsqu'on clique sur l'onglet, il s'affiche quelque chose de détestable, désagréable et de parfaitement agaçant : un saut de page plus ou moins important.

Il existe une solution pour lui couper les vivres. :)

Une astuce pour être précise. Je l'ai utilisé => sur cette fiche . C'était pour une commande = ne pas s'en inspirer merci :).

Vous remarquerez que le saut de page n'existe plus lorsqu'on passe de la carte d'identité aux liens.



En premier, débutez avec votre html.

Vous mettez :
Code:
<div id="conteneur_information">

  <a id="votre_onglet01" class="ancre"></a>
  <a id="votre_onglet02" class="ancre"></a>
  <a href="#votre_onglet01" class="votreclassonglet" >Nom Onglet 1</a>
  <a href="#votre_onglet02" class="votreclassonglet">Nom Onglet 2</a>


Vous rajoutez autant de cette partie que vous avez d'onglet en changeant leur numéro :
Code:
  <a id="votre_onglet02" class="ancre"></a>
  <a href="#votre_onglet02" class="votreclassonglet" >Nom Onglet 1</a>



Ensuite, à la suite du code précédent, vous préparez la div qui accueillera les contenus des onglets comme ceci :
Code:
  <div class="votre_class_contenu">


Pour les contenu d'onglets, la manipulation n'est pas dure. Il faut surtout surtout faire attention que l'id ne porte pas le nom de l'id onglet. Si vous le faite, cela ne marchera pas. ^^

Bref, voilà :
Code:
    <div id="votre_onglet1">Contenu onglet 1</div>

    <div id="votre_onglet2">Contenu onglet 2</div>


Une fois que c'est fait, vous ajoutez 2 fermeture de div pour fermer le bloc du contenu des onglets et le bloc qui contient tout :
Code:
  </div>
</div>



Le html est terminé. Cela devrait donner quelque chose comme ceci :
Code:
<div id="conteneur_information">

  <a id="votre_onglet01" class="ancre"></a>
  <a id="votre_onglet02" class="ancre"></a>
  <a href="#votre_onglet01" class="votreclassonglet" >Nom Onglet 1</a>
  <a href="#votre_onglet02" class="votreclassonglet">Nom Onglet 2</a>

  <div class="votre_class_contenu">
    <div id="votre_onglet1">Contenu onglet 1</div>
    <div id="votre_onglet2">Contenu onglet 2</div>
  </div>

</div>



Il reste le css :) :
Code:
/*Fait disparaître les ancres*/
#conteneur_information a.ancre {display: none;}

/*Styliser les onglets*/
.votreclassonglet {
}

/*Bloc qui contient les contenus d'onglets*/
.votre_classe_contenu {
}

/*Contenu onglet 1*/
#votre_onglet1 {
}

/*Contenu onglet 2*/
#votre_onglet2 {
}

/*Cache les contenus d'onglets*/
#votre_onglet1 {display: none;}
#votre_onglet2 {display: none;}

/*Fait apparaître les contenus d'onglet*/
#conteneur_information a#votre_onglet01:target ~ .votre_class_contenu #votre_onglet1{display: block;}
#conteneur_information a#votre_onglet02:target ~  .votre_class_contenu #votre_onglet2{display: block;}


Si vous avez des questions, je serais ravie de vous répondre :)

QEEL onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Sam 24 Nov 2012 - 18:03



Bonjour, bonsoir,

Dans l'idée de la PA équivalente, voici le même principe de focus appliqué à un QEEL, lui aussi déjà rempli, vous n'avez plus qu'à installer et personnaliser son apparence, et en particulier les images qui l'encadrent.
Un petit aperçu tout d'abord :

Lien Forum Test

Il s'agit du premier QEEL du forum, au fond marron et avec la femme manga allongée au dessus.

Information importante : j'ai voulu ici utiliser le "focus" en alternative au "target" pour créer un effet au clic, et non au survol. Que ça vous parle ou non peu importe, sachez juste qu'il y a un "défaut" avec l'utilisation du focus, c'est que lorsqu'on clique aille ça l'enlève. Du coup, lorsque vous êtes sur le contenu de l'un des onglets et que vous cliquez sur la page, que ce soit à l'intérieur ou à l'extérieur, vous revenez sur le contenu par défaut. Je vous rassure cependant si vous comptez mettre des liens dans vos contenus, même si le fait de cliquer ramène au contenu par défaut le lien fonctionnera quand même.
Sachez le cependant avant de l'utiliser.


Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


Installation HTML

Ouvrez le template "Page d'accueil", également nommé "index_body".
Repérez le bloc contenu entre les lignes 175 et 223 : il est délimité par les marqueurs suivants :

Code:
<!-- BEGIN disable_viewonline -->
<!-- END disable_viewonline -->


Ils indiquent le début et la fin de l'ensemble du "Qui est en ligne". C'est tout ce qui se trouve entre ces deux marqueurs que nous allons remplacer par cela :

Code:
<div id="qeel_bloc">
 
<div id="qeel_head"></div>
<div id="qeel_body">

<div id="qeel">
  <div class="qeel_onglet1" tabindex="0">Derniers connectés
    <div class="qeel_contenu1"><div class="qeel_contenu"><table>{L_CONNECTED_MEMBERS}</table></div></div>
  </div>
  <div class="qeel_onglet2" tabindex="0">Anniversaires
    <div class="qeel_contenu2"><div class="qeel_contenu"><table>{L_WHOSBIRTHDAY_TODAY}
      {L_WHOSBIRTHDAY_WEEK}</table></div></div>
  </div>
  <div class="qeel_onglet3" tabindex="0">Groupes
    <div class="qeel_contenu3"><div class="qeel_contenu">{GROUP_LEGEND}</div></div>
  </div>
  <div class="qeel_contenu4"><div class="qeel_contenu">{TOTAL_POSTS} ▬ {TOTAL_USERS} ▬ {NEWEST_USER}<br />
    {RECORD_USERS}<br /><br />
    {TOTAL_USERS_ONLINE}<br />{LOGGED_IN_USER_LIST}</div></div>
  </div></div>

<div id="qeel_foot"></div>
 
  </div>



Installation CSS

Pour la mettre en forme, allez dans votre feuille CSS pour y mettre le css ci-dessous :

Code:
/* QEEL ONGLETS LATERAUX ONCLIC FOCUS */

#qeel_bloc
{
  height: 400px;
}
#qeel_head
{
  width: 980px;
  margin: auto;
  height: 151px;
  background: url(#);
}
#qeel_body
{
  width: 980px;
  height: 150px;
  margin: auto;
  background: url(#) repeat-y;
}
#qeel_foot
{
  width: 980px;
  margin: auto;
  height: 118px;
  background: url(#);
}
#qeel
{
  padding-top: 20px;
  padding-bottom: 20px;
}
.qeel_onglet1
{
  width: 150px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  margin-bottom: 10px;
  background: #d39b69;
  border: 1px solid #cf6f1d;
  box-shadow: 0px 0px 4px #493b32;
  -moz-box-shadow: 0px 0px 4px #493b32;
  -o-box-shadow: 0px 0px 4px #493b32;
  -htm-box-shadow: 0px 0px 4px #493b32;
  -webkit-box-shadow: 0px 0px 4px #493b32;
  font-weight: bold;
  color: #473d36;
  text-shadow: 1px 1px 0px #f0b27e;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet2
{
  width: 150px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  margin-bottom: 10px;
  background: #f1f0eb;
  border: 1px solid #d0d0cc;
  box-shadow: 0px 0px 4px #605750;
  -moz-box-shadow: 0px 0px 4px #605750;
  -o-box-shadow: 0px 0px 4px #605750;
  -htm-box-shadow: 0px 0px 4px #605750;
  -webkit-box-shadow: 0px 0px 4px #605750;
  font-weight: bold;
  color: #ba7b42;
  text-shadow: 1px 1px 0px #d4d3cf;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet3
{
  width: 150px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  background: #625c51;
  border: 1px solid #423328;
  box-shadow: 0px 0px 4px #3a372d;
  -moz-box-shadow: 0px 0px 4px #3a372d;
  -o-box-shadow: 0px 0px 4px #3a372d;
  -htm-box-shadow: 0px 0px 4px #3a372d;
  -webkit-box-shadow: 0px 0px 4px #3a372d;
  font-weight: bold;
  color: #d1d1cc;
  text-shadow: 1px 1px 0px #736f68;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet1:hover, .qeel_onglet2:hover, .qeel_onglet3:hover
{
  margin-left: 20px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_contenu1
{
  position: absolute;
  z-index: 1;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -40px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.qeel_contenu2
{
  position: absolute;
  z-index: 2;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -80px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.qeel_contenu3
{
  position: absolute;
  z-index: 3;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -120px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.qeel_contenu4
{
  position: absolute;
  z-index: 4;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 204px;
  margin-top: -129px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
}
.qeel_contenu
{
  padding: 4px;
  color: #74685d;
  font-size: 11px;
  text-shadow: 1px 1px 0px #f7f6f0;
  text-align: justify;
  font-weight: normal;
}
.qeel_onglet1:hover .qeel_contenu1, .qeel_onglet2:hover .qeel_contenu2, .qeel_onglet3:hover .qeel_contenu3
{
  margin-left: 180px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet1:focus .qeel_contenu1, .qeel_onglet2:focus .qeel_contenu2, .qeel_onglet3:focus .qeel_contenu3
{
  z-index: 10;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
}



Personnalisation

Pensez surtout à changer les images d'en-tête, de corps et de pieds du QEEL ! Celles-ci étaient pour le commande d'un forum, donc je les ai retirées du css afin que vous puissiez mettre les votre. Mettez l'adresse de vos images à la place des # présents dans le css, entre parenthèses.
- #qeel_head = image d'en-tête
- #qeel_body = image de corps qui se répète
- #qeel_foot = image de pieds
Attention aux tailles ! Vous pouvez voir que les blocs possèdent une largeur et pour certains une hauteur. N'oubliez pas de les modifier si votre image ne possède pas cette taille. La hauteur et la largeur des blocs doivent correspondre aux images.
Si vous ne voulez pas vous embêter avec trois images pour faire votre bloc, enlevez les blocs #qeel_head et #qeel_foot pour ne garder que le corps (#qeel_body) et mettez-lui une couleur de fond, bordures, ombres etc...
Pour le reste, il s'agit essentiellement de couleur, y compris pour les petits onglets.

En cas d'utilisation de ces codes merci de mettre un crédit à Never-Utopia sur votre forum, même si vous personnalisez le code, la base a été écrite ici. Un petit crédit, ce n'est pas grand chose, et nous ne demandons que ça pour le partage de notre petit savoir x)


S'il y a des problèmes, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Palypsyla

[HTML/JS] Changer d'onglet au passage de la souris - Mar 12 Juin 2012 - 15:00



Changer d'onglet au passage de la souris

Bonjour !

Je viens appliquer un petit complément du tutoriel de Sui qui permet de réaliser une page d'accueil en onglets. Dans son tutoriel, il faut cliquer sur les onglets pour que celui-ci se change et laisse apparaitre le suivant. Ici, je vais vous apprendre à changer une simple valeur pour pouvoir faire en sorte que celui-ci se change juste en passant son curseur dessus (Pour les feignants comme moi qui n'ont pas envie de cliquer à chaque fois pour voir les infos !)

Ce tutoriel s'applique également aux QEEL et tout autre chose utilisant les onglets.

Pour pouvoir voir le tutoriel, il faut poster à la suite.


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 10:27