[Invision & PHPBB2] Coder un cadre autour du forum en images

Oui, le titre n'est pas le plus clair du monde, mais grâce à la gentillesse extrême de Gravity et Hismé, laissez-moi vous expliquer ce dont je veux parler! Ou plutôt même: vous montrer. En effet, voici donc ce que je vais vous apprendre à faire. Imaginez que Gravity vous fasse une superbe maquette comme pour la commande de Hismé pour Heiwa et que GASP! Mais il y a un cadre autour du forum! Voyez seulement:

Et là, vous vous demandez comment vous allez faire, parce qu'il y a un haut, un bas, et surtout, un motif de pierres qui doit se répéter... et si le motif ne se répète pas à la bonne hauteur, vous faite comment? Et là il faut toucher aux templates et tout ça, et ça va pa bien s'adapter à l'écran des gens avec une taille fixe, et ça va pas le faire et... FAUX!
En réalité, c'est très facile.

Bref, c'est peut-être un peu difficile de voir comment faire, c'est pourquoi j'écris... ce tuto! YOUPI! =D

Cependant, je vous conseille de lire le tuto sur les sélecteurs de Manumanu qui vous sera utile, vu que nous utilisons des :before et :after. Sinon, tout le reste sera expliqué.

Pour le PHPBB2

On commence tout de suite avec la plateforme la plus utilisée: le PHPBB2. Vous verrez, c'est aussi la plus "simple" des deux

Le HTML

Il n'y a pas de HTML à faire. Vraiment, rien, nada. C'est pour ça que c'est si facile! Cependant, il y a quelques trucs que vous pouvez faire, simplement pour vous faciliter la vie par la suite. La plupart de ces choses n'ont même pas besoin de toucher du HTML.

La première: mettre une image transparente dans Affichage -> Images et Couleurs -> Gestion des images -> Mode Avancé -> Logo du forum. Peu importe sa taille, suffit qu'elle soit transparente, vu que la taille est modifiable dans le CSS

La seconde: Centre le logo et la barre de navigation en allant dans Affichage -> Page d'accueil -> En-tête & Navigation et cocher "Centré" à Position du logo ET Position du menu.

Mettez également la bonne couleur de fond à votre forum, la même que celle qui sera autour de votre cadre, optimalement.

Maintenant, une autre chose que vous pouvez faire pour retirer des break intempestif, c'est de toucher aux templates.
Là vous allez sous Affichage -> Templates -> Général -> overall_header et vous suprimez ce petit bout de code:

Code:

                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>

À la limite, vous pouvez également simplement supprimer les balises br dans ce code, mais si de toute façon vous ne voulez pas afficher la description et le nom du forum, autant les retirer complètement

Le CSS

Là c'est le plus long! Évidemment, vous devez avoir les images à disposition pour le haut, le bas et le centre qui se répète.

Mais d'abord, commençons par le commencement. Première ligne du CSS:

Code:

/* Pour l'adaptivité du design par rapport à l'écran. */
.bodylinewidth {
  width: 100%;
}

Comme je l'ai écrit dans mon petit commentaire, cette ligne très simple permet de faire en sorte que l'intérieur du forum va s'adapter à la taille de l'écran, en prenant simplement toute la largeur du forum. Normalement, le bodylinewidth prend la largeur que vous lui avez indiqué dans Général -> Forum -> Configuration -> Largeur du forum (nombre ou %) :. Mais là, en gros, on lui dit de ne pas le rendre en compte.

Bon là, forcément, votre forum ressemble à plus grand chose, du coup on va redonner la largeur que l'on veut au forum en ajoutant ceci:

Code:

/* Permet que l'intérieur du corps de page soit plus petit que le cadre */
#page-body .three-col {
  margin: auto;
  width: 890px;
}

En gros, on redonne une taille "normale" à tout ce qui doit se trouver dans le cadre et on le centre.

Bon, tout ça c'est super, mais maintenant, il est temps de mettre en place la bannière et le forum. Voici donc le code très important:

Code:

/* Permettra de placer la bannière et le footer correctement. */
.bodyline {
  position: relative;
  z-index: 2;
  padding: 0px;
}

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:before {
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:after {
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

Expliquons donc ce code, parce que sinon, vous n'allez rien comprendre. (Enfin peut-être que si, mais avec explications c'est plus sympas x) )

Tout premièrement, on met en position: relative et un z-index plus haut ce sur quoi on applique le before et after. Cela va nous permettre après de le placer correctement (bien qu'on utilise pas d'absolute), surtout pour pouvoir faire passer le corps de page au-dessus du before et after sans trop de peine, notamment le logo.

Ensuite, vous remarquerez que le :before et :after ont tous deux un width: 100%; C'est tout simplement pour faire ne sorte que cela s'adapte à l'écran. Pas beaucoup de surprise non plus au niveau du height, qui est simplement la hauteur de l'image de votre haut, respectivement bas du cadre du forum. Ne prenez donc pas les valeur que j'ai mise mais mettez celle de vos images, sinon ça ne va évidemment pas marcher!



Cependant, vous verrez tout de suite un problème, notamment par rapport à la partie du haut de votre cadre... eh bien le logo transparent n'est tout simplement pas dessus! Pas de panique, on va encore s'occuper de ça, mais d'abord, mettons en place le corps de page!

Code:

/* Le cadre du corps de page. */
#page-body {
  margin: auto;
  width: 100%;
  background-image: url('http://img110.xooimage.com/files/6/3/e/bg2-4875f11.jpg');
  background-repeat: repeat-y;
  background-position: center;
}

Vous voyez donc que l'on change d'élément sur lequel on applique, mais en gros, on entoure le corps, on met un width: 100%; (pour s'adapter à toute largeur d'écran), et on fait se répéter le background seulement sur l'axe des y (donc verticalement). Maintenant, votre forum ressemble déjà un peu plus à l'encadrement que vous devriez avoir! Cependant, bien sûr, la bannière est encore au-dessus du logo, et le bas de votre forum ne touche pas le milieu. Embêtant, mais facilement corrigeable à l'aide des margin!

Cependant, avant de nous amuser avec les margin, changeons la taille du logo pour qu'il ait la bonne hauteur et largeur (toute la hauteur de la bannière donc).

Chez moi, ça donne ça:

Code:

/* Taille du logo "fictif" pour rendre la bannière clickable */
#i_logo {
  height: 933px;
}

Bien sûr, chez vous la taille peut être différente.



Reprenons donc le code que nous avions avant, et ajoutons-y des margin (les miennes sont tout à la fin de chacun des deux bouts de code):

Code:


/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:before {
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: -955px;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:after {
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
  margin-top: -46px;
}

Ert voilà, votre forum est dans un joli cadre! =D

Cependant, si vous n'avez pas retiré la couleur du cadre de bodyline, vous remarquerez que le cadre n'arrive pas vraiment jusqu'au bout de votre page de navigateur... C'est normal, parce que le body a une marge, et le bodyline a un cadre!

On peut donc retirer tout ça en mettant ceci dans le CSS:

Code:

body {
  margin: 0px;
}

.bodyline {
  border: 0px solid;
}

Le Javascript

Bon c'est bien beau tout ça, vous avez un joli cadre et tout, mais... Le centre ne se répète pas correctement!

Et si par malheur vous n'avez pas la bonne taille à l'intérieur du cadre, eh bien ça peut mal se répéter et mal "fusionner" avec le footer, et vous donner un truc comme ça:
Pas génial hein?

Eh bien avec ce script, ce n'est plus un problème!

Allez sous Modules -> HTML & JAVASCRIPT -> Gestion des codes Javascript -> Créer un Nouveau Javascript,nommez-le quelque chose comme "Multiplication en taille du page-body" cochez sur toutes les pages.

Puis vous y mettez:

Code:

$(function() {
    $div = $('#page-body');
    var remainder = $div.height() % 201;
    var newHeight = $div.height() + (201-remainder);
    $div.css('height', newHeight);
});

En gros, voilà ce que ce code dit, ligne par ligne.
- Prendre la div du nom de page-body.
- Calculer ce qui reste de la division entre la hauteur de ce div et 201 (qui est la hauteur de mon image de répétition).
- Ensuite, créer une nouvelle hauteur en prenant la hauteur actuelle de page-body, et en y ajoutant la différence entre 201 et le reste que je viens de calculer.
- Appliquer cette nouvelle hauteur à page-body.

Et tadaaa! ça se répète tout bien! =D

Et voilà qui est fait et tout simple pour PHPBB2!

Pour Invision

Invision est une des plateformes que j'utilise personnellement le plus, parce qu'il n'y a pas vraiment de tableaux. Du coup c'est la deuxième version que je vais vous montrer, et je ne vais pas vous montrer pour les autres versions. Désolée!

Le HTML

Ici, c'est légèrement plus difficile que pour le PHPBB2, car il y a deux templates sur lesquels on va devoir modifier quelque chose. En réalité, on ajoute une seule et même div, cependant, vu que la div s'ouvre sur overall_header, il faut la fermer sur overall_footer_begin !

Cherchez dans votre template overall_header ceci:

Code:

</div>
<div id="submenu">

Il vous suffit alors d'ouvrir une div entre deux en lui donnant une class, comme par exemple:

Code:

</div>
<div id="contour_forum">
   <div id="submenu">

Maintenant, dans overall_footer_begin, tout à la fin du template, vous avez ceci:

Code:

</div>
<!-- END html_validation -->

Rajoutez-y simplement une div fermante, comme ceci:

Code:

</div>
</div>
<!-- END html_validation -->

Et voilà qui est terminé pour la partie compliquée!

Pour la partie simple, nous avons pareil pour que le PHPBB2, donc je vous le remets ici:

La première: mettre une image transparente dans Affichage -> Images et Couleurs -> Gestion des images -> Mode Avancé -> Logo du forum. Peu importe sa taille, suffit qu'elle soit transparente, vu que la taille est modifiable dans le CSS

La seconde: Centre le logo et la barre de navigation en allant dans Affichage -> Page d'accueil -> En-tête & Navigation et cocher "Centré" à Position du logo ET Position du menu.

Mettez également la bonne couleur de fond à votre forum, la même que celle qui sera autour de votre cadre, optimalement.

Maintenant, une autre chose que vous pouvez faire pour retirer des break intempestif, c'est de toucher aux templates. Je vous laisse jouer avec

Le CSS

Plus compliqué tout de même que le HTML, le code reste cependant assez simple et similaire à sa version du PHPBB2, à quelque changements près!

Commençons tout de suite par mettre les images de bannière et de footer du forum:

Code:

/* Permettra de placer la bannière et le footer correctement. */
.container_IE {
  position: relative;
  z-index: 2;
  padding: 0px;
  background-color: #A5C9E9;
}

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:before {
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:after {
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
}

Expliquons donc ce code, parce que sinon, vous n'allez rien comprendre. (Enfin peut-être que si, mais avec explications c'est plus sympas x) )

Tout premièrement, on met en position: relative et un z-index plus haut ce sur quoi on applique le before et after. Cela va nous permettre après de le placer correctement (bien qu'on utilise pas d'absolute), surtout pour pouvoir faire passer le corps de page au-dessus du before et after sans trop de peine, notamment le logo.

Ensuite, vous remarquerez que le :before et :after ont tous deux un width: 100%; C'est tout simplement pour faire en sorte que cela s'adapte à l'écran. Pas beaucoup de surprise non plus au niveau du height, qui est simplement la hauteur de l'image de votre haut, respectivement bas du cadre du forum. Ne prenez donc pas les valeur que j'ai mise mais mettez celle de vos images, sinon ça ne va évidemment pas marcher!



Cependant, vous verrez tout de suite un problème, notamment par rapport à la partie du haut de votre cadre... eh bien le logo transparent a un fond, tout d'abord, et il ne se met pas au-dessus de l'image de bannière!

On va donc tout de suite régler notre premier problème:

Code:

/* On met la bannière é la bonne largeur et au bon endroit */
#logostrip {
  max-width: 797px;
  margin: auto;
  height: 568px;
  background: none !important;
}

#logostrip img {
  width: 797px;
  height: 600px;
}

div#logostrip #logo {
  margin: 0px;
}

Expliquons rapidement son code. Sur Invision, le logo est dans deux div: #logostrip et #logo. #logo a une marge qui est mise automatiquement, une marge que je retire dans le CSS, et #logostrip doit être mit au centre (avec margin-auto). Je mets aussi une largeur et une hauteur à notre image du logo (pour qu'elle prenne toute la hauteur de la bannière et une bonne largeur. Et enfin, je retire la couleur de fond à notre logo, avec le background:none!

Maintenant, occupons-nous du corps du forum!

Code:

/* Mettre le fond au reste */
#ipbwrapper {
  margin: auto;
  width: 100%;
  padding: 0px;
}

/* On met le centre en place */
#contour_forum {
  width: 100%;
  background-image: url('http://img110.xooimage.com/files/6/3/e/bg2-4875f11.jpg');
  background-repeat: repeat-y;
  background-position: center;
  margin-top: 100px;
}

Ici c'est simple, on met un width: 100% à ipbwrapper pour qu'il s'adapte à la taille de l'écran et on retire tout padding, ensuite, on utilise la div qu'on a créée pour mettre l'image de fond qui se répète verticalement, en mettant un width de 100% pour qu'elle s'adapte à toute taille d'écran.

Maintenant, vraiment, on n'a plus qu'un seul problème: tout ce qui est à l'intérieur prend toute la largeur... vraiment pas pratique, et pas franchement ce qu'on veut!

Du coup, une seule solution: mettre une largeur max à tout ce qu'il y a à l'intérieur et un joli margin: auto pour que ça se centre:

Code:

/* On force le reste à être plus petit et rentrer dans le cadre. */
#submenu, #userlinks, #clearfix, #gfooter, p.center, #emptyidcc {
  position: relative;
  max-width: 790px;
  margin: auto;
  left: 3px;
}

Le left: 3px est mit parce qu'en réalité, sur Invision, tout est un tout petit peu décalé. Rien de bien grave donc, qui ne peut être corrigé avec un petit position: relative!

Et à présent, vient donc le moment de retirer tout trou béant entre le header et notre corps,ou le footer et notre corps. Dans mon cas, le footer est déjà collé au corps, donc je n'y touche pas (mais vous pourriez simplement ajouter un margintop négatif à .container_IE:after ), alors il me suffit de changer le .container_IE:before.

Cela donne donc ceci :

Code:

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:before {
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  margin-bottom: -711px;
}

Et voilà le CSS qui est terminé!

Le Javascript

Le Javascript pour Invision est le même que celui de PHPBB2 à un détail près: il s'applique sur #contour_forum ! Du coup, je copie-colle juste ce qu'il y a plus haut en changeant ce détail (parce que j'ai la flemme =P)

Bon c'est bien beau tout ça, vous avez un joli cadre et tout, mais... Le centre ne se répète pas correctement! Et si par malheur vous n'avez pas la bonne taille à l'intérieur du cadre, eh bien ça peut mal se répéter et mal "fusionner" avec le footer, et vous donner un truc comme ça:
Pas génial hein?

Eh bien avec ce script, ce n'est plus un problème!

Allez sous Modules -> HTML & JAVASCRIPT -> Gestion des codes Javascript -> Créer un Nouveau Javascript, nommez-le quelque chose comme "Multiplication en taille du contour_forum " cochez sur toutes les pages.

Puis vous y mettez:

Code:

$(function() {
    $div = $('#contour_forum');
    var remainder = $div.height() % 201;
    var newHeight = $div.height() + (201-remainder);
    $div.css('height', newHeight);
});

En gros, voilà ce que ce code dit, ligne par ligne.
- Prendre la div du nom de contour_forum.
- Calculer ce qui reste de la division entre la hauteur de ce div et 201 (qui est la hauteur de mon image de répétition).
- Ensuite, créer une nouvelle hauteur en prenant la hauteur actuelle de contour_forum, et en y ajoutant la différence entre 201 et le reste que je viens de calculer.
- Appliquer cette nouvelle hauteur à contour_forum.

Et tadaaa! ça se répète tout bien! =D

Et voilà qui sonne la fin de ce tuto! ^w^

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!




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





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.



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.

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

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.




   

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

   

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

   

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

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

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

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

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

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!

Effets Divers

Ceci est un code crée suite à la Demande de Clarisse, ici.

Les effets

La boîte "glisse" pour s'ouvrir.
Les contenus internes ne sont pas fournis!
Vous pouvez changer l'image de la crois ou alors simplement mettre un texte!

Le code

Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> overall_header :
Juste après ça:

Code:

<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Mettez ça:

Code:

  <div id="target_po">
    <div id="bouton_po">
      <a href="#target_po">Aide</a>
    </div>
    <div id="tableau_po"><div class="fermer"><a href="#"><img src="http://image.noelshack.com/fichiers/2014/24/1402677746-2014-06-13-184010.png" /></a></div>
      <div id="tableau_po_interne">
        <h1 class="titre_po">
          Titre Contenu
        </h1>
        Contenu
      </div>
    </div>
  </div>

Le CSS:

Code:

/********** DÉBUT BOUTON **********/

/* Mise en forme du bouton */
#bouton_po {
  /* Position */
  position: fixed;
  bottom: 0px;
  right: 20px;
  z-index: 900;
  /* Taille */
  width: 65px;
  height: 25px;
  padding: 5px;
  /* Couleur de fond puis de texte */
  background-color: #B7B7B7;
  color: black;
  text-align: center;
  /* Bordure */
  border: 2px solid black;
  border-bottom: 0px solid;
  transition: all ease 0.5s;
}

/* Mise en forme du bouton au passage de la souris */
#bouton_po:hover {
  background-color: #D8D6D6;
  transition: all ease 0.5s;
}

/* Mise en forme du lien dans le bouton */
#bouton_po a, #bouton_po a:hover {
  color: black;
  letter-spacing: 0px;
  text-decoration: none !important;
  transition: all ease 0.5s;
}

/* Effet sur le lien au passage de la souris */
#bouton_po:hover a, #bouton_po:hover a:hover {
  color: black;
  letter-spacing: 3px;
  text-decoration: none !important;
  transition: all ease 0.5s;
}

/* Mise en forme du contenu */
#tableau_po {
  visibility: hidden;
  /* Position du contenu */
  position: fixed;
  bottom: 0px;
  right: 20px;
  z-index: 999;
  /* Hauteur de base pour l'effet. */
  width: 0px;
  height: 0px;
  /* Couleur de fond puis de texte */
  background-color: #B7B7B7;
  color: black;
  /* Bordure */
  border: 2px solid black;
  transition: all ease 0.5s;
}

/* Apparition du contenu au click sur le bouton */
#target_po:target #tableau_po {
  visibility: visible;
  /* Taille du contenu */
  width: 401px;
  height: 556px;
  transition: all ease 0.5s;
}

/* Marge entre le bord et le bouton de fermeture */
#tableau_po .fermer {
  margin: 3px;
}

/* Dans le cas où le bouton de fermeture est un texte */
#tableau_po .fermer a, #tableau_po .fermer a:hover {
  text-decoration: none !important;
}

#tableau_po .fermer a {
  color: black;
  transition: all ease 0.5s;
}

#tableau_po .fermer a:hover {
  color: white;
  transition: all ease 0.5s;
}

/* Pour un overflow: auto */
#tableau_po_interne {
  /*taille*/
  height: 535px;
  width: 390px;
  margin: auto;
  overflow: auto;
}

/* Mise en forme des titres dans le contenu */
h1.titre_po {
  width: 100%;
  border: 0px solid;
  margin: 0px;
  margin-bottom: 10px;
  background: none;
  font-weight: normal;
  text-align: center;
  border-bottom: 1px solid black;
  font-size: 15pt;
}
/********** FIN BOUTON **********/

Changer la croix / ce qui permet de fermer l'aide

Le code correspondant est celui-ci:

Code:

<div class="fermer"><a href="#"><img src="http://image.noelshack.com/fichiers/2014/24/1402677746-2014-06-13-184010.png" /></a></div>

Il suffit de retirer l'image ou la changer mais ne touchez surtout pas le lien autour, ni la div, uniquement l'image ou vous ne pourrez plus fermer votre aide!
Le code CSS correspondant est celui-ci:

Code:


/* Marge entre le bord et le bouton de fermeture */
#tableau_po .fermer {
  margin: 3px;
}

/* Dans le cas où le bouton de fermeture est un texte */
#tableau_po .fermer a, #tableau_po .fermer a:hover {
  text-decoration: none !important;
}

#tableau_po .fermer a {
  color: black;
  transition: all ease 0.5s;
}

#tableau_po .fermer a:hover {
  color: white;
  transition: all ease 0.5s;
}

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

Qui est en ligne

Ceci est un code de QEEL crée suite à la Demande de Fluff', ici.

Le code

Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_body /!\ Mettez juste à la place du QEEL, ne remplacez pas le template par ce code! /!\ :

Code:

   <!-- BEGIN disable_viewonline -->
    <div id="qeel">
      <div id="groupes_qeel">
        <span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span>
      </div>
      <div id="infos_qeel">
        <span class="gensmall">
          <span id="post_nyo">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('post_nyo').innerHTML=document.getElementById('post_nyo').innerHTML.replace(/Nos membres ont posté un total de/,"Nos archives comptent");</script><script type="text/javascript">document.getElementById('post_nyo').innerHTML=document.getElementById('post_nyo').innerHTML.replace(/messages/,"missives ");</script></span>.
          <span id="users_nyo">{TOTAL_USERS}</span>
          <script type="text/javascript">document.getElementById('users_nyo').innerHTML=document.getElementById('users_nyo').innerHTML.replace(/membres enregistrés/,"citoyens, ");</script>.
          <span id="new_user_nyo">{NEWEST_USER}</span>
          <script type="text/javascript">document.getElementById('new_user_nyo').innerHTML=document.getElementById('new_user_nyo').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"dont la nouvelle recrue");</script>
        </span>
        <br/><br/>
        <span class="gensmall">
          <span id="online_users_nyo">{TOTAL_USERS_ONLINE}</span>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/il y a en tout/,"Il y a en tout, se promenant dans le royaume");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/utilisateur en ligne/,"personne");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/utilisateurs en ligne/,"personnes");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/::/,"soit");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Enregistré/,"citoyen");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Enregistrés/,"citoyens");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invisible/,"esprit");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invisibles/,"esprits");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invité/,"recrue potentielle .");</script>
          <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invités/,"recrues potentielles .");</script>
        </span>
        <br /><br/>
        <span class="gensmall">
          <span id="step">{LOGGED_IN_USER_LIST}</span>
          <script type="text/javascript">document.getElementById('step').innerHTML=document.getElementById('step').innerHTML.replace(/Utilisateurs enregistrés/,"En train de parcourir les lieux ");</script>
          <table id="connected">
            {L_CONNECTED_MEMBERS}
            <script type="text/javascript">jQuery('#connected span.gensmall').html(jQuery('#connected span.gensmall').html().replace(/Membres connectés/,"Ils fûrent parmis nous"));</script>
            {L_WHOSBIRTHDAY_TODAY}
            {L_WHOSBIRTHDAY_WEEK}
          </table>
        </span>
      </div>
      <div id="position_partenaires_qeel">
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
        <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
      </div>
    </div>
    <!-- END disable_viewonline -->

Le CSS:

Code:

   /***** DÉBUT QEEL *******/
    /* Permet de mettre l'image de fond du QEEL, sa grandeur et la couleur d'écriture. */
    #qeel {
      width: 800px;
      height: 682px;
      margin: auto;
      position: relative;
      color: #AAAAAA;
      background-image: url('URL_IMAGE_ICI');
    }

    /* Donne sa couleur au texte */
    #qeel .gensmall {
      color: #AAAAAA;
    }

    /* Permet de mettre en place les groupes & donner une largeur max + les caler vers la droite */
    #groupes_qeel {
      position: absolute;
      top: 95px;
      left: 300px;
      width: 450px;
      font-weight: bold;
      text-align: right;
    }

    /* Permet de positionner toutes les infos du QEEL & donner une largeur max */
    #infos_qeel {
      position: absolute;
      top: 180px;
      left: 375px;
      width: 350px;
    }

    /* Permet de retirer le fond des connectés ces dernières xx heures et pour les anniversaires */
    #connected {
      text-align: justify;
      width: 100%;
      background: none;
    }

    /* Permet de retirer le fond des connectés ces dernières xx heures et pour les anniversaires */
    #connected .row1 {
      text-align: justify;
      width: 100%;
      background: none;
    }

    /* Permet de positionner les partenaires */
    #position_partenaires_qeel {
      position: absolute;
      top: 506px;
      left: 138px;
      width: 522px;
      height: 118px;
    }

    /* Permet de mettre en place les images de partenaire et faire l'effet. */
    #position_partenaires_qeel img {
      display: inline-block;
      margin: 2px;
      opacity: 0.8;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      transition: all ease 1s;
    }

    /*Permet de faire l'effet sur les partenaires*/
    #position_partenaires_qeel img:hover {
      opacity: 1;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      transition: all ease 1s;
    }
    /***** FIN QEEL *******/

Créer une infobulle

Bonjour à tous! Voilà un petit tutoriel pour vous apprendre à faire une infobulle! Nous verrons rapidement les bases de ce qu'est une infobulle, mais également ses différentes variations (sur une image, sur un texte ou sur un objet (div, table, etc. mais nous ne verrons comme exemple qu'une div!)) ainsi que quelques effets sur cette dernière. Une fois avoir lu ce tuto, vous pourrez alors sans problème créer une infobulle par vous-même sans avoir à utiliser un LS uniquement pour ça! ^^

Les bases

Pour créer une infobulle, il nous faut trois choses: une balise qui entoure notre objet sur lequel sera l'infobulle ET l'infobulle, l'infobulle en elle-même, et enfin, l'objet sur lequel sera l'infobulle.
Comme déjà exprimé dans l'introduction et comme vous le voyez avec les titres de ce tuto, l'objet sur lequel sera l'infobulle peut être de plusieurs formes: un texte, une image, ou alors un autre objet, comme une able, un div ou une section entière même.
Pour afficher une infobulle, nous utiliseront alors la pseudo-classe hover qui permet de changer un objet au passage de la souris. On pourrait bien sûr utiliser d'autres pseudo-classes, comme target pour que cela soit "au click", cependant, ce tuto va uniquement vous montrer pour le hover (le target étant largement moins utilisé et quelque peu plus compliqué).

Passons donc tout de suite au code!

Code:

<div class="conteneur"><div class="objet_vise"></div><div class="infobulle"></div></div>

Effectivement, et là, pour l'instant, ce code ne fait pas grand chose... et n'affiche rien! En effet, vu que les div sont vides, rien ne s'affiche! Cependant, c'est la structure de base pour notre infobulle: une div qui entoure deux objets: le premier étant l'objet sur lequel sera l'infobulle, et le second l'infobulle en elle-même.
Vous pouvez bien sûr déjà remplir les deux div internes, et même changer la première div par autre chose (une imae, un span, etc) comme nous verrons plus tard, mais l'important est d'avoir ces trois éléments!

Cependant, avant de passer à autre chose, commençons tout de suite par la base du CSS pour ces trois éléments. Faites bien attention aux classes et ce qu'il s'y fait.

Code:

.conteneur {
position: relative;
height: 100px;
width: 100px;
overflow: visible;
}

.conteneur .objet_vise {
height: 100px;
width: 100px;
background-color: black;
}

.conteneur .objet_vise:hover {
/* ici, on peut modifier l'objet visé au hover si on le veut. Ici, je change sa couleur!*/
background-color: red;
}

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
}

Et ça donne ceci:



Effectivement! Mais ne vous inquiétez pas, voici les explications, pas à pas!

Code:

.conteneur {
position: relative;
height: 100px;
width: 100px;
overflow: visible;
}

Code:

.conteneur .objet_vise {
height: 100px;
width: 100px;
background-color: black;
}

Code:

.conteneur .objet_vise:hover {
/* ici, on peut modifier l'objet visé au hover si on le veut. Ici, je change sa couleur!*/
background-color: red;
}

Pour que vous visualisiez mieux, voici ce qu'on obtient avec .conteneur .objet_vise:hover { background-color: red; }


Et voici ce qu'on obtient avec .conteneur:hover .objet_vise { background-color: red; }


Il faut mettre votre souris sur l'infobulle!

Code:

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
}

Code:

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
}

Les variations

Sur une image

Donc au lieu d'une div, on peut simplement avoir une image en tant qu'objet visé (donc objet sur lequel sera l'infobulle).



Et voici le code correspondant:

Code:

<div class="conteneur"><img src="http://i55.servimg.com/u/f55/09/03/38/36/photo-10.png" title="Titre Image" alt="Titre Image"><div class="infobulle"></div></div>

Avec le CSS correspondant:

Code:

.conteneur {
position: relative;
height: 130px;
width: 130px;
overflow: visible;
}

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
}

Effectivement, mis à part la taille du conteneur qui change pour s'adapter à la taille de l'image, et le fait que la partie sur "objet_vise" est simplement effacée, eh bien rien ne change! C'est ça qui est bien avec les infobulles: changer d'un objet à l'autre est très simple!


Eh bien il vous suffit d'ajouter ces deux choses là:

Code:

.conteneur img {
/* Effet sur l'image lorsque la souris n'est pas là */
}

.conteneur img:hover {
/* Lorsque la souris est sur l'image*/
}

Ou bien sûr, comme expliqué plus tôt, on peut mettre .conteneur:hover img à la place de .conteneur img:hover.

Donc ceci permet de mettre en forme toutes les images qui sont dans conteneur.


Et oui! Si vous ne voulez pas que les images dans votre infobulle soient touchées, alors il va falloir mettre une classe à l'image sur laquelle sera l'infobulle, et donc refaire comme plus tôt.

Code:

<div class="conteneur"><img class="objet_vise" src="http://i55.servimg.com/u/f55/09/03/38/36/photo-10.png" title="Titre Image" alt="Titre Image"><div class="infobulle"></div></div>

Et voilà, le problème est contourné en réutilisant les codes de départ, mais en pansant que "objet_vise" est à présent une image!

Sur un texte

Voici donc ce que l'on veut avoir:
Blah blah blah. Ceci aura une infobulle...

Blah blah blah.

Et voici les codes:

Code:

Blah blah blah. <span class="conteneur"><span class="objet_vise">Ceci aura une infobulle... </span> <div class="infobulle"></div></span>Blah blah blah.

Code:

.conteneur {
position: relative;
overflow: visible;
}

.conteneur .objet_vise {
color: blue;
}

.conteneur .objet_vise:hover {
color: red;
}

.conteneur .infobulle {
position: absolute;
top: 20px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999;
}

À nouveau pas grand chose ne change, si ce n'est que l'objet visé et le conteneur sont tous deux des span! En effet, c'est très important, car les span sont des objet "inline" (=en ligne) c'est à dire qu'il n'y a pas de retour à la ligne avant ou après de façon forcée, ce qui permet de faire que tout ceci reste dans le texte.
Vous remarquerez aussi que la hauteur et la largeur des éléments en span ont été retirés, vu que ceux-ci se mettent à la taille de façon automatique: pas besoin donc de les mettre!

C'est donc une plus "grande" différence que ce qu'il y avait pour le passage d'une div à une image, mais relativement simple tout de même!

Sur un objet (div)

Eh bien c'est exactement le code vu au départ de notre tuto! Vos pouvez bien-sûr transformer votre div comme bon vous semble, y mettre du texte, une image de fond, etc etc etc. Bref, beaucoup de possibilités, et je laisse votre créativité imaginer que faire et le tenter! Comme d'habitude, la section des problèmes est là pour vous aider avec tout problème de code!

Quelques effets

Maintenant que vous savez comment faire une infobulle, vous devez vous dire que c'est assez... moche! En effet, elle ne fait qu'apparaître tout simplement et disparaître aussi vite qu'elle est venue! Aucune transition, etc. Je vais donc ici vous montrer quelques exemples de transitions, assez simple à effectuer sur les infobulles! Nous n'allons donc que toucher sur le code CSS des infobulles, le rester restera pareil. (Je mets juste une transition sur l'objet visé pour que cela soit plus joli).

Apparition en fondu

Ce que ça donne:


Et voici le CSS correspondant:

Code:

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
transition: all ease 1s;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
transition: all ease 1;
}

Comme vous le voyez, il suffit d'ajouter un "transition". Ici, elle se fait en une seconde (le 1s), mais on peut aussi la faire plus court ou plus longue en changeant cette valeur. On a également ajouté le transition au hover ET au normal. En effet, si on veut que l'infobulle apparaisse doucement, on voudrait aussi qu'elle disparaisse de la même manière!
Si vous ne voulez que cela soit fait en fondu que dans un sens, dites-vous que le "hover" est l'apparition, et le normal pour la disparition.

Apparition en agrandissement

Voici ce que nous voulons:


Et le code CSS correspondant, on utilise transform: scale:

Code:

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
-webkit-transform: scale(0);
transform: scale(0);
visibility: hidden;
transition: all ease 1s;
}

.conteneur:hover .infobulle {
-webkit-transform: scale(1);
transform: scale(1);
visibility: visible;
z-index: 999:
transition: all ease 1;
}

Comme vous pouvez le voir, on retire l'opacité et on met simplement le transform: scale à la place, en le faisant aller de 0 à 1. c'est à dire que l'infobulle ira d'une grandeur = 0 à une grandeur =1 (qui est sa grandeur naturelle. On n'a donc plus besoin d'opacité.
À nouveau, on utilise une transition pour que l'apparition se fasse graduellement!

Apparition en rotation

Voici ce que nous voulons:


Avec le code CSS:

Code:

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
opacity: 0;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
visibility: hidden;
transition: all ease 1s;
}

.conteneur:hover .infobulle {
opacity: 1;
visibility: visible;
z-index: 999:
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: all ease 1;
}

Ici, on utilise donc transform: rotate, en passant de 360 à 0 degrés. Cela permet de faire faire un tour complet à l'infobulle. Il est obligatoire d'avoir 0 degrés au hover, pour que votre infobulle soit à l'endroit est droite. Vous pouvez très bien changer la valeur si vous voulez, par exemple, qu'elle soit quelque peu en biais lors de l'arrêt de la transition!
La valeur de rotate au "normal" indique donc où on veut commencer la rotation, donc si l'infobulle fait un tour entier, un demi tour, etc. Bref, à vous de choisir!
Vous remarquez également qu'on a gardé l'opacité ici, donc qu'on a un mélange entre un fondu et une rotation! Cependant, ceci est obligatoire, car autrement, votre infobulle apparait de façon soudaine, et effectue simplement une rotation une fois apparue!
Et bien sûr, l'utilisation de transition pour que tout ceci se fasse un peu comme une animation!

Apparition en rotation et agrandissement

Voici ce que nous voulons:


Avec le code CSS:

Code:

.conteneur .infobulle {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
background-color: #C1BFBF;
-webkit-transform: rotate(360deg) scale(0);
transform: rotate(360deg) scale(0);
visibility: hidden;
transition: all ease 1s;
}

.conteneur:hover .infobulle {
visibility: visible;
z-index: 999:
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
transition: all ease 1;
}

Comme vous pouvez le voir, il y a présent deux valeurs à transform: rotate ET scale. Grâce à scale, on peut également supprimer l'opacité, vu que l'on part d'une grandeur nulle et que donc l'infobulle n'est pas "là".
Et bien sûr la transition pour l'effet d'animation.

Vous pouvez très bien a imaginer d'autres formes d'apparition pour les infobulles, mais ceci vous donne déjà quelques idées!

Et voilà, c'est la fin de ce tuto! Si vous avez des questions ou des problèmes, n'hésitez pas!

Faire un fond en transparence

Je pense que le titre est assez clair pour que vous imaginiez ce que l'on veut faire, malgré tout, voilà ce que je vais vous montrer comment faire.

Pour une couleur

Pour une couleur, le code est extrêmement simple! En effet, il suffit d'utiliser le fait que le background-color peut être exprimée en rgba, le a étant l'opacité de la couleur. Il suffit alors de connaître le code RGB de la couleur que l'on veut utiliser, et de lui donner comme dernier élément l'opacité que l'on veut.

Voici donc les codes:

Si on a accès à la feuille CSS du forum

Dans le HTML:

Code:

<div class="fond_transparent_blanc">Ceci est un texte, làlàlà!</div>

Dans le CSS:

Code:

.fond_transparent_blanc {
/* N'hésitez pas à mettre d'autres style ici */
  background-color: rgba(255, 255, 255, 0.8); /* Donc 0.5 = 50%, 0.8 = 80%, etc */
}

Si on est membre, à poster dans un message

Code:

<div style="background-color: rgba(255, 255, 255, 0.8); ">Ceci est un texte, làlàlà!</div>

Pour une image

Pour une image, c'est un tout petit peu compliqué! En effet, on doit ajouter une div supplémentaire, et utiliser le pseudo-élément ":before". Cependant, je vais tetner de vous explique au mieux ce qui se passe ici!

Voici déjà le code HTML:

Code:

<div class="conteneur"><div class="contenu">Ceci est un texte, làlàlà!.</div></div>

Vous voyez donc qu'il y a un div qui entoure notre texte. C'est très important, car sinon, ça ne va pas marcher! La structure est, comme vous le voyez, pas très difficile: la partie la plus difficile réside vraiment dans le CSS!

Si on a accès à la feuille CSS du forum

Voici le code à mettre:

Code:

.contenteur {
  /* Le position relative permet de contrôler le positionnement absolu de l'élément before. */
  position: relative;
 /* N'oubliez pas ici de mettre la hauteur et la largeur de l'élément, ainsi que tout autre effet de style voulu! */
}
.contenteur:before {
  content: ""; /* Obligé de le mettre ou rien ne s'affichera */
  /* Mettre un positionnement absolu et ensuite les 4 option de positionnement (top, bottom, left et right) à 0, permet de faire en sorte que cet élément prenne toute la LARGEUR et toute la HAUTEUR de l'élément parent, dans notre cas, le contenteur! */
  position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 /* L'image de fond, bien sûr! */
  background-image: url('URL_DE_L'IMAGE_ICI');  
  /* Le z-index est la position sur l'axe des z (donc de la profondeur) de cet élément. Ici, on le met à un pour qu'il soit derrière notre contenu. */
  z-index: 1;
 /* Ici on règle l'opacité d el'image de fond. 0.8 = 80%, 0.5 = 50%, etc. */
  opacity: 0.6;
}

.contenu {
  /* Mettre une position est obligatoire pour utiliser le z-index. Vu qu'on ne veut pas de positionnement absolu de notre texte, on le met en relatif. */
  position: relative;
  /* On veut bien sûr notre texte au-dessus de l'image de fond, dans ce cas, on met un z-index plus grand que celui de l'élément before */
  z-index: 2;
}

Si on est membre, à poster dans un message :

Il est cependant possible que vous n'ayez pas accès à la feuille de style du forum où vous voulez poster un tel élément!

Dans ce cas il va falloir utiliser les balises style. Cependant, si vous mettez le message tel quel, vous verrez rapidement que FA prend tous les retour à la ligne en compte! Vous devez alors retirer tous les retours à la ligne.

Voilà la façon de faire :

Code:

<style type="text/css"> CODE ICI SANS RETOUR À LA LIGNE</style>

Et voilà! =D J'espère que ce tuto vous a été utile et si vous avez la moindre question, n'hésitez pas à poster ici : https://www.never-utopia.com/f177-probleme-avec-mon-code !