| | Créer une organisation par onglets (messages) |  |
|
|
 Ikø' 
Pika'Ghøst
~ Maîtresse des pelles ~
 Messages : 3193
 | Bonjour, Essaie en mettant le code dans le template index_body, strictement après - Code:
-
{JAVASCRIPT} | | |
|
| | |
Dreamland 
{ Membre }
Messages : 96
| Cela ne fonctionne pas  | | |
|
| | |
Ikø'
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| ....oh attend, tu veux dire que tu veux que le tableau de la PA soit le contenu et que les onglets soient juste au dessus?
Si c'est ça, je vais essayer de trouver un moyen oo je ne suis pas sûre que ce soir possible, mais on peut néanmoins essayer~
À moins que c'est ce que je croyais au début, donc que tout le système soit au dessus de la PA. Dans ce cas-là, ce que j'ai dit est sensé marcher. | | |
|
| | |
Dreamland
{ Membre }
Messages : 96
| Je ne comprends rien :/ Désolé je suis vraiment une débutante | | |
|
| | |
Haribot' ♪
{ Membre hyper-actif }
 Messages : 5163
| Qu'est-ce que tu ne comprends pas ?
Il faudrait être plus précise.. :S | | |
|
| | |
Dreamland
{ Membre }
Messages : 96
| alors j'aimerais que mes onglet se retrouve au dessus du tableau de la PA. Et je ne comprends pas pourquoi cela ne fonctionne pas... J'ai suivi le tuto à la lettre et les onglets apparaissent dans ma PA et en rectangle... | | |
|
| | |
Jotman
{ Membre }
Messages : 23
| Moi ça ne s'affiche pas même quand je clique. Voici les codes que j'ai mis : CODE CSS : - Code:
-
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
cursor:pointer;
border: 2px solid #a3a944;
-moz-border-radius-bottomleft:10px solid #000000;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px solid;
}
.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;
}
CODE PAGE D'ACCUEIL : - Code:
-
<div class="systeme_onglets"> <div class="onglets"> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">ACCUEIL</span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span> </div> <div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Salut !</div> <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">HOLA ! COMO ESTA IN LA CASA ? ^^</div> <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'ACCUEIL'; change_onglet(anc_onglet); //--> </script> Et aussi quand ce problème sera résolu, quel est le code pour mettre les onglets au dessus du cadre de la page d'accueil ? Merci d'avance. | | |
|
| | |
Jotman
{ Membre }
Messages : 23
| Me suis tromper pour le code de la page html désolé :-/ - Code:
-
<div class="systeme_onglets"> <div class="onglets"> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">ACCUEIL</span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span> </div> <div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Salut !</div> <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">HOLA ! COMO ESTA IN LA CASA ? ^^</div> <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'ACCUEIL'; change_onglet(anc_onglet); //--> </script> | | |
|
| | |
Ikø'
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| Bonjour~ D'abord il faut veiller à bien changer les noms des onglets. Par exemple que le premier s'appelle accueil, le deuxième s'appelle news et le troisième s'appelle partenaires. On va le faire section par section  - Code:
-
<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">ACCUEIL</span>
<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>
<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span> Ça c'est la première section. Ce qui a à changer ici c'est: <span class="onglet_0 onglet" id="onglet_ nom_de_longlet" onclick="javascript:change_onglet(' nom_de_longlet');">ACCUEIL</span> <span class="onglet_0 onglet" id="onglet_ nom_de_longlet" onclick="javascript:change_onglet(' nom_de_longlet');">Nom de l'onglet</span> <span class="onglet_0 onglet" id="onglet_ nom_de_longlet" onclick="javascript:change_onglet(' nom_de_longlet');">Nom de l'onglet</span> Tu changes ce que j'ai mit en rouge par une appellation spécifique à ton onglet. En gros, tu ne marques pas accueil partout~ De plus, le terme "Nom de l'onglet" qui est carrément le nom cette fois-ci, comme "ACCUEIL", n'est pas obligatoire à être changé pour que le script fonctionne~ DONC~ si on prends comme exemple accueil, news et partenaires, ça donnerait ceci: - Code:
-
<span class="onglet_0 onglet" id="onglet_accueil" onclick="javascript:change_onglet('accueil');">ACCUEIL</span>
<span class="onglet_0 onglet" id="onglet_news" onclick="javascript:change_onglet('news');">Nom de l'onglet</span>
<span class="onglet_0 onglet" id="onglet_partenaires" onclick="javascript:change_onglet('partenaires');">Nom de l'onglet</span> Maintenant, la deuxième partie =D - Code:
-
<div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Salut !</div> <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">HOLA ! COMO ESTA IN LA CASA ? ^^</div> <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div> </div> </div> Ici, il faut changer ce qui est en rouge par appellation qu'on a donné aux onglets tantôt. Donc, le premier onglet s'appelle accueil, etc. <div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_ nom_de_longlet">Salut !</div> <div class="contenu_onglet" id="contenu_onglet_ nom_de_longlet">HOLA ! COMO ESTA IN LA CASA ? ^^</div> <div class="contenu_onglet" id="contenu_onglet_ nom_de_longlet">Contenu de l'onglet</div> </div> </div> Avec le même exemple que tout à l'heure, ça donnerait ceci: - Code:
-
<div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_accueil">Salut !</div> <div class="contenu_onglet" id="contenu_onglet_nom_de_news">HOLA ! COMO ESTA IN LA CASA ? ^^</div> <div class="contenu_onglet" id="contenu_onglet_nom_de_partenaires">Contenu de l'onglet</div> </div> </div> Finalement la dernière partie~ - Code:
-
<script type="text/javascript">
//<!--
var anc_onglet = 'ACCUEIL';
change_onglet(anc_onglet);
//-->
</script> Ici, il faut changer une chose spécifie, que tu as déjà faite. La voilà: <script type="text/javascript"> //<!-- var anc_onglet = ' ACCUEIL'; change_onglet(anc_onglet); //--> </script> Toutefois on va éviter les majuscules xD cette partie doit être remplacée par l'appellation du premier onglet, donc ici "accueil". C'est comme ce que tu as fait, mais sans majuscules x) Donc: - Code:
-
<script type="text/javascript">
//<!--
var anc_onglet = 'accueil';
change_onglet(anc_onglet);
//-->
</script> Et après tu mets tout ça ensemble~ J'espère que je ne t'ai pas perdu en chemin ._. | | |
|
| | |
Jotman
{ Membre }
Messages : 23
| Super ça marche ! Merci beaucoup !
Est-ce que vous avez un code pour le placé au dessus du cadre de la page d'accueil du forum ?
merci d'avance en tout cas ! | | |
|
| | |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Coucou  Oui, en iframe - Code:
-
<iframe src="URL_DE_LA_PAGE_AVEC_ONGLETS" style="height: HAUTEURpx; width: LARGEURpx;></iframe> Donc, tu fais ta Page d'Accueil sur une Page HTML dans le Panneau d'Admin sans le Haut et le Bas du Forum Et ensuite, tu prends l'adresse de cette page et tu la met à la place de "URL_DE_LA_PAGE_AVEC_ONGLETS" dans le code de l'iframe que tu mettras dans ta Page d'Accueil. | | |
|
| | |
Jotman
{ Membre }
Messages : 23
| Alors tout d'abord merci encore de m'aider Mais le seul problème est que je n'y arrive pas : s Donc moi pour la page html que vous m'avez demander de créer je l'ai nommée i-frame et j'ai mis : - Code:
-
<iframe src="http://passionromans.forumactif.org/i-frame-h2.htm" style="height: HAUTEURpx; width: LARGEURpx;></iframe><div class="systeme_onglets"> <div class="onglets"> <span class="onglet_0 onglet" id="onglet_Accueil" onclick="javascript:change_onglet('Accueil');">Accueil</span> <span class="onglet_0 onglet" id="onglet_News" onclick="javascript:change_onglet('News');">News</span> <span class="onglet_0 onglet" id="onglet_Partenaires" onclick="javascript:change_onglet('Partenaires');">Partenaires</span> </div> <div class="contenu_onglets"><div style="text-align: left;"> </div><div class="contenu_onglet" id="contenu_onglet_Accueil"><div style="text-align: left;"><span class="borderbot">ACCUEIL :</span><br><span class="borderbot"></span></div><br>Passion roman est un nouveau forum de lecture.<br><br></div> <div class="contenu_onglet" id="contenu_onglet_News">HOLA ! COMO ESTA IN LA CASA ? ^^</div> <div class="contenu_onglet" id="contenu_onglet_Partenaires">Contenu de l'onglet</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'Accueil'; change_onglet(anc_onglet); //--> </script> </iframe> Ensuite en page d'accueil j'ai ça : - Code:
-
<iframe src="http://passionromans.forumactif.org/i-frame-h2.htm" style="height: HAUTEURpx; width: LARGEURpx;></iframe><div class="systeme_onglets"> <div class="onglets"> <span class="onglet_0 onglet" id="onglet_Accueil" onclick="javascript:change_onglet('Accueil');">Accueil</span> <span class="onglet_0 onglet" id="onglet_News" onclick="javascript:change_onglet('News');">News</span> <span class="onglet_0 onglet" id="onglet_Partenaires" onclick="javascript:change_onglet('Partenaires');">Partenaires</span> </div> <div class="contenu_onglets"><div style="text-align: left;"> </div><div class="contenu_onglet" id="contenu_onglet_Accueil"><div style="text-align: left;"><span class="borderbot">ACCUEIL :</span><br><span class="borderbot"></span></div><br>Passion roman est un nouveau forum de lecture.<br><br></div> <div class="contenu_onglet" id="contenu_onglet_News">HOLA ! COMO ESTA IN LA CASA ? ^^</div> <div class="contenu_onglet" id="contenu_onglet_Partenaires">Contenu de l'onglet</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'Accueil'; change_onglet(anc_onglet); //--> </script> </iframe> Donc normalement les deux sont identiques mais ça ne m'affiche pas les onglets ça m'affiche une console --' comme ceci :  En tout cas je vous remercie sincèrement d'avance pour prendre le temps de me lire et de me répondre. Merci encore ! | | |
|
| | |
Hortie
{ Membre actif }
Messages : 660
| Salue !
Ce tuto est vraiment très pratique et beau, surtout sur une PA ^^
J'aimerais bien faire quelque chose du genre.
Mais avec les onglets sur le côté.
Comme ici
Qu'elle partie du code je dois modifier ???
Merci d'avance ^^ | | |
|
| | |
Hortie
{ Membre actif }
Messages : 660
| Désolé du double post, je ne pouvait pas éditer mon message :s J'ai essayer d'installer des onglet en haut malgré tout, maie ça ne fonctionne pas ! Est-ce que c'est parce que je n'ai rien écrit à l'intérieur ??? À part "Contenue de l'onglet" bien entendue. Je vous met les codes que j'ai mis. Je ne comprends vraiment pas le problème ! Merci d'avance à celui ou celle qui m'éclairera. Dans ma PA. - Code:
-
<div class="systeme_onglets"> <div class="onglets"> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onmouseover="javascript:change_onglet('nom_de_longlet');">Acceuil</span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onmouseover="javascript:change_onglet('nom_de_longlet');">Staff</span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onmouseover="javascript:change_onglet('nom_de_longlet');">Partenaires</span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onmouseover="javascript:change_onglet('nom_de_longlet');">Top Site</span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onmouseover="javascript:change_onglet('nom_de_longlet');">Credit</span> </div> <div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_acceuil">Contenue de l'onglet</div> <div class="contenu_onglet" id="contenu_onglet_staff">Contenu de l'onglet</div> <div class="contenu_onglet" id="contenu_onglet_partenaires">Contenu de l'onglet</div> <div class="contenu_onglet" id="contenu_onglet_top_site">Contenu de l'onglet</div> <div class="contenu_onglet" id="contenu_onglet_credit">Contenu de l'onglet</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'acceuil'; change_onglet(anc_onglet); //--> </script>[/quote] Dans mes CSS. [quote]/* onglets */ .onglet { display:inline-block; margin-left:3px; margin-right:3px; padding:3px; 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; }[/quote] Dans mes templates. [ Je met juste le bout en question. ] [quote]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" xmlns="http://www.w3.org/1999/xhtml"> <head> [u]<script language="javascript" src="http://test101.meilleurforum.com/Onglets-h1.htm"></script>[/u] <!-- BEGIN meta_emulate_ie7 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <!-- END meta_emulate_ie7 --> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> {META_FAVICO} Ça continue normalement ^^ Mais je l'ai coupé. Le bout que vous voyez au début ben ... C'est le début ! | | |
|
| | |
Ikø'
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| Bonsoir~ D'abord, la prochaine fois veuillez mettre les codes entre code et /code, et non pas entre quote et /quote. Merci De plus, le code ne marche pas tel quel dans un message. Il faut faire une iFrame je crois bien o_o comment, là je ne peux pas le dire, je suis super endormie x) (22h30) Et pour mettre les onglets sur le côté, c'est impossible avec ce code également, il faut aussi faire une iFrame pour les avoir sur le coté. | | |
|
| | |
Hortie
{ Membre actif }
Messages : 660
| Désolé pour les codes, je m'en suis rendue compte trop tard ... Er je ne pouvais pas éditer ... -__-'' Enfin, je pense que je suis fatigué moi aussi ! Je suis vraiment une quiche en CSS. C'est quoi une iFrame ??? Et puis j'avais mis une partie dans mes templates, une partie dans mes CSS et une partie sur ma PA comme indiqué dans le tuto. C'est pour ça que je ne comprends pas ! Pourtant il me semble que j'ai tout suivi ...  | | |
|
| | |
Ikø'
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| |
| | |
Hortie
{ Membre actif }
Messages : 660
| Je vais aller lire cela attentivement.
Merci ^^
Et j'ai réussie à installer des onglets [ assez basic ] sur ma PA.
J'ai été voir un peu plus au haut et tu l'expliquait ...
Désolé -__-''
Enfin, faut croire que ça me fait pas de travailler là dessus aussi tard.
Je vais aller me coucher, ce sera mieux !
Merci encore !
^^ | | |
|
| | |
Seventi
{ Membre }
Messages : 36
| Chez moi le premier onglet marche parfaitement, mais les autres pas du tout, ils ne s'ouvrent même pas.Please help me ! | | |
|
| | |
Ikø'
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| Bonjuuuur~
T'peux nous passer ton code? | | |
|
| | |
Tite_Lotus
{ Membre }
Messages : 29
| Merci beaucoup à .Little Lady et Ikø' pour ses réponses
dans le topic qui m'ont aidé à comprendre où je me plantais.
Un tuto très pratique ^_^ | | |
|
| | |
Ikø'
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| De rien voyons ça fait plaisir  | | |
|
| | |
Seventi
{ Membre }
Messages : 36
| Merci problème résolu dans mon cas  ! Mais le truc c'est que c'est normal que je n'arrive qu'à mettre 3 onglets, y a pas beaucoup de "mémoire", enfin c'est bête mais on dirait qu'il n'y a pas assez de place. Par exemple pour que je mette une description de mon staff via une infobulle. | | |
|
| | |
Misstro
{ Membre }
Messages : 16
| Merci pour ce tuto hyper simple J'ai cependant un petit souci...évidement -_- Le texte contenu à l'intérieur de mon onglet se présente sous forme de "lien", redirigeant vers la PA O_° Je n'ai absolument rien mis de tel dans mes codes, et cherche en vain d'où ça provient, car ça fonctionnait parfaitement le premier coup ^^ Y-a-t-il besoin d'un code en particulier pour illustrer? Merci d'avance pour ceux/celles qui pourront m'aider ^^ | | |
|
| | |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Oui, il y aurait besoin d'un code s'il-te-plaît | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Créer une organisation par onglets (messages) | |
|
