plusieurs pages sur une page HTML

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu plusieurs pages sur une page HTML

Message par civ gendarmerie le Ven 3 Oct 2014 - 16:27

bonjour
Est-il possible de mettre dans une page HTML plusieurs pages (avec des onglets)?
Enfaite je veux faire dans une seule page HTML plusieurs pages, quand on clique sur l'onglet "synoptique", sa nous met la page de l'image, on clique sur "page 1" sa ouvre met une autre page avec un autre contenu etc




Dernière édition par civ gendarmerie le Ven 3 Oct 2014 - 19:23, édité 1 fois

civ gendarmerie
**

Messages : 73
Inscrit(e) le : 14/08/2014

http://civgendarmerie.forumactif.org/
civ gendarmerie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: plusieurs pages sur une page HTML

Message par TheDirector le Ven 3 Oct 2014 - 17:44

Bonjour,
CSS :

Code:
.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;
}

Ensuite tu créé 1 page par onglet (exemple: quoi, qui, pourquoi)

Page quoi (onglet 1) :

Code:
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page onglets</title>
</head>
<body>
        <div class="onglets_html">
        <div class="onglets">
            <div class="onglet_y onglet"><a href="#">Quoi</a></div>
            <div class="onglet_n onglet"><a href="LIEN PAGE QUI">Qui</a></div>
            <div class="onglet_n onglet"><a href="LIEN PAGE POURQUOI">Pourquoi</a></div>
        </div>
        <div class="contenu">
            <h1>Quoi?</h1>
            TEXTE / CONTENU
        </div>
    </div>
</body>
</html>

Page qui (onglet 2) :

Code:
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page onglets</title>
</head>
<body>
        <div class="onglets_html">
        <div class="onglets">
            <div class="onglet_n onglet"><a href="LIEN PAGE QUOI">Quoi</a></div>
            <div class="onglet_y onglet"><a href="#">Qui</a></div>
            <div class="onglet_n onglet"><a href="LIEN PAGE POURQUOI">Pourquoi</a></div>
        </div>
        <div class="contenu">
            <h1>Qui?</h1>
            TEXTE / CONTENU
        </div>
    </div>
</body>
</html>

Page pourquoi (onglet 3) :

Code:
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page onglets</title>
</head>
<body>
        <div class="onglets_html">
        <div class="onglets">
            <div class="onglet_n onglet"><a href="LIEN PAGE QUOI">Quoi</a></div>
            <div class="onglet_n onglet"><a href="LIEN PAGE QUI">Qui</a></div>
            <div class="onglet_y onglet"><a href="#">Pourquoi</a></div>
        </div>
        <div class="contenu">
            <h1>Pourquoi?</h1>
            TEXTE / CONTENU
        </div>
    </div>
</body>
</html>

Tu peux bien sûr créer autant d'onglets (et donc de pages !) que tu veux Wink N'hésites pas à modifier le CSS Wink C'était juste pour exemple Wink

Cordialement

TheDirector
*****

Masculin
Messages : 635
Inscrit(e) le : 08/05/2012

http://contrehomophobes.pro-forum.fr/
TheDirector a été remercié(e) par l'auteur de ce sujet.

Résolu Re: plusieurs pages sur une page HTML

Message par civ gendarmerie le Ven 3 Oct 2014 - 19:23

merci, sa marche Smile

civ gendarmerie
**

Messages : 73
Inscrit(e) le : 14/08/2014

http://civgendarmerie.forumactif.org/
civ gendarmerie a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum