|
Nezu
{ Membre }
Messages : 7
| J'ai écumé la recherche, j'en ai trouvé, des sujets sur les onglets, mais bon sang, rien qui m'aidait.
Donc grâce à ce code qui me semble bien connu et ô combien utile, je sais faire un onglet sur ma PDA. J'ai trouvé, en fouillant par-ci par là, qu'il fallait passer par des IFRAMEs pour ce faire. Mais je n'ai absolument rien compris. Et donc, j'ai bien besoin d'aide..
Merci de votre compréhension et de votre lecture, bonne journée (: |
Dernière édition par Nezu le Lun 07 Fév 2011, 15:55, édité 1 fois | |
|
| |
Oyoken
{ Membre }
Messages : 34
| Bonsoir, Malheureusement tu ne dis pas ce que tu souhaites faire avec ce code ? Je n'arrive pas à savoir d'après ton post quel est ton problème concrètement. En tout cas tu n'as pas besoin de passer par des IFRAMEs pour faire une PA en onglets Un peu plus d'explications pour nous comprenions ce dont tu as besoin ? Bien à toi | | |
|
| |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Bonjour : Oyoken : le membre veut simplement intégrer des onglets dans un sujet/message et non dans la page d'accueil et comme il faut passer par les iframes, il n'a pas compris le tutoriel des iframes. Qu'est-ce que tu n'as pas compris au juste Nezu dans ce tutoriel ? Bonne soirée! | | |
|
| |
Nezu
{ Membre }
Messages : 7
| Ben déjà, je comprends pas bien ce qu'est un Iframe. Puis même lorsque j'ai créé la page HTML ( page sur laquelle j'ai mis des codes un peu au hasard, je l'admet oo ), je sais pas quoi en faire. | | |
|
| |
Tupac
{ Membre actif }
Messages : 368
| Bonsoir Je vais vous expliquer c'est très simple. Copier le code en entier qui se trouve donc sur ce lien. Ensuite placer ce même code dans une page html apparemment vous savez faire cela. Une fois la page faite copier l'adresse de celle-ci puis la placer dans le code ci-dessous - Code:
-
<iframe src="adresse de votre page html" style="height: 225px; width: 615px; background:transparent;" frameborder="no"; scrolling="no"></iframe> Attention de bien mettre la hauteur et largeur de votre menu,si une page de votre menu est plus grande que les autres mettre la hauteur et largeur de celle-ci dans l'iframe pour ne pas qu'une partie de votre menu soit cachée. Il ne vous reste plus qu'a placer votre iframe dans votre message. Voila je pense avoir tout dit. | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Pour l'information pseudo pédagogique, une iframe, c'est une "fenêtre" qui donne sur une autre page. Grosso modo, sans changer de place, tu regardes chez ton voisin, quoi XD | | |
|
| |
Nezu
{ Membre }
Messages : 7
| Awh, merci beaucoup ! Ca marche bien ^^ Et merci pour l'info (:
Ah, par contre, une dernière question : Si, par exemple, je veux faire plusieurs onglets dans plusieurs messages, tous différents, il me faut changer le code à même la page HTML ? Et donc, c'est difficilement accessible aux membres ?
Oh, et, pour aligner les onglets à gauche, comment fait-on ? | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Si dans ton code tu as bien un - Code:
-
<div class="onglets"> Tu peux rajouter ceci dans ton CSS : - Code:
-
.onglets { text-align:left; } Pour plusieurs onglets dans plusieurs messages, je n'ai pas bien compris la question O_o | | |
|
| |
Nezu
{ Membre }
Messages : 7
| Le align:left; ne marche pas.. Je vous passe mon code, au cas où :3 - 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>Un système d'onglet en javascript</title> <script type="text/javascript"> //<!-- function change_onglet(name) { document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet'; document.getElementById('onglet_'+name).className = 'onglet_1 onglet'; document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none'; document.getElementById('contenu_onglet_'+name).style.display = 'block'; anc_onglet = name; } //--> </script> <style type="text/css"> .onglets { display:inline-block; margin-left:3px; margin-right:3px; padding:3px; text-align:left; border:1px solid black; cursor:pointer; } .onglet_0 { background:#bbbbbb; border-bottom:1px solid black; } .onglet_1 { background:#dddddd; border-bottom:0px solid black; padding-bottom:4px; } .contenu_onglet { background-color:#dddddd; border:1px solid black; margin-top:-1px; padding:5px; display:none; } ul { margin-top:0px; margin-bottom:0px; margin-left:-10px } h1 { margin:0px; padding:0px; } </style> </head> <body> <div class="systeme_onglets"> <div class="onglets"> <span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Quoi</span> <span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui</span> <span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span> </div> <div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_quoi"> <h1>Quoi?</h1> Un simple système d'onglet utilisant les technologies:<br /> <ul> <li>(X)html</li> <li>CSS</li> <li>Javascript</li> </ul> </div> <div class="contenu_onglet" id="contenu_onglet_qui"> <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 class="contenu_onglet" id="contenu_onglet_pourquoi"> <h1>Pourquoi?</h1> Pour simplifier la navigation et la diviser en parties </div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'quoi'; change_onglet(anc_onglet); //--> </script> </body> </html> Et, pour l'autre question, c'était.. en gros, pour modifier le contenu des onglets, il faut que je passe par la page HTML ? | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Hum, tu veux dire quoi exactement par "onglets alignés à gauche" ? En colonne sur la gauche ? Parce que sinon, chez moi, ils sont bien alignés à gauche '_'
Pour modifier le contenu des onglets, oui, faudra passer par le HTML @_@ | | |
|
| |
Nezu
{ Membre }
Messages : 7
| Euh, ben oui, les aligner sur la gauche oo Enfin.. Un peu comme ça : [ Désolé pour le shéma tout pourri, j'avais pas la foi de le faire à la souris ] | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Pour moi, aligné à gauche, c'était comme le texte, quoi, aligné à gauche, comme c'est actuellement XD Bon, tu veux les onglets en colonne à gauche du contenu. Pour ça, le plus simple est de faire un tableau : - 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>Un système d'onglet en javascript</title> <script type="text/javascript"> //<!-- function change_onglet(name) { document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet'; document.getElementById('onglet_'+name).className = 'onglet_1 onglet'; document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none'; document.getElementById('contenu_onglet_'+name).style.display = 'block'; anc_onglet = name; } //--> </script> <style type="text/css"> .onglets { display:inline-block; margin-left:3px; margin-right:3px; padding:3px; text-align:left; border:1px solid black; cursor:pointer; } .onglet_0 { background:#bbbbbb; border-bottom:1px solid black; } .onglet_1 { background:#dddddd; border-bottom:0px solid black; padding-bottom:4px; } .contenu_onglet { background-color:#dddddd; border:1px solid black; margin-top:-1px; padding:5px; display:none; } ul { margin-top:0px; margin-bottom:0px; margin-left:-10px } h1 { margin:0px; padding:0px; } </style> </head> <body> <div class="systeme_onglets"> <table width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="right" valign="top" class="onglets"> <span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Quoi</span> <br /> <span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui</span> <br /> <span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span> </td> <td class="contenu_onglets" align="center" valign="top"> <div class="contenu_onglet" id="contenu_onglet_quoi"> <h1>Quoi?</h1> Un simple système d'onglet utilisant les technologies:<br /> <ul> <li>(X)html</li> <li>CSS</li> <li>Javascript</li> </ul> </div> <div class="contenu_onglet" id="contenu_onglet_qui"> <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 class="contenu_onglet" id="contenu_onglet_pourquoi"> <h1>Pourquoi?</h1> Pour simplifier la navigation et la diviser en parties </div> </td> </tr> </table> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'quoi'; change_onglet(anc_onglet); //--> </script> </body> </html> | | |
|
| |
Nezu
{ Membre }
Messages : 7
| Ah, oui, ça parait tout bête, vu comme ça ! Merci beaucoup pour ton aide ♥ | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Mais de rien :3 J'archive le sujet /o/ | | |
|
| |
Contenu sponsorisé
| |
| |
|