| De nombreuses questions n_n. | |
|
|
Pleasance
{ Membre }
Messages : 55
| Whaou, bon travail Iowan =D ! Merci beaucoup en tout cas =). | | |
|
| |
Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| Mhhh ... Pourquoi le félicitez-vous alors qu'il n'a pas encore donné le code ? Sinon voici un site très utile (mais en anglais, désolé pour ceux ne comprenant pas ) --> http://www.dynamicdrive.com/ | | |
|
| |
Pleasance
{ Membre }
Messages : 55
| Eh bien, faut bien le remercier pour tout le boulot qu'il fait xD ! Whaaa et merci pour ce lien ! | | |
|
| |
Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| Mais de rien, ce site est franchement très utile | | |
|
| |
Florian
{ Membre }
Messages : 14
| Moi aussi cela m'intéresse le code des onglets, j'ai réussis à insérer les onglets en titre de catégorie mais pas à faire les descriptions et noms automatique :s | | |
|
| |
Invité Invité
| +1 pour le code x) - surtout que c'est beaucoup trop compliquer pour mon petit cerveau. J'ai lu les tutoriels & j'avoue que je mélange un peu tout (a).
Merci pour le site @Basil Hawkins en tout cas
Et bon courage a @iowan :p
| | |
|
| |
iowan
{ Membre actif }
Messages : 304
| alors me revoila avec le script PS: avant toutes modifications il est preferable de prendre une copie du template avant de le modifier dans le template index_box vous remplacer le template avec ceci - Code:
-
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <td valign="bottom"> <!-- BEGIN switch_user_logged_in --> <span class="gensmall">{LAST_VISIT_DATE}<br /> {CURRENT_TIME}<br /> </span> <!-- END switch_user_logged_in --> <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div> </td> <td class="gensmall" align="right" valign="bottom"> <!-- BEGIN switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br /> <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br /> <!-- END switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> </td> </tr> </table> <div class="my_cat"> <ul></ul> </div>
<div class="my_cat_body"> <!-- BEGIN catrow --><!-- BEGIN tablehead --> <table class="my_modified_table" width="100%" border="0" cellspacing="1" cellpadding="0"> <div class="my_forum_name">{catrow.tablehead.L_FORUM}</div> <!-- END tablehead --> <!-- BEGIN forumrow --> <tr> <td colspan="3" class="my_title" align="center"><div class="myfoo_title"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><img src="{SPACER}" alt="" height="5" width="1" /></td> </tr> <tr> <td class="my_img" valign="top"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="" /></td> <td class="my_disc" width="300" valign="top" >{catrow.forumrow.FORUM_DESC}</td> <td class="my_stats" width="200" valign="top"> Topics: {catrow.forumrow.TOPICS}<br /> Posts: {catrow.forumrow.POSTS}<br /> Dernier post: {catrow.forumrow.LAST_POST}<br /> </td> </tr> <!-- END forumrow --> <!-- BEGIN tablefoot --> </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --> </div>
publier le ensuite ouvrer overall_header_new et vous chercher - Code:
-
</head> avant head vous coller ceci - Code:
-
<script type="text/javascript" src="http://www.yourjavascript.com/0374901133/script.js" ></script>
ensuite dans le css de votre forum vous ajouter ceci - Code:
-
.my_modified_table{ width: 80%; margin-left: 10%; margin-right: 10%; margin-top: 5px !important;
font-family: Verdana; }
.my_forum_name{ display:none; } .my_img{ width: 10%; margin-left: 50px; } .my_disc{ width: 70%; text-align:center; font-size: 13px; } .my_stats{
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{ 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 voila maintenant il reste que modifier le design coté template(html) et CSS avec vos skill graphique =) | | |
|
| |
Paparazziie
{ Membre }
Messages : 79
| Oh merci ! Ca marche ! C'est magnifique !!!
Mais est-ce normal que ça ne s'affiche correctement qu' après quelques secondes ? | | |
|
| |
|Shizu
{ Membre }
Messages : 89
| Merchi beaucoup pour ton aide! Mais malheureusement il y a un problème avec ma mise en page regarde:
http://cat-of-life.forumactif.com/forum.htm | | |
|
| |
iowan
{ Membre actif }
Messages : 304
| le script marche mais je me demmande ou ta mis le script javascript dans overall_header_new car la je vois que ta ecraser la balise head
pour Paparazziie oui selon le chargement du script | | |
|
| |
xEmiilyeee
{ Membre actif }
Messages : 381
| Tout est parfait de mon coté toutefois j'aimerais que l'emplacement ou il y a le nombre et topics et de message ... Comment faire pour que le texte sois plus petit ? Sinon déjà merci d'avoir travail sur le code et tout
| | |
|
| |
Invité Invité
| Merci pour le code @Iowan
+1 pour la demande de xEmiilyeee, ça fait énorme !
| | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| J'ai une question moi concernant ce tuto: http://www.supportduweb.com/scripts_tutoriaux-code-source-48-systeme-d-onglets-en-javascript-x-html-et-css-dans-la-meme-page.html J'ai testé un truc sur mon *nouveau* fo test, ici: http://ktrash-test.forumactif.com/forum.htm C'est pas mal concluant, mais il y a un truc qui cloche. J'aimerais que les onglets soient à gauche. J'ai essayé de mettre - Code:
-
text-align: left; dans le CSS, tout comme - Code:
-
<left></left> Dans la bonne section du html, bref ça marche pas ;_; Est-ce que quelqu'un pourrait m'aider XD? S'il vous plait ._.? CSS: - Code:
-
.onglet { display:inline-block; margin-left:3px; margin-right:3px; padding:3px; border:1px inset #000000; -moz-border-radius: 10px 10px 0px 0px; background-color: #4A4040; color: #FFFFFF; font-size: 200%; font-family: georgia, verdana, "times new roman", serif; font-variant: small-caps; } .onglet_0 { background:#3b2c2c; border-bottom:0px solid #000000; padding-bottom: 4px; } .onglet_1 { background:#261D1D; border-bottom:0px solid #000000; padding-bottom:4px; } .contenu_onglet { background-color: #261D1D; border: 1px inset #000000; -moz-border-radius: 10px 10px 10px 10px; margin-top:-1px; padding:5px; display:none; } 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> </head> <body> <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_contexte" onclick="javascript:change_onglet('contexte');">Contexte</span> <span class="onglet_0 onglet" id="onglet_postes_vacants" onclick="javascript:change_onglet('postes_vacants');">Postes vacants</span> <span class="onglet_0 onglet" id="onglet_staff" onclick="javascript:change_onglet('staff');">Staff</span> </div> <div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_accueil"> <table><tr colspan="2"><td>Menu~</td><td>Partenaires</td></tr> <tr><td>Bienvenue.</td></tr></table> </div> <div class="contenu_onglet" id="contenu_onglet_contexte"> <table><tr><td>Contexte</td><td>Légers règlements concernant le contexte</td></tr></table> </div> <div class="contenu_onglet" id="contenu_onglet_postes_vacants"> MANY MANY POSTES VACANTS YOUHOU \O/ (en infobulles) </div> <div class="contenu_onglet" id="contenu_onglet_staff"> Présentation du staff (en infobulles) </div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'accueil'; change_onglet(anc_onglet); //--> </script> </body> </html> Aucun template vu que c'est sur la PA, oui j'utilise Firefox, et ehm le design c'est un hitskin, non jlai pas fait >.< *sort* | | |
|
| |
poussette59
{ Membre }
Messages : 236
| Merci ça marche impec mais les couleurs des catégories ont disparu donc apparemment elles ne se modifie plus dans couleur alors ou puis je faire cela? fow test: http://creationfg.bbflash.net/index.htm
edit: j'ai trouver pour les contour mais toujours pas pour le fond :/ | | |
|
| |
Invité Invité
| Il faut que tu rajoutes la balise "background" , pour le fond. Car là, il n'y est pas, il est transparent - comme on voit le fond.
|
Dernière édition par © Pretty Reckless. le Lun 08 Mar 2010, 12:43, édité 1 fois | |
|
| |
poussette59
{ Membre }
Messages : 236
| tu sais m'aidais à propos de la balise? car la je sais pas ce qu'il faut mettre :/ et si quelqu'un peu aussi me dire comment diminuer la largeur du cadre qui entour le tout car j'ai essayer un peu partout dans le CSS et bien sur largeur du forum mais rien à faire :/ merci a celui ou celle qui pourra m'aidai | | |
|
| |
iowan
{ Membre actif }
Messages : 304
| pour IKo ajoute ceci a ton css: - Code:
-
.onglets{ left: 22%; position:relative; width: 500px; }
poussette59: oui il faut redesigner ton forum ou bien améliorer les templates pour tes besoins xEmiilyeee: le CSS ! avec font-size | | |
|
| |
Invité Invité
| @poussette59, il faut que tu rajoutes
- Code:
-
background-color: #COULEUR DE FOND; dans
- Code:
-
.my_cat_body{
Et tu entends quoi par " diminuer la largeur du cadre qui entour le tout " ?
| | |
|
| |
poussette59
{ Membre }
Messages : 236
| Merci a vous deux
pour le cadre je parle de ça
https://2img.net/h/oi45.tinypic.com/wv4lm8.png
tu vois l'espace entre les stats et la barre bleu est super large j'aurai aimé la diminuer ^^
par contre chez moi pas moyen de diminuer la taille des stats :/ | | |
|
| |
|Shizu
{ Membre }
Messages : 89
| Iowan => J'ai remis la balise head et mis juste avant le script mais ça ne donne toujours rien =S Que faire? | | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| Iowan: J'ai essayé, mais cette-fois ci ça les met à droite et une par dessus l'autre~ Mais après légères modifications: - Code:
-
right: 18%; position: relative; width: 500px; Les onglets sont à la bonne position mais toujours l'une par dessus l'autre~ Est-ce que tu saurais par hasard comment les remettre l'une à côté de l'autre? | | |
|
| |
iowan
{ Membre actif }
Messages : 304
| IKO: j'ai motionner dans le script la class css onglets pas onglet supprime ce que tu a fait sur onglet et copy/coller le script tel quel. ( j'ai pas bien lu ta demmande j'ai cru que tu veux les mettre a droit -_- bon tu manipule le script pour les mettres a gauche) |Shizu: je te suggère de réinitialiser le template overal_header_new apres tu va chercher dans le template (réinitialisé bien sur) la balise - Code:
-
</head> avant cette balise, tu la laisse mais avant tu va copier coller le script javascript et publier le template | | |
|
| |
|Shizu
{ Membre }
Messages : 89
| Hello,Iowan, j'ai créer un forum spécialement pour essayer le code dessus. J'ai donc tous réinitialiser, j'ai coller tous dans les différents templates et ensuite j'ai rechercher la balise head ( qui n'est d'ailleurs pas difficile à trouver vu qu'il est pratiquement tout au dessus). Mais voila, ça donne le même résultat que sur mon autre forum... Voila le code du template, peut-être trouveras-t-on un problème? Adresse du forum test:http://forum-de-test.forums-actifs.net/index.htm Code: - Code:
-
<!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"> <script type="text/javascript" src="http://www.yourjavascript.com/0374901133/script.js" ></script><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="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> <!-- 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 --> <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 --> </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> <td align="center" width="100%" valign="middle"> <div class="maintitle">{MAIN_SITENAME}</div> <br /> <span class="gen">{SITE_DEscriptION}<br /> </span> </td> <!-- END switch_logo_left -->
<!-- BEGIN switch_logo_center --> <td align="center" width="100%" valign="middle"> <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a><br /> <div class="maintitle">{MAIN_SITENAME}</div> <br /> <span class="gen">{SITE_DEscriptION}</span> </td> <!-- END switch_logo_center -->
<!-- BEGIN switch_logo_right --> <td align="center" width="100%" valign="middle"> <div class="maintitle">{MAIN_SITENAME}</div> <br /> <span class="gen">{SITE_DEscriptION}<br /> </span> </td> <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 --> <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 --> | | |
|
| |
poussette59
{ Membre }
Messages : 236
| Shizu c'est quoi ton soucis?? car il s'affiche correctement de chez moi?!? | | |
|
| |
|Shizu
{ Membre }
Messages : 89
| Bonsoir Poussette59,
Et bien comme tu peux le constater sur mon forum test, aucun onglets n'apparait =S Je n'ai juste que les sous forums qui sont afficher, pas les catégories =S | | |
|
| |
Contenu sponsorisé
| |
| |
| De nombreuses questions n_n. | |
|