Système d'onglet ?

Bonjour !

J'aimerais bien savoir faire un système d'onglet en HTML... Est-ce que quelqu'un pourrait m'aider ?

Merci d'avance,
alice190.

Coucou

.

Alors, par système d'onglet tu entends quoi ? n_n

Comme notre page d'accueil ? Comme la signature de [ce sujet] ? Autre chose ? Si oui aurais-tu un exemple précis ou une explication de ce que tu veux ? Smile

Oui exactement comme sur ce sujet. J'aimerais juste savoir quelles sont les balises HTML qu'ont peut utiliser pour faire des onglets et comment les utiliser ect...

Alors, si tu veux faire un système d'onglets avec seulement de l'HTML, ce n'est pas la meilleure solution à mon avis car il faut faire une page web par onglet, je te renvoie vers [→ Ce lien].

Pour quelque chose de plus simple est d'utiliser du javascript. Je suis loin de bien connaitre le javascript donc je t'avoue que j'ai un code de base (qui n'est pas de moi ^^) que je modifie à l'aide de CSS pour avoir le rendu que je veux :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blabla</title>
<script type="text/javascript">
//
</script>
<style type="text/css">

.onglet { }

.onglet_0 { }

.onglet_1 { }

.contenu_onglet {
         display:none;
         }

</style>
</head>
<body>

<span class="onglet_0 onglet" id="onglet_a" onmouseover="javascript:change_onglet('a');">onglet 1</span>
<span class="onglet_0 onglet" id="onglet_b" onmouseover="javascript:change_onglet('b');">onglet 2</span>
<span class="onglet_0 onglet" id="onglet_c" onmouseover="javascript:change_onglet('c');">onglet 3</span>

<div class="contenu_onglet" id="contenu_onglet_a">

Premier onglet

</div>
<div class="contenu_onglet" id="contenu_onglet_b">

Deuxième onglet

</div>
<div class="contenu_onglet" id="contenu_onglet_c">

Troisième onglet

</div>

<script type="text/javascript">
//
</script>
</body>
</html>

On va prendre étape par étapes.
Alors pour le head:

Code:: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blabla</title>
<script type="text/javascript">
//
</script>
<style type="text/css">

.onglet { }

.onglet_0 { }

.onglet_1 { }

.contenu_onglet {
         display:none;
         }

</style>
</head>

je te déconseille de modifier le meta, surtout ne pas enlever le utf-8 sinon tu auras des soucis au niveau des caractères spéciaux du type é è à ... et ça deviendra vite illisible n_n

Le title tu peux bien entendu le modifier, je te déconseille aussi de toucher au script si tu ne t'y connais pas Smile

Tu as le CSS intégré à la page web, (mais tu peux bien entendu faire une feuille de style externe et la lier avec

Code:: <link rel="stylesheet" type="text/css" href="liendelapage.css" />

.)

• Bref, au niveau du style .onglet correspond à l'allure générale des onglets du haut.

• .onglet_0 correspond aux onglets qui ne sont pas "ouverts".

• .onglet_1 correspond à l'onglet ouvert.

• Pour finir, .contenu_onglet correspond comme son nom l'indique au contenu des onglets, il faut veiller à garder le display:none; pour que seulement le contenu voulu s'affiche.

Ensuite pour le body, on a d'abord les

Code:: <span class="onglet_0 onglet" id="onglet_a" onmouseover="javascript:change_onglet('a');">onglet 1</span>
<span class="onglet_0 onglet" id="onglet_b" onmouseover="javascript:change_onglet('b');">onglet 2</span>
<span class="onglet_0 onglet" id="onglet_c" onmouseover="javascript:change_onglet('c');">onglet 3</span>

Ce sont les trois onglets, là ils sont avant le contenu, donc ils sont placés au dessus. Tu peux bien entendu placer les onglets en bas, ou à gauche/droite à l'aide d'un tableau.

Ne change pas les class="onglet_0 onglet".

Si tu veux changer l'id des span pour mieux t'y retrouver, tu peux le faire, mais il faut faire attention à tout modifier en conséquence. Déjà veille bien à garder le "onglet_" avec le tiret du bas _, tu peux modifier la lettre qui suit par "onglet_premieronglet" ou par "onglet_blablabla" si tu le veux.
Il faudra par la suite modifier le onmouseover="javascript:change_onglet('a');" en onmouseover="javascript:change_onglet('premieronglet');" puis dans le contenu de l'onglet :
< div class="contenu_onglet" id="contenu_onglet_a"> devient < div class="contenu_onglet" id="contenu_onglet_premieronglet"> et var anc_onglet = 'a'; devient var anc_onglet = 'premieronglet';
Mais tout ça devient un peu trop compliqué. Finalement, évite de modifier les noms, il ne faudrait pas s'y perdre n_n

Huum, je crois qu'il ne me reste qu'à te parler des contenus

Code:: <div class="contenu_onglet" id="contenu_onglet_a">

Premier onglet

</div>
<div class="contenu_onglet" id="contenu_onglet_b">

Deuxième onglet

</div>
<div class="contenu_onglet" id="contenu_onglet_c">

Troisième onglet

</div>

Chaque contenu est mis dans une div, tu peux modifier l'apparence du contenu avec .contenu_onglet.
Tu remplis chaque onglet avec ce que tu souhaites, du texte, des images...

Hum, je ne sais pas si j'ai été très claire dans mon explication, n'hésite pas à prendre le code de base, de modifier deux trois trucs juste pour voir ce qui change, tu comprendras par toi même comment le code est composé.

Voilà si tu as besoin de plus d'infos sur une chose précise je suis là Smile

Ok j'ai pas tout compris, mais c'est ok^^Par contre, pour mettre les codes sans que ça mette le résultat (là où tu as mis les codes quoi), tu fais comment ?

Hésite pas à demander des explications supplémentaires sur certaines choses hein ;)

Le

Code:: texte comme ça ?

C'est la balise code :

Code:: [code]texte comme ça ?[/code]

Sinon je ne vois pas de quoi tu parles ^^"

oui comme ça merci beaucoup !!!

As-tu d'autres questions au niveau des codes ?
Si ce n'est pas le cas je déplace le sujet dans les demandes terminées Smile

EDIT 27/07 : Pas de réponse, je déplace le sujet. Pour tout problème relatif à la même question envoyez moi un MP pour déverrouiller le sujet ou postez en un nouveau.