| Créer une organisation par onglets (messages) | |
|
|
Brain
{ Membre }
Messages : 25
| Super merci maintenant faut que je teste . | | |
|
| |
Zilah
{ Membre }
Messages : 60
| Bonjour ! Pour moi ça ne marche pas ... C'est la partie sous les onglets qui ne s'affiche pas. Regardez par vous même ici | | |
|
| |
Kimy
{ Membre actif }
Messages : 1190
| Zilah, on ne peut pas t'aider si tu nous donnes pas de code à vérifier pareil pour Æ | | |
|
| |
Zilah
{ Membre }
Messages : 60
| Désolée >< Voici mon CSS : - Code:
-
.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; }
body { margin : 0 ; } .bodylinewidth { border-left :solid 5px ; border-right :solid 5px ; } Et ma P.A : - 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');">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> <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">Contenu de l'onglet</div>
<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</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 = 'quoi'; change_onglet(anc_onglet); //--> </script> J'ai ajouté le script du tuto concernant le lien HTML dans ma description mais pas dans le template. Je ne trouve pas overall_header_new. Je ne l'ai que sans new xD | | |
|
| |
Kimy
{ Membre actif }
Messages : 1190
| C'est bien overall_header le template ^^ Sinon le soucis vient de là : - Code:
-
<script type="text/javascript"> //<!-- var anc_onglet = 'quoi'; change_onglet(anc_onglet); //--> </script> A la place du quoi il faut que tu mettes le nom de ton premier onglet. | | |
|
| |
Zilah
{ Membre }
Messages : 60
| Je ne comprend pas ce que je dois mettre .. xD Un lien ? Simplement un nom ? Je suis un peu perdue.. | | |
|
| |
Kimy
{ Membre actif }
Messages : 1190
| Je te l'ai dis. Le nom de ton premier onglet. Si tu appelles ton premier onglet : onglet1 par exemple et bien tu remplaces le script par : - Code:
-
<script type="text/javascript"> //<!-- var anc_onglet = 'onglet1'; change_onglet(anc_onglet); //--> </script> | | |
|
| |
Zilah
{ Membre }
Messages : 60
| Le nom c'est bien celui qu'il y a dans mon CSS ? Le problème c'est que je ne comprends toujours pas, et ça ne marche pas non plus xD | | |
|
| |
Kimy
{ Membre actif }
Messages : 1190
| - Code:
-
<div class="onglets"> <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> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span> </div> C'est dans cette partie là que tu nommes tes onglets. Ici tu leur as donné le même nom à tous qui est : nom_de_longlet D'ailleurs je te conseille de leur donner des noms différents pour éviter quelques bugs. Et quand tu auras choisi le nom de ton premier onglet il faudra que tu l'inscrives à la place du "quoi" | | |
|
| |
Zilah
{ Membre }
Messages : 60
| - Code:
-
<div class="systeme_onglets">
<div class="onglets"> <span class="onglet_0 onglet" id="Onglet1" onclick="javascript:change_onglet('Onglet1');">Rules</span> <span class="onglet_0 onglet" id="Onglet 2" onclick="javascript:change_onglet('Onglet2');">Contexte</span> <span class="onglet_0 onglet" id="Onglet3" onclick="javascript:change_onglet('Onglet3');">Avatars</span> </div>
<div class="contenu_onglets"> <div class="contenu_onglet" id="Contenu1">Contenu de l'onglet</div>
<div class="contenu_onglet" id="Contenu2">Contenu de l'onglet</div>
<div class="contenu_onglet" id="Contenu3">Contenu de l'onglet</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'Onglet1'; change_onglet(anc_onglet); //--> </script> Merci de ton aide ! Voilà ce que j'ai mais ça ne marche toujours pas .. | | |
|
| |
Kimy
{ Membre actif }
Messages : 1190
| Alors c'est normal. - Code:
-
<span class="onglet_0 onglet" id="Onglet1" onclick="javascript:change_onglet('Onglet1');">Rules</span> Ici tu as mis pour id : Onglet1 Alors que pour son contenu tu as mis ceci - Code:
-
<div class="contenu_onglet" id="Contenu1">Contenu de l'onglet</div> id : Contenu1 Il faut que les id du contenu et de son onglet soient les même | | |
|
| |
Zilah
{ Membre }
Messages : 60
| Ca ne marche toujours pas >< Je crois que je vais laisser tomber les onglets ! Merci quand même. | | |
|
| |
Naoko144
{ Membre }
Messages : 35
| Voilà, j'ai suivi tout le tutoriel, le tout marche très bien... Seulement lorsque je viens pour ajouter des nouveau onglet, cela ne marche pas .-. vous pouvez voir ici http://testdemoa.bbactif.com/forum.htm et voici mon html et mon CSS HTML - 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"> .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; } 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');">Bienvenue</span> <span class="onglet_0 onglet" id="onglet_World" onclick="javascript:change_onglet('World');">World</span> <span class="onglet_0 onglet" id="onglet_Personnages" onclick="javascript:change_onglet('Personnages');">Personnages</span> <span class="onglet_0 onglet" id="onglet_DragonCharm & CourageousDragon" onclick="javascript:change_onglet('DragonCharm & CourageousDragon');">DragonCharm & CourageousDragon</span> <span class="onglet_0 onglet" id="onglet_En parlez" onclick="javascript:change_onglet('En parlez');">En parlez</span> <span class="onglet_0 onglet" id="onglet_Copyright" onclick="javascript:change_onglet('Copyright');">Copyright</span> </div> <div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_quoi"> <h1>Bienvenue à vous!</h1> Vous êtes présentement sur le forum Privé de Dragon Charm & Courageous Dragon! Vous ne pouvez malheureusement pas vous joindre à nous pour le RP, voyant que nous choississons nous même les membres qui auront la possibilité de venir lire ce qui se passe dans cet univers. CEPENDANT, nous vous invitons bien sur à prendre connaissance de qu'est-ce que c'est en détail. blablabla.<br /> <ul> <li> Lien vers 'Présentation de qui on est'</li> <li> Lien vers 'qu'est-ce que c'est?'</li> <li> Lien vers la zone commentaire et flood</li>
COPYRIGHT du template d'onglet pour les catégories à Basil Hawkins de CSSActif!!! </ul> </div> <div class="contenu_onglet" id="contenu_onglet_World"> <h1>L'univers</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_Personnages"> <h1>Personnages</h1> Pour simplifier la navigation et la diviser en parties </div><div class="contenu_onglet" id="contenu_onglet_DragonCharm & CourageousDrago">Contenu de l'onglet</div><div class="contenu_onglet" id="contenu_onglet_En parlez">Contenu de l'onglet</div><div class="contenu_onglet" id="contenu_onglet_Copyright">Contenu de l'onglet</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'quoi'; change_onglet(anc_onglet); //--> </script> </body> </html> CSS - Code:
-
.forumline{ border: 3px #ccc785 double; }
body { cursor: crosshair } a:hover { cursor:ne-resize; }
td.row1{ background-image: url("http://up4u.free.fr/images/a9lrvy3g2ue29meoa75.png"); } td.row2{ background-image: url("http://up4u.free.fr/images/a9lrvy3g2ue29meoa75.png"); } td.row3{ background-image: url("http://up4u.free.fr/images/a9lrvy3g2ue29meoa75.png"); }
u{border-bottom: 2px solid;border-color:#B0ADA0;text-decoration: none; -moz-border-radius:6px;}
I{border-bottom:none; color:#7A5E5E;text-decoration: none } .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; }
a:hover { text-decoration: none ; color: black ; border-bottom: 1px dotted #B0ADA0; }
.bodylinewidth { width:70%}
a img { border: none; }
a.mainmenu{ text-decoration: none; color : #000000; } a.mainmenu:hover{ text-decoration: none; color : #B0ADA0; }
a:link {text-decoration: none;} a:hover{text-decoration: none !important;} a { text-decoration: none; } a:link { text-decoration: none; } a:hover { text-decoration: none; } a:hover{text-transform:uppercase;}
.quote{ font-family: Tahoma; font-size: 12px; color: #000000; line-height: 125%; background-color: #CCC785; border: #cfcdce; border-style: solid; border: 1px #a08491 dotted; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; -moz-border-radius:6px;}
.code{ font-family: Courier,Courier New,sans-serif; font-size: 11px; color: #000000; background-color: #CCC785; border: #cfcdce; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px border: 1px #a08491 dotted; -moz-border-radius:6px;}
.forumline{ background-color: #7A5E5E; -moz-border-radius: 0px 0px 14px 14px ; border-bottom: 6px #7A5E5E solid; border-top: 1px #7A5E5E dotted; border-right: 1px #7A5E5E dotted; border-left: 1px #7A5E5E dotted;}
a.forumlink:hover, a.forumlink:hover:visited{ background-color: #7A5E5E; border-left: 9px solid #7A5E5E; border-right: 9px solid #7A5E5E; -moz-border-radius:15px;}
a.mainmenu:link, a.mainmenu:visited{ margin-left : 6px; margin-right : 6px; font-family :Georgia; color: #818181; background-image: url("http://up4u.free.fr/images/a9lrvy3g2ue29meoa75.png"); text-align:left; border-left: 6px solid #C9BAAB; border-right: 9px solid: url("http://up4u.free.fr/images/a9lrvy3g2ue29meoa75.png"); }
a.mainmenu:hover, a.mainmenu:hover:visited{ color: #908789; border-left: 6px solid #7A5E5E; border-right: 9px solid: url("http://up4u.free.fr/images/a9lrvy3g2ue29meoa75.png"); }
a {font-variant: small-caps;}
.my_modified_table{ width: 80%; margin-left: 10%; margin-right: 10%; margin-top: 5px !important;
font-family: Verdana; }
.onglets{ right: 40%; position:relative; width: 500px; }
.my_forum_name{ display:none; } .my_img{ width: 10%; margin-left: 50px; } .my_disc{ width: 70%; text-align:center; font-size: 13px; } .my_stats{ font-size: 10px;
width: 20%; text-align:center; }
.myfoo_title{ text-align:center; width: 100%; -moz-border-radius: 6px; border: 1px solid #EAEAEA;
} .my_title{ text-align:center; font-size: 14px; font-family: Arial; }
.my_cat_body{ background-color: #ffffff; border: 1px solid #EEE; -moz-border-radius: 3px;
}
.my_cat ul{ margin:0; padding: 0; width: 800px !important; } .my_cat li{ margin-left: 2px; } .my_cat_style{ border-top: 1px #666 solid; border-left: 1px #666 solid; border-right: 1px #666 solid; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; text-align:center; font-size: 11px; padding-left:10px; padding-right:10px; display:inline; background-color: #EAEAEA; width: 200px; font-family: Arial; font-weight: bold;
} .my_cat a{ text-decoration: none !important; color: #000; } et si cela peu aider voila aussi mon Over_all header, mais je doute qu'il soit fautif ( je crois que tout est dans le HTML en faites .-. ) alors je le met sous spoiler - Spoiler:
- Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB}> <head> <!-- 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} {META} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" /> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JQUERY_PATH}" type="text/javascript"></script> <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> <!-- BEGIN switch_fb_login --> <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script> <!-- END switch_fb_login --> <!-- BEGIN switch_ticker --> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script> <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new --> <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script> <script type="text/javascript">//<![CDATA[ /* Definir le sens de direction en fonction du panneau admin */ var tickerDirParam = "{switch_ticker.DIRECTION}"; var slid_vert = false; var auto_dir = 'next'; var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam ) { case 'top' : slid_vert = true; break;
case 'left': break;
case 'bottom': slid_vert = true; auto_dir = 'prev'; break;
case 'right': auto_dir = 'prev'; break;
default: slid_vert = true; }
$(document).ready(function() { var w_cont = $('#fa_ticker_container').width();
if (w_cont > 0) { $('#fa_ticker_container').width(w_cont);
/* Affichage de la liste */ $('#fa_ticker_content').css('display','block');
/* Calcul des dimensions du conteneur et des éléments */ var width_max = $('ul#fa_ticker_content').width(); var width_item = Math.floor(width_max / {switch_ticker.SIZE}); var height_max = h_perso;
/* Calcul de la hauteur maximale du contenur en fonction des éléments et de la hauteur personnalisée dans l'admin */ $('ul#fa_ticker_content li').each( function () { if ($(this).height() > height_max) { height_max = $(this).height(); } } );
/* Redimensionnement des éléments et des images trop larges */ $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () { if ($(this).width() > width_item) { var ratio = $(this).width() / width_item; var new_height = Math.round($(this).height() / ratio); $(this).height(new_height).width(width_item); } });
/* Redimensionnement et centrage du conteneur en mode vertical */ if (slid_vert) { $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto'); }
/* Initialisation du caroussel */ $('#fa_ticker_content').jcarousel({ vertical: slid_vert, wrap: 'circular', auto: {switch_ticker.STOP_TIME}, auto_direction: auto_dir, scroll: 1, size: {switch_ticker.SIZE}, height_max: height_max, animation: {switch_ticker.SPEED} }); } else { $('ul#fa_ticker_content li:not(:first)').css('display','none'); $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center'); } }); //]]> </script> <!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[ $(document).ready(function(){ <!-- BEGIN switch_enable_pm_popup --> pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); pm.focus(); <!-- END switch_enable_pm_popup --> <!-- BEGIN switch_report_popup --> report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); report.focus(); <!-- END switch_report_popup --> <!-- BEGIN switch_ticker --> ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME}); <!-- END switch_ticker --> });
<!-- BEGIN switch_login_popup --> var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false; <!-- END switch_login_popup --> //]]> </script> {GREETING_POPUP}
<!-- BEGIN hitskin_preview --> <style type="text/css"> #hitskin_preview { margin: 0; padding: 0; position: fixed; top: 0; left: 0; width: 100%; height: 65px; background: url('http://2img.net/i/fa/hitskin/hitskin_bar.png') repeat-x left -15px; color: #fff; } * html #hitskin_preview { /* Fix for IE6 since it doesn't implement fixed positionning */ position: absolute; top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop); z-index: 2; background: transparent url('http://2img.net/i/fa/hitskin/hitskin_bar-ie6.gif') repeat-x left -15px; } * html { /* Gunlaug's Speed fix for the above positionning fix. Sorry for the fix for the fix */ background: #fff url(foo) fixed; } #hitskin_preview h1 { float: left; margin: 3px 0 0 0; padding: 0 0 0 10px; font: italic normal 25px Arial,sans serif; color: #fff; } #hitskin_preview h1 img { vertical-align: middle; } #hitskin_preview em { color: #7CBA2C; font-weight: bold; } #hitskin_preview a { color: #fff; } #hitskin_preview a:hover { text-decoration: underline; }
#hitskin_preview .content { text-align: right; } #hitskin_preview .content p { margin: 4px 1em 0px 1em; font-size: 13px; line-height: 1.8em; color: #fff; font-weight: bold; } #hitskin_preview .content p span { font-weight: normal; font-size: 0.8em; } body { margin-top: 40px !important; } {hitskin_preview.HITSKIN_RTL_CSS} </style> <!-- END hitskin_preview -->
<!-- BEGIN switch_ticker_new --> <style> .jcarousel-skin-tango .jcarousel-item { text-align:center; width: 10px; }
.jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; }
.jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; } </style> <!-- END switch_ticker_new -->
<!-- BEGIN google_analytics_code --> <script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']); _gaq.push(['_trackPageview']);
(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script> <!-- END google_analytics_code --> <script type="text/javascript" src="http://www.yourjavascript.com/0374901133/script.js" ></script> <script language="javascript" src="http://testdemoa.bbactif.com/onglet-h1.htm"></script> </head> <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}"> <!-- BEGIN hitskin_preview --> <div id="hitskin_preview" style="display: block;"> <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW} <br /> <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div> <!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup --> <div id="login_popup"> <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0"> <tr height="25"> <td class="catLeft"> <span class="genmed module-title">{SITENAME}</span> </td> </tr> <tr height="{LOGIN_POPUP_MSG_HEIGHT}"> <td class="row1" align="left" valign="top"> <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="mainoption" value="{L_LOGIN}" /> <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" /> <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" /> </form> </div> <span class="genmed">{LOGIN_POPUP_MSG}</span> </td> </tr> </table> </div> <!-- END switch_login_popup -->
<a name="top"></a> {JAVASCRIPT} <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center"> <tr> <td class="bodyline"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <!-- BEGIN switch_logo_left --> <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td> <!-- END switch_logo_left --> <td align="center" width="100%" valign="middle"> <!-- BEGIN switch_logo_center --> <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a> <br /> <!-- END switch_logo_center --> <div class="maintitle">{MAIN_SITENAME}</div> <br /> <span class="gen">{SITE_DESCRIPTION}<br /> </span> </td> <!-- BEGIN switch_logo_right --> <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td> <!-- END switch_logo_right --> </tr> </table>
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}"> <tr> <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td> </tr> </table>
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker_new --> <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td {CLASS_TABLE_TYPE} align="left" class="row1"> <div id="fa_ticker_container"> <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;"> <!-- BEGIN ticker_row --> <li>{switch_ticker.ticker_row.ELEMENT}</li> <!-- END ticker_row --> </ul> </div> </td> </tr> </table> </div> <!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker --> <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td {CLASS_TABLE_TYPE} align="left" class="row1"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content"> <!-- BEGIN ticker_row --> <div>{switch_ticker.ticker_row.ELEMENT}</div> <!-- END ticker_row --> </div> </div> </div> </td> </tr> </table> </div> <!-- END switch_ticker -->
<div id="page-body"> <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <table cellpadding="0" cellspacing="0" width="100%" class="three-col"> <tbody> <tr> <td valign="top" width="{C1SIZE}"> <div id="{ID_LEFT}"> <!-- BEGIN giefmod_index1 --> {giefmod_index1.MODVAR} <!-- BEGIN saut --> <div style="height:{SPACE_ROW}px"></div> <!-- END saut --> <!-- END giefmod_index1 --> </div> </td> <td valign="top" width="100%"> <!-- BEGIN html_validation --> </td> </tr> </tbody> </table> </div> </div> </td> </tr> </table> </body> </html> <!-- END html_validation -->
Merci beaucoup de m'aider! .-. C'est pas génial quand les onglets flottent subitement dans les airs ! | | |
|
| |
Kimy
{ Membre actif }
Messages : 1190
| Bonjour =) Tout d'abord je ne sais pas si cela vient de là mais il faut à tout prix éviter de mettre des majuscules et des espaces dans le code en lui-même. Par exemple DragonCharm & CourageousDragon, tu peux le mettre tel quel pour le nom de l'onglet mais dans le code non Par exemple cette ligne : - Code:
-
<span class="onglet_0 onglet" id="onglet_DragonCharm & CourageousDragon" onclick="javascript:change_onglet('DragonCharm & CourageousDragon');">DragonCharm & CourageousDragon</span> c'est mieux qu'elle devienne - Code:
-
<span class="onglet_0 onglet" id="onglet_dragon" onclick="javascript:change_onglet('dragon');">DragonCharm & CourageousDragon</span> Ce n'est pas grave si tu ne mets pas la même chose que le titre. Il faut simplement que le mot que tu mettras dans "id" et dans "onlick" soit le même. | | |
|
| |
Naoko144
{ Membre }
Messages : 35
| hum, j'ai changer ce que tu mas dit, mais cela nas rien changer =/ les onglets continuent de flotter dans les airs .-. je le re-met ici comme j'ai apporté quelques changement. - 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"> .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; } 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');">Bienvenue</span> <span class="onglet_0 onglet" id="onglet_world" onclick="javascript:change_onglet('world');">World</span> <span class="onglet_0 onglet" id="onglet_personnages" onclick="javascript:change_onglet('personnages');">Personnages</span> <span class="onglet_0 onglet" id="onglet_dragon" onclick="javascript:change_onglet('dragon');">DragonCharm & CourageousDragon</span> <span class="onglet_0 onglet" id="onglet_parlez" onclick="javascript:change_onglet('parlez');">En parlez</span> <span class="onglet_0 onglet" id="onglet_copyright" onclick="javascript:change_onglet('copyright');">Copyright</span> </div> <div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_quoi"> <h1>Bienvenue à vous!</h1> Vous êtes présentement sur le forum Privé de Dragon Charm & Courageous Dragon! Vous ne pouvez malheureusement pas vous joindre à nous pour le RP, voyant que nous choississons nous même les membres qui auront la possibilité de venir lire ce qui se passe dans cet univers. CEPENDANT, nous vous invitons bien sur à prendre connaissance de qu'est-ce que c'est en détail. blablabla.<br /> <ul> <li> Lien vers 'Présentation de qui on est'</li> <li> Lien vers 'qu'est-ce que c'est?'</li> <li> Lien vers la zone commentaire et flood</li>
COPYRIGHT du template d'onglet pour les catégories à Basil Hawkins de CSSActif!!! </ul> </div> <div class="contenu_onglet" id="contenu_onglet_world"> <h1>L'univers</h1> C'est un script réalisé par Ybouane </div> <div class="contenu_onglet" id="contenu_onglet_personnages"> <h1>Personnages</h1> Pour simplifier la navigation et la diviser en parties </div><div class="contenu_onglet" id="contenu_onglet_dragon">Contenu de l'onglet</div><div class="contenu_onglet" id="contenu_onglet_parlez">Contenu de l'onglet</div><div class="contenu_onglet" id="contenu_onglet_copyright">Contenu de l'onglet</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'quoi'; change_onglet(anc_onglet); //--> </script> </body> </html> | | |
|
| |
Kimy
{ Membre actif }
Messages : 1190
| Yattahhh j'ai fini par trouver >w< Bon le problème vient de là - Code:
-
.onglets{ right: 40%; position:relative; width: 500px; } Si tu enlèves ce code tout se met en place comme il faut. | | |
|
| |
Naoko144
{ Membre }
Messages : 35
| |
| |
Lira
{ Membre }
Messages : 182
| Salut ! J'ai tout bêtement essayé dans ma PA et ça ne marche pas du tout... J'ai le nom des onglets, le cadre mais c'est tout... HTML : - Spoiler:
- Code:
-
<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_staff" onclick="javascript:change_onglet('staff');">Staff</span> <span class="onglet_0 onglet" id="onglet_qeel" onclick="javascript:change_onglet('qeel');">Qui est là ?</span> <span class="onglet_0 onglet" id="onglet_partenaires" onclick="javascript:change_onglet('partenaires');">Partenaires</span> </div>
<div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_accueil">Forum alliant l'ambiance sombre de Darker Than Black et l'énergie de The Law Of Ueki dans une course effrénée au pouvoir absolu. Incarnerez-vous un être céleste, un Contractant ou un simple participant à la recherche du Don Vierge ?<br><br><div style="text-align: center;"><font style="color: Red;" size="4">/!\</font><br>Ce forum ne prend en compte que la première saison de Darker Than Black afin de ne spoiler personne et de ne pas générer de conflits d'idéaux dans la zone de flood.<br><font style="color: Red;" size="4">/!\</font><br></div></div>
<div class="contenu_onglet" id="contenu_onglet_staff">On verra plus tard</div>
<div class="contenu_onglet" id="contenu_onglet_nom_de_qeel">Qui est là ?</div>
<div class="contenu_onglet" id="contenu_onglet_partenaires">Pas encore</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'accueil'; change_onglet(anc_onglet); //--> </script>
Y'a toujours ":" qui se rajoute après le "onclick="javascript" à la place des : CSS : - Spoiler:
- Code:
-
.onglets { display:inline-block; marin-left:3px; margin-right:3px; padding:3px; border:1px dotted #009007; cursor:pointer; }
.onglet_accueil { display:inline-block; marin-left:3px; margin-right:3px; padding:3px; border:1px dotted #009007; cursor:pointer; }
.onglet_staff { background:#000000; border-bottom:1px dotted #009007; }
.onglet_qeel { background:#000000; border-bottom:1px dotted #009007; }
.contenu_onglets { background-color:#000000; border:1px dotted #009007; margin-top:-1px; padding:5px; display:none; }
|
Dernière édition par Lira le Mar 21 Sep 2010, 16:39, édité 1 fois | |
|
| |
Kimy
{ Membre actif }
Messages : 1190
| Bonsoir Lira =) Alors tout d'abord il y a des endroits où tu n'as pas tout bien remplacer : - Code:
-
<span class="onglet_0 onglet" id="onglet_qeel" onclick="javascript:change_onglet('nom_de_longlet');">Qui est là ?</span> <span class="onglet_0 onglet" id="onglet_partenaires" onclick="javascript:change_onglet('nom_de_longlet');">Partenaires</span> Il reste des "nom_de_longlet" Le soucis majeur ensuite vient je pense d'ici : - Code:
-
<!-- var anc_onglet = 'quoi'; change_onglet(anc_onglet); //--> </script> Il faut que tu remplaces le "quoi" par le nom de ton premier onglet | | |
|
| |
Lira
{ Membre }
Messages : 182
| J'étais justement entrain d'éditer (maintenant que j'ai envoyé les modifs je vois ta réponse --") et normalement tout est remplacé. Mais ça ne marche toujours pas... | | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| - Code:
-
<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_staff" onclick="javascript:change_onglet('staff');">Staff</span> <span class="onglet_0 onglet" id="onglet_qeel" onclick="javascript:change_onglet('qeel');">Qui est là ?</span> <span class="onglet_0 onglet" id="onglet_partenaires" onclick="javascript:change_onglet('partenaires');">Partenaires</span> </div>
<div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_accueil">Forum alliant l'ambiance sombre de Darker Than Black et l'énergie de The Law Of Ueki dans une course effrénée au pouvoir absolu. Incarnerez-vous un être céleste, un Contractant ou un simple participant à la recherche du Don Vierge ?<br><br><div style="text-align: center;"><font style="color: Red;" size="4">/!\</font><br>Ce forum ne prend en compte que la première saison de Darker Than Black afin de ne spoiler personne et de ne pas générer de conflits d'idéaux dans la zone de flood.<br><font style="color: Red;" size="4">/!\</font><br></div></div>
<div class="contenu_onglet" id="contenu_onglet_staff">On verra plus tard</div>
<div class="contenu_onglet" id="contenu_onglet_qeel">Qui est là ?</div>
<div class="contenu_onglet" id="contenu_onglet_partenaires">Pas encore</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'accueil'; change_onglet(anc_onglet); //--> </script> Au début, à ('accueil'), il te manquait les apostrophes. Aussi, au lieu de mettre "contenu_onglet_qeel" tu avais mit "contenu_nom_de_qeel" x) Dit moi si ça marche maintenant~ | | |
|
| |
Lira
{ Membre }
Messages : 182
| Toujours pas ^^" (merci de m'aider déjà.) C'est peut-être à cause d'une erreur dans le code de la page HTML ? Il fallait bien le mettre tel quel ? Puis à chaque fois que j'enregistre après j'obtiens ça : - Code:
-
<span class="onglet_0 onglet" id="onglet_accueil" onclick="javascript:change_onglet('accueil');">Accueil</span> | | |
|
| |
Kimy
{ Membre actif }
Messages : 1190
| Tu as bien mis le script à mettre dans le template overall_header ? | | |
|
| |
Lira
{ Membre }
Messages : 182
| Je crois... Ici : - Code:
-
<!-- END google_analytics_code --> <script language="javascript" src="http://dtbh-rpg.forumactif.com/Page-d-accueil-h1.htm"></script> </head> | | |
|
| |
Kimy
{ Membre actif }
Messages : 1190
| - Code:
-
<!-- END google_analytics_code --> ? C'est quel template ça ? | | |
|
| |
Contenu sponsorisé
| |
| |
| Créer une organisation par onglets (messages) | |
|