Faire des onglet en (X)html/CSS
ybouane Faire des onglet en (X)html/CSS Note : 4.4/5 (4 votes) Derniéres modifications : 08/08/2010 à 05:36:02 Mots-Clés : onglet html css tabs in html faire des onglets code css style onglets parties diviser en onglets (X)html Bonjour, dans ce tutoriel, je vais vous apprendre à faire des onglets en utilisant le CSS et le (X)html. La navigation par onglet se fera par liens, donc chaque onglet aura sa propre page. Pour commencer, on aura deux types de boutons des onglets, le bouton de l'onglet actuellement affiché, et les boutons des autres onglets. Le bouton de l'onglet qui est ouvert aura la même couleur de fond que l'onglet même(son contenu) pour pouvoir facilement le reconnaitre. Les boutons des onglets fermé auront une autre couleur. Le bouton de l'onglet ouvert aura trois bordures une en haut et deux dans les côtés. il n'en aura pas une en bas. Les autres boutons eux auront des bordures aux quatre côtés. Et finalement le contenu aura lui aussi quatre bordures et aura un décalage négatif de 1px vers le haut comme ça, les bordures ne seront pas doublées. J'espère que vous avez compris les explications . Bon voici les codes: style.css: Code: CSS .onglet { display:inline-block; margin-left:3px; margin-right:3px; padding:3px; border:1px solid black; cursor:pointer; } .onglet a { color:#000000; text-decoration:none; } .onglet_n { background:#bbbbbb; border-bottom:1px solid black; } .onglet_y { background:#dddddd; border-bottom:0px solid black; padding-bottom:4px; } .contenu { background-color:#dddddd; border:1px solid black; margin-top:-1px; padding:5px; } ul { margin-top:0px; margin-bottom:0px; margin-left:-10px } h1 { margin:0px; padding:0px; } quoi.html: Code: (X)html <!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>Un système d'onglet en html</title> <link type="text/css" rel="stylesheet" media="all" title="CSS" href="style.css" /> </head> <body> <div class="onglets_html"> <div class="onglets"> <div class="onglet_y onglet"><a href="quoi.html">Quoi</a></div> <div class="onglet_n onglet"><a href="qui.html">Qui</a></div> <div class="onglet_n onglet"><a href="pourquoi.html">Pourquoi</a></div> </div> <div class="contenu"> <h1>Quoi?</h1> Un simple système d'onglet utilisant les technologies:<br /> <ul> <li>(X)html</li> <li>CSS</li> </ul> </div> </div> </body> </html> qui.html: Code: (X)html <!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>Un système d'onglet en html</title> <link type="text/css" rel="stylesheet" media="all" title="CSS" href="style.css" /> </head> <body> <div class="onglets_html"> <div class="onglets"> <div class="onglet_n onglet"><a href="quoi.html">Quoi</a></div> <div class="onglet_y onglet"><a href="qui.html">Qui</a></div> <div class="onglet_n onglet"><a href="pourquoi.html">Pourquoi</a></div> </div> <div class="contenu"> <h1>Qui?</h1> C'est un script réalisé par Ybouane,<br /> Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a> </div> </div> </body> </html> pourquoi.html: Code: (X)html <!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>Un système d'onglet en html</title> <link type="text/css" rel="stylesheet" media="all" title="CSS" href="style.css" /> </head> <body> <div class="onglets_html"> <div class="onglets"> <div class="onglet_n onglet"><a href="quoi.html">Quoi</a></div> <div class="onglet_n onglet"><a href="qui.html">Qui</a></div> <div class="onglet_y onglet"><a href="pourquoi.html">Pourquoi</a></div> </div> <div class="contenu"> <h1>Pourquoi?</h1> Pour simplifier la navigation et la diviser en parties </div> </div> </body> </html> Essayer Pour toutes questions ou commentaires, veuillez utiliser le formulaire de contact ou me contacter par MP, vous pouvez aussi utiliser le forum. merci, j'espère que vous avez aimé ce tutoriel et qu'il vous sera utile. Scripts et tutoriaux similaires à celui ci: Système d'onglets en Javascript, (X)html et CSS dans la même page Faire un input file stylé en Css (X)html et Javascript Faire un calendrier en javascript avec un effet de transparence [Tutoriel]Faire clignoter un texte en (X)html / CSS Background scrollable avec overflow:auto; sous firefox (X)html/CSS Propriété position et z-index en css tutoriel (X)html/CSS Modifier le curseur en image ou curseurs proposés en CSS/(X)html Simple PHP Forum Script - Forum en php facile simple script code telecharger forum php gratuit mysql Commentaires Ajouter un commentaire Pseudo: Message: Code anti-bot: (recharger) Vous n'êtes actuellement pas connecté, certaines de vos informations(tel que votre Adresse IP) seront enregistrées pour éviter du spam. Votre message ne doit pas contenir certains mots ou une adresse internet, sinon, il ne sera pas envoyé. Les commentaires Envoyé par Alison le 23/03/2010 à 17:50:23 Bonjour, J'aimerais savoir ce qu'il faudrait modifier pour que le contenu de l'onglet s'affiche au survolage de la souris. Merci d'avance pour la réponse. Envoyé par ybouane le 25/03/2010 à 05:18:19 Bonjour, @Alison: Tu doit mettre l'attribut suivant dans les balise <a> des titres: onmouseover="window.location.replace(this.href);" Cordialement :) Envoyé par jiben le 08/04/2010 à 19:56:24 salut, C'est possible de l'intégrée a un forum ceci ? Envoyé par Rasta le 02/11/2010 à 20:46:11 Absolument excellent, voilà justement ce qu'il me fallait... Et en plus écrit rapidement et facilement. Grand Merci à toi Ybouane ! Envoyé par Lobo Tommy le 04/01/2011 à 20:04:07 C'est bien beau des onglets, mais pour le débutant qui ne connait presque rien au css, s'il n'y a pas de page index.html pour les visionner, comment on fait? Envoyé par many le 31/01/2011 à 12:11:22 salut moi en ce moment j'ai un souci lorsque je met mon site en ligne mes boutons pour changer de page ne fonctionne pas du coup pour le moment j'ai était obliger de le retirer du web ci tu pouvais me donner un coup de main ce serrais cool en plus c'est mon 1er site avec autant de page habituellement il n'y en a qu'une donc pas de souci mais la suis coincé merci Envoyé par vqsqdqsd le 31/07/2011 à 16:18:03 HUHuhvuorevnuroqvneioq Envoyé par Lucky le 09/10/2011 à 16:22:57 A tes souhait vqsqdqsd =3 Envoyé par sga le 03/11/2011 à 14:50:50 Bonjour y-a-t-il un moyen de savoir quel est l'onglet actif ? En effet, ma page comporte un bandeau dont j'aimerais modifier le contenu en fonction de l'onglet. Envoyé par mlidvmcc le 24/01/2012 à 12:30:09 20

Faire des onglet en (X)html/CSS

ybouane

Faire des onglet en (X)html/CSS
Note : 4.4/5 (4 votes)
Derniéres modifications : 08/08/2010 à 05:36:02
Mots-Clés : onglet html css tabs in html faire des onglets code css style onglets parties diviser en onglets (X)html

Bonjour,
dans ce tutoriel, je vais vous apprendre à faire des onglets en utilisant le CSS et le (X)html.
La navigation par onglet se fera par liens, donc chaque onglet aura sa propre page.

Pour commencer, on aura deux types de boutons des onglets, le bouton de l'onglet actuellement affiché, et les boutons des autres onglets.

Le bouton de l'onglet qui est ouvert aura la même couleur de fond que l'onglet même(son contenu) pour pouvoir facilement le reconnaitre. Les boutons des onglets fermé auront une autre couleur.

Le bouton de l'onglet ouvert aura trois bordures une en haut et deux dans les côtés.
il n'en aura pas une en bas.

Les autres boutons eux auront des bordures aux quatre côtés.

Et finalement le contenu aura lui aussi quatre bordures et aura un décalage négatif de 1px vers le haut comme ça, les bordures ne seront pas doublées.

J'espère que vous avez compris les explications

.

Bon voici les codes:

style.css:

Code: CSS

.onglet

{

        display:inline-block;

        margin-left:3px;

        margin-right:3px;

        padding:3px;

        border:1px solid black;

        cursor:pointer;

}

.onglet a

{

        color:#000000;

        text-decoration:none;

}

.onglet_n

{

        background:#bbbbbb;

        border-bottom:1px solid black;

}

.onglet_y

{

        background:#dddddd;

        border-bottom:0px solid black;

        padding-bottom:4px;

}

.contenu

{

        background-color:#dddddd;

        border:1px solid black;

        margin-top:-1px;

        padding:5px;

}

ul

{

        margin-top:0px;

        margin-bottom:0px;

        margin-left:-10px

}

h1

{

        margin:0px;

        padding:0px;

}

quoi.html:

Code: (X)html

<!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>Un syst&egrave;me d'onglet en html</title>

    <link type="text/css" rel="stylesheet" media="all" title="CSS" href="style.css" />

</head>

<body>

        <div class="onglets_html">

        <div class="onglets">

            <div class="onglet_y onglet"><a href="quoi.html">Quoi</a></div>

            <div class="onglet_n onglet"><a href="qui.html">Qui</a></div>

            <div class="onglet_n onglet"><a href="pourquoi.html">Pourquoi</a></div>

        </div>

        <div class="contenu">

            <h1>Quoi?</h1>

            Un simple syst&egrave;me d'onglet utilisant les technologies:<br />

            <ul>

                <li>(X)html</li>

                <li>CSS</li>

            </ul>

        </div>

    </div>

</body>

</html>

qui.html:

Code: (X)html

<!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>Un syst&egrave;me d'onglet en html</title>

    <link type="text/css" rel="stylesheet" media="all" title="CSS" href="style.css" />

</head>

<body>

        <div class="onglets_html">

        <div class="onglets">

            <div class="onglet_n onglet"><a href="quoi.html">Quoi</a></div>

            <div class="onglet_y onglet"><a href="qui.html">Qui</a></div>

            <div class="onglet_n onglet"><a href="pourquoi.html">Pourquoi</a></div>

        </div>

        <div class="contenu">

            <h1>Qui?</h1>

            C'est un script r&eacute;alis&eacute; par Ybouane,<br />

            Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>

        </div>

    </div>

</body>

</html>

pourquoi.html:

Code: (X)html

<!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>Un syst&egrave;me d'onglet en html</title>

    <link type="text/css" rel="stylesheet" media="all" title="CSS" href="style.css" />

</head>

<body>

        <div class="onglets_html">

        <div class="onglets">

            <div class="onglet_n onglet"><a href="quoi.html">Quoi</a></div>

            <div class="onglet_n onglet"><a href="qui.html">Qui</a></div>

            <div class="onglet_y onglet"><a href="pourquoi.html">Pourquoi</a></div>

        </div>

        <div class="contenu">

            <h1>Pourquoi?</h1>

            Pour simplifier la navigation et la diviser en parties

        </div>

    </div>

</body>

</html>

Essayer

Pour toutes questions ou commentaires, veuillez utiliser le formulaire de contact ou me contacter par MP, vous pouvez aussi utiliser le forum.

merci, j'espère que vous avez aimé ce tutoriel et qu'il vous sera utile.

Scripts et tutoriaux similaires à celui ci:

Commentaires

Ajouter un commentaire

Les commentaires

Envoyé par Alison le 23/03/2010 à 17:50:23

Bonjour,

J'aimerais savoir ce qu'il faudrait modifier pour que le contenu de l'onglet s'affiche au survolage de la souris. Merci d'avance pour la réponse.

Envoyé par ybouane le 25/03/2010 à 05:18:19

Bonjour,
@Alison: Tu doit mettre l'attribut suivant dans les balise <a> des titres:
onmouseover="window.location.replace(this.href);"

Cordialement :)

Envoyé par jiben le 08/04/2010 à 19:56:24

salut,

C'est possible de l'intégrée a un forum ceci ?

Envoyé par Rasta le 02/11/2010 à 20:46:11

Absolument excellent, voilà justement ce qu'il me fallait... Et en plus écrit rapidement et facilement. Grand Merci à toi Ybouane !

Envoyé par Lobo Tommy le 04/01/2011 à 20:04:07

C'est bien beau des onglets, mais pour le débutant qui ne connait presque rien au css, s'il n'y a pas de page index.html pour les visionner, comment on fait?

Envoyé par many le 31/01/2011 à 12:11:22

salut
moi en ce moment j'ai un souci lorsque je met mon site en ligne mes boutons pour changer de page ne fonctionne pas
du coup pour le moment j'ai était obliger de le retirer du web ci tu pouvais me donner un coup de main ce serrais cool
en plus c'est mon 1er site avec autant de page habituellement il n'y en a qu'une donc pas de souci mais la suis coincé

merci

Envoyé par vqsqdqsd le 31/07/2011 à 16:18:03

HUHuhvuorevnuroqvneioq

Envoyé par Lucky le 09/10/2011 à 16:22:57

A tes souhait vqsqdqsd =3

Envoyé par sga le 03/11/2011 à 14:50:50

Bonjour

y-a-t-il un moyen de savoir quel est l'onglet actif ?
En effet, ma page comporte un bandeau dont j'aimerais modifier le contenu en fonction de l'onglet.

Envoyé par mlidvmcc le 24/01/2012 à 12:30:09