[Avancé/Intermédiaire] Onglets | html css
Sirius B. Powell
Sirius B. Powell
Région d'origine : Algatia - Hoenn
Âge : 18 yo
Niveau : 51
Jetons : 2738
Points d'Expériences : 1534
Coordinateur Mode
Sujet: [Avancé/Intermédiaire] Onglets | html css   Lun 2 Juil - 20:44

Onglets
Tuto Intermédiaire/Avancé | HTML CSS

Salut ! Bienvenue dans ce tuto ! Cette méthode va te permettre de créer des codes sur forumactif avec des onglets sans avoir accès au panneau d’administration et à la feuille de style css du forum en question, simplement avec les balises en début de post. Avant de te lancer dans ce tuto, soit certain d’avoir un minimum de base en codage HTML. Si l’évocation de classes et de balise
Code:
<style>
 ne te parle pas, rebrousse ton chemin jeune aventurier, car ce n’est pas de ton niveau.
Note : Je te conseille fortement avant que tu ne tentes quoi que ce soit, de cc le bout de code « exemple » que je te propose à la fin de cette explication afin que tu puisses le bricoler pour que tu  comprennes comment ça fonctionne. Essayer est le meilleur moyen d’apprendre !  
Note 2 : Bien sur, toutes les variables/noms de classes/id sont modifiables !
Note 3 : Ce que je propose ici est une base, tu bien évidemment modifier/ajouter du css pour le customiser !  

Étape 1 : Le fonctionnement

Nous allons utiliser les display pour cette méthode. En anglais, display veut dire montrer, exposer. La manière dont un élément est display détermine donc comment il est affiché à l’écran. Par exemple, une div possède de base un display block ce qui explique que lorsque que l’on met plusieurs div à la suite, elles s’affichent les unes en dessous des autres. À contrario, un span a un display inline, ce qui permet d’ajouter des éléments sur la même ligne. Si tu es curieux, n’hésite pas à te renseigner sur cette propriété css qui a bien des avantages !

Dans notre cas d’onglet, le display est l’élément clé du bon fonctionnement de ton code. Lorsque le display est block, tu verras le contenu de l’onglet et lorsqu’il est none, tu ne le verras pas.

Le principe est simple, le code se sépare en deux parties : les boutons et les onglets. Les boutons permettent de naviguer entre les onglets. Ainsi, lorsque tu cliqueras sur le bouton 1, le display de l’onglet 1 deviendra « block » et les display des autres onglets deviendront « none », lorsque que tu cliqueras sur le bouton 2, le display de l’onglet 2 deviendra « block » et les display des autres onglets deviendront « none ».

Bref, tu as compris le principe, tout du moins, j’espère, c’est donc partit pour le concret !

Étape 2 : Le HTML  

Il se sépare en deux partie : les boutons qui vont te permettre de naviguer entre les onglets et les onglets en eux-même.

Les boutons :
Code:
<label for="p1" class="ongletf">Bouton 1</label><label for="p2" class="ongletf">Bouton 2</label>

Les onglets :
Code:
<div class="zone_onglet"><input id="p1" type="radio" name="ongletf" checked="" /><div class="ongletcont">Le contenu de ton bouton 1</div><input id="p2" type="radio" name="ongletf"/><div class="ongletcont">Le contenu de ton bouton 2</div></div>

Explication du code :
Les labels représentent les boutons, ainsi, quand tu vas cliquer sur le bouton 1, c’est la « page » p1 qui va passer en « display: block; » de même pour le bouton 2 et tous les boutons que tu peux ajouter. Lorsque que tu cliques sur un bouton, il est alors considéré comme check. C’est quand un bouton est check que le display pourra prendre la valeur « block » comme tu le verras dans le css.

Ces « pages » qui vont apparaître lorsque tu cliques sur tes boutons sont gérées par des « input » dont l’identifiant « id » prend l’attribut du bouton. Pour le bouton 1 relié à la page « p1 », l’id de l’input qui permettra l’apparition du contenu de l’onglet sera « p1 ».
Pour te simplifier la compréhension, j’ai utilisé deux couleurs. Les morceaux de code d’une même couleur sont relié : le bouton 1 « for="p1" » est relié à l’input « id="p1" » et ainsi de suite pour les autres boutons.

Le « type="radio" » est indique le type du bouton. Un bouton de type radio est une case checkable comme si dessous.



Le « name="ongletf" » est indispensable et permet de lier votre bouton à votre input.

Le premier input a une partie de code supplémentaire
Code:
checked=""
qui indique que le premier onglet est ouvert de base. Comme vu plus haut, pour que le display soit block, il faut que l'input soit check. En ajoutant ce morceau de code, on affiche le premier onglet dès l'ouverture de la page.

On ajoute à cette base deux div. Une div qui entoure tous les pages « zone_onglet » et une div dans chaque page « ongletcont ». La première div « zone_onglet » possède l’unique attribut (indiqué dans le css) de « display:none » cela permet de donner l’attribut « none » à tous les onglets autres que celui check. Enfin, la div « ongletcont » permet d’afficher le contenu de l’onglet quand celui si est check.

Note : Selon ce que tu veux faire dans ton code, tu peux placer les labels avant ou après tes inputs. Les éléments sont indépendants et tu n’as pas besoin de suivre l’ordre que je propose.
Note 2 : Il faut que absolument que la partie onglet de ton code soit sous la forme donnée. Tu ne dois pas sauter de ligne après l’input. Concrètement, sur un autre support que FA tu peux, mais comme FA compte les sauts de ligne, ça fera aller à la ligne chaque onglet et c’est pas forcément esthétique. Je te conseille néanmoins d’aller à la ligne en codant parce que c’est carrément plus clair. Mais cher ami, tu vis ta vie et tu fais bien comme tu veux.

Étape 3 : Le CSS
Comme ce CSS est placé en début de post, il n’a pas la forme traditionnel des fiches css. Si tu es habitué des balises styles, tu n’auras pas de problème. Si c’est ta première fois avec elles, ne t’inquiètes pas, c’est pas bien compliqué. Dans une fiche de CSS traditionnelle, le CSS se présente ainsi :
Code:
.catégorie{
 width: 38px;
 height: 50px;
}
.fond{
 padding: 5px;
 background-color: #fff;
}
Or, dans ce tuto, tu vas l’utiliser sous cette forme :
Code:
<style>.catégorie{width: 38px; height: 50px;} .fond{padding: 5px; background-color: #fff;}</style>

Comme tu peux voir, c’est pas bien compliqué ! Passons au vif du sujet puisque tu sais déjà tout ça normalement.

Donc, notre CSS, ici, n’a pas fonction de « style » mais plus de contrôle. En effet, tu vas en rien changer l’apparence de notre HTML, tu vas juste jouer avec les display ce qui, en soit, est une forme de changement d’apparence puisque que, je te le rappelle, « display: block; » fait apparaître notre onglet et « display: none; » le fait disparaître.

Le code :
Code:
<style>.ongletf{cursor: pointer;} .ongletcont{display: none;} .zone_onglet input {display: none;} input:checked + .ongletcont{display: block;}</style>

L’explication du code :
Comme tu peux le voir, le code est court et pas très compliqué.
Il consiste principalement à donner à tous tes onglets la valeur de display « none ». C’est le cas pour « ongletcont » qui représente le contenu de ton onglet et « zone_onglet » qui contient l’ensemble de tes onglets.
La partie de code « ongletf » permet de donner la forme que vous souhaitez à vos boutons. Ce qui y est actuellement « cursor : pointer; » permet de modifier la forme de votre curseur afin de faire comprendre à l’utilisateur que le bouton est cliquable.
La dernière partie du code « input:checked + .ongletcont{display: block;} » indique que si l’input est check, « ongletcont » prend la valeur « block ». Le « + » fonctionne comme un si. Si ton input est check, alors le display de l’ongletcont est block. Tout simplement !

Le code exemple
Code:
<style>.ongletf{cursor: pointer;} .ongletcont{display: none;} .zone_onglet input {display: none;} input:checked + .ongletcont{display: block;}</style>

<label for="f1" class="ongletf">Bouton 1</label><label for="f2" class="ongletf">Bouton 2</label><label for="f3" class="ongletf">Bouton 3</label><div class="zone_onglet"><input id="f1" type="radio" name="ongletf" checked="" /><div class="ongletcont">Le contenu de ton bouton 1</div><input id="f2" type="radio" name="ongletf"/><div class="ongletcont">Le contenu de ton bouton 2</div><input id="f3" type="radio" name="ongletf"/><div class="ongletcont">Le contenu de ton bouton 3</div></div>

Conclusion
Voilà, voilà, je pense avoir fait le tour, j’espère avoir été claire et j’espère que ça pourra vous aider. Je reste joignable si vous avez des questions ou des soucis avec vos codes, je me ferais un plaisir de vous aider !

Un grand merci à Chupp qui a subit mes multiples questions et qui m’a permit de réussir à te faire ce petit tuto.


_________________
sirius
liens
atelier
[Avancé/Intermédiaire] Onglets | html css
Page 1 sur 1
Permission de ce forum: Vous pouvez répondre aux sujets dans ce forum
Sauter vers:  
Outils de modération :