plusieurs pages sur une page HTML

par civ gendarmerie 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

plusieurs pages sur une page HTML Page_h10

par TheDirector 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>