CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Créer une organisation par onglets (messages) | |
| |
Radimir
{ Membre actif }
Messages : 459
| C'est dans l'overall_header Kimy ^^ | | |
| | | Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| Pourrait-on avoir le contenu exact de ta page html s'il te plait~? Peut-être que le problème vient de là, puisque le code est correctement inséré dans le template.
C'est peut-être juste une erreur de copié-collé~~ | | |
| | | Kimy
{ Membre actif }
Messages : 1190
| | | | Lira
{ Membre }
Messages : 182
| Désolée, j'ai du me coucher... ^^" - Code:
-
//<!-- 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; } //--> Voilà le code de ma page html. En fait laissez tomber... J'ai fais une demande de PA, ça sera plus simple ^^ Merci beaucoup de votre aide en tout cas. | | |
| | | Tamaki ♫
{ Membre }
Messages : 16
| J'ai essayé de faire ce tuto, mais quand je veux mettre une PA image dans chaque onglet. J'ai donc mis mon code PA dans "Contenu de l'onglet", mais rien ne s'affiche quand je passe la souris sur mon onglet Voici le code : - Code:
-
<div class="systeme_onglets">
<div class="onglets"> <span class="onglet_0 onglet" id="Avant tout" onmoseouver="javascript:change_onglet('nom_de_longlet');">Avant tout</span>
<span class="onglet_0 onglet" id="Staff" onmoseouver="javascript:change_onglet('nom_de_longlet');">Staff</span>
<span class="onglet_0 onglet" id="Wanted" onmoseouver="javascript:change_onglet('nom_de_longlet');">Wanted</span>
<span class="onglet_0 onglet" id="Affiliates" onmoseouver="javascript:change_onglet('nom_de_longlet');">Affiliates</span>
<span class="onglet_0 onglet" id="En plus..." onmoseouver="javascript:change_onglet('nom_de_longlet');">En plus...</span>
</div>
<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet"><IMG NAME="avanttout0" SRC="http://i20.servimg.com/u/f20/14/30/59/21/avant_10.jpg" WIDTH="600" HEIGHT="300" BORDER="0" USEMAP="#avant tout">
<MAP NAME="accueil">
<AREA SHAPE="rect" COORDS="0,65,153,102" HREF=" http://tokyo-decadance.vampire-legend.net/-reglement-f2/rules-t3.htm#3" ALT="Règlement">
<AREA SHAPE="rect" COORDS="0,114,153,151" HREF=" http://tokyo-decadance.vampire-legend.net/-reglement-f2/rules-t3.htm#3" ALT="Contexte">
</MAP> </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 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> Je sais pas si j'ai mis ou enlevé un truc qu'il fallait pas (ouai, je m'appelle "Douée"...) ^^", si quelqu'un peut m'aidé =) | | |
| | | Radimir
{ Membre actif }
Messages : 459
| Tu as mis ce code dans ta PA ou autre ? Tu n'as pas oublié de le mettre?Aussi revois le tuto étape par étape en regardant bien si tu as fermer toute les balises - Code:
-
//<!-- 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; } //--> | | |
| | | Tamaki ♫
{ Membre }
Messages : 16
| J'ai mis le code dans la PA. J'veins même de refaire le tuto' en entier, mais rien ne marche =O | | |
| | | Mariie
{ Membre }
Messages : 2
| Ou faut il mettre le code css ? Merci d'avance | | |
| | | Radimir
{ Membre actif }
Messages : 459
| Bizarre , j'utilise souvent ce code et en le mettant au début de la PA avec le code qui suit si tu suis bien le tuto ça devrait marcher. Donc nouvelle question , tes catégories sont sous formes d'onglets ? As-tu utilisés les onglets pour autre chose que la PA ?
Marrie : Panneau d'administration >>> Affichage >> couleur >> Feuille de style Css
Tu colles le code dedans. | | |
| | | Mina
{ Membre }
Messages : 122
| Bonjour ! Alors j'ai un petit souci. J'ai testé ce code pour mon QEEL, voici mes problèmes : - La barre rose à droite est décalée - Le message "derniers membres connectés ces dernières 24h" s'est retrouvé en bas à gauche alors que j'aimerais qu'il rentre dans l'onglet "statistiques" - Je ne sais pas où mettre le lien de mon image de fond pour qu'elle apparaisse en plus des onglets. Voici mon template index_body : - Spoiler:
- Code:
-
{JAVASCRIPT} <!-- BEGIN message_admin_index --> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <!-- BEGIN message_admin_titre --> <tr> <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td> </tr> <!-- END message_admin_titre --> <!-- BEGIN message_admin_txt --> <tr> <td class="row1" rowspan="3" align="center" valign="middle"> <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div> </td> </tr> <!-- END message_admin_txt --> </table> <!-- END message_admin_index -->
<!-- BEGIN switch_user_login_form_header --> <form action="{S_LOGIN_ACTION}" method="post" name="form_login"> <!-- BEGIN switch_fb_connect_no --> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline"> <tr> <td class="row1" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><span class="genmed">{L_USERNAME}:</span> </td> <td><input class="post" type="text" size="10" name="username"/> </td> <td> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /> <span class="gensmall">{L_AUTO_LOGIN}</span> </td> </tr>
<tr> <td><span class="genmed">{L_PASSWORD}:</span> </td> <td><input class="post" type="password" size="10" name="password"/> </td> <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td> </tr> </table> </td> </tr> </table> <!-- END switch_fb_connect_no -->
<!-- BEGIN switch_fb_connect --> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline"> <tr> <td valign="top" width="100%" class="row1" align="center"> <table width="100%"> <tr> <td width="55%" valign="middle" align="right"> <table class="right"> <tr> <td><span class="genmed">{L_USERNAME}:</span> </td> <td><input class="post" type="text" size="10" name="username"/> </td> <td> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /> <span class="gensmall">{L_AUTO_LOGIN}</span> </td> </tr>
<tr> <td><span class="genmed">{L_PASSWORD}:</span> </td> <td><input class="post" type="password" size="10" name="password"/> </td> <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td> </tr> </table> </td> <td width="10%" align="center" valign="middle"> <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span> </td> <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="facebook_login()" v="2" perms="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td> </tr> </table> </td> </tr> </table> <!-- END switch_fb_connect --> </form> <!-- END switch_user_login_form_header -->
{CHATBOX_TOP} {BOARD_INDEX} <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="50%" valign="top"> <!-- BEGIN switch_user_logged_in --> <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a> <!-- END switch_user_logged_in --> <!-- BEGIN switch_delete_cookies --> <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a> <!-- END switch_delete_cookies --> </span> </td> <td width="50%" align="right"> <span class="gensmall"> <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br /> <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br /> <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a> <!-- BEGIN switch_on_index --> <!-- BEGIN switch_delete_cookies --> <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a> <!-- END switch_delete_cookies --> <!-- END switch_on_index --> </span> </td> </tr> </table>
<!-- BEGIN switch_user_login_form_footer --> <form action="{S_LOGIN_ACTION}" method="post" name="form_login"> <!-- BEGIN switch_fb_connect_no --> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline"> <tr> <td class="row1" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><span class="genmed">{L_USERNAME}:</span> </td> <td><input class="post" type="text" size="10" name="username"/> </td> <td> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /> <span class="gensmall">{L_AUTO_LOGIN}</span> </td> </tr>
<tr> <td><span class="genmed">{L_PASSWORD}:</span> </td> <td><input class="post" type="password" size="10" name="password"/> </td> <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td> </tr> </table> </td> </tr> </table> <!-- END switch_fb_connect_no -->
<!-- BEGIN switch_fb_connect --> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline"> <tr> <td valign="top" width="100%" class="row1" align="center"> <table width="100%"> <tr> <td width="55%" valign="middle"> <table class="right"> <tr> <td><span class="genmed">{L_USERNAME}:</span> </td> <td><input class="post" type="text" size="10" name="username"/> </td> <td> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /> <span class="gensmall">{L_AUTO_LOGIN}</span> </td> </tr>
<tr> <td><span class="genmed">{L_PASSWORD}:</span> </td> <td><input class="post" type="password" size="10" name="password"/> </td> <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td> </tr> </table> </td> <td width="10%" align="center" valign="middle"> <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span> </td> <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="facebook_login()" v="2" perms="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td> </tr> </table> </td> </tr> </table> <!-- END switch_fb_connect --> </form> <!-- END switch_user_login_form_footer -->
<!-- BEGIN disable_viewonline --> <div class="systeme_onglets">
<div class="onglets"> <span class="onglet_0 onglet" id="onglet_Groupes" onclick="javascript:change_onglet('Groupes');">Groupes</span> <span class="onglet_0 onglet" id="onglet_Statistiques" onclick="javascript:change_onglet('Statistiques');">Statistiques</span> <span class="onglet_0 onglet" id="onglet_Staff" onclick="javascript:change_onglet('Staff');">Staff</span> <span class="onglet_0 onglet" id="onglet_Crédits" onclick="javascript:change_onglet('Crédits');">Crédits</span> </div>
<div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_Groupes"><span class="groupes"> <a href="LIEN DU GROUPE 1"><font color="COULEUR DU GROUPE 1" size="2"><b>NOM DU GROUPE 1</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg"><br> <span class="groupes"><a href="LIEN DU GROUPE 2"><font color="COULEUR DU GROUPE 2" size="2"><b>NOM DU GROUPE 2</b></font></a> </span> <img src="http://i31.tinypic.com/mugck1.jpg"><br> <span class="groupes"> <a href="LIEN DU GROUPE 3"><font color="COULEUR DU GROUPE 3" size="2"><b>NOM DU GROUPE 3</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg"><br> <span class="groupes"> <a href="LIEN DU GROUPE 4"><font color="COULEUR DU GROUPE 4" size="2"><b>NOM DU GROUPE 4</b></font></a> </span></div>
<div class="contenu_onglet" id="contenu_onglet_Statistiques"><span class="gensmall">{TOTAL_POSTS}.<br> {TOTAL_USERS}<br> {NEWEST_USER}<br>{TOTAL_USERS_ONLINE}<br> {LOGGED_IN_USER_LIST}<br>{L_CONNECTED_MEMBERS}</span></div>
<div class="contenu_onglet" id="contenu_onglet_Staff">UC</div>
<div class="contenu_onglet" id="contenu_onglet_Crédits">UC</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'Groupes'; change_onglet(anc_onglet); //--> </script> <!-- END disable_viewonline --> {CHATBOX_BOTTOM} <br clear="all" /> <!-- BEGIN switch_legend --> <table border="0" cellspacing="3" cellpadding="0" align="center"> <tr> <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td> <td><span class="gensmall">{L_NEW_POSTS}</span></td> <td></td> <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td> <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td> <td> </td> <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td> <td><span class="gensmall">{L_FORUM_LOCKED}</span></td> </tr> </table> <!-- END switch_legend -->
{AUTO_DST}
<!-- BEGIN switch_fb_index_login --> <div id="fb-root"></div> <script type="text/javascript"> //<![CDATA[ FB.init({ appId: '{switch_fb_index_login.FACEBOOK_APP_ID}', status: true, cookie: true, xfbml: true }); //]]> </script> <!-- END switch_fb_index_login -->
Ainsi que mon CSS : - Spoiler:
- Code:
-
body { cursor: crosshair } a:hover { }
/*Déco barre navigation*/ a.mainmenu { background-color: #a2d1d9; font-weight: bold; opacity: 0.5; -moz-border-radius: 15px; color : #ffffff; font-style: bold; text-shadow: #789fa6 1px 1px 3px; font-size: 10px; }
a.mainmenu:hover { font-size: 10px; color: #789fa6; text-shadow: 3px 3px 3px #ffffff; }
/* Dernière colonne PA*/ .sujets_messages { padding: 3px; font-size: 11px; background-color: #c1ccd4; -moz-border-radius: 10px; border: 0px solid #fff4e0; background-image: url(); text-align: center; }
tr.post td {padding-left: 5px;} /* Espace entre avatar et post */ tr.post td {padding-right: 5px;}
a { text-decoration: none !important; text-shadow: #ffffff 1px 1px 3px; }
a:hover { text-decoration: none !important; color: #ffffff; }
body { margin : 0 ; } .bodylinewidth { border-left :solid 0px ; border-right :solid 0px ; }
.code div { width: auto !important; } .code { font-family: Comic Sans MS; font-size: 11px; color: #9b6b6b; line-height: 125%; background-image: url(http://img21.imageshack.us/img21/5233/sanstitre32x.png); border: #FFFFFF; border-style: solid; border: 2px dashed #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 3px ; width: 400px; display: block; padding: 10px; text-align: justify; }
.forumline { border: 0px dashed #cb99a1; -moz-border-radius: 8px; }
.profil_contour { background-color: #ffffff; -moz-border-radius: 15px; filter:alpha(opacity=70); opacity:0.7; }
.pseudos { font-variant: small-caps; font-size: 14px}
table.bodylinewidth { position: relative; border: 7px solid; border-top: 0px; border-bottom: 0px; border-color: #cb99a1; shadow: 1px 1px 1px; }
.row1{ background-color: #; background-image: url(""); background-repeat: repeat; } td.row2{ background-color: #; background-image: url(""); background-repeat: repeat; } td.row3{ background-color: #; background-image: url(""); background-repeat: repeat; }
.titre { font-size: 20px; font-family: Georgia; color: #c1ccd4; text-shadow: 1px 1px 3px #ffffff; text-align: justify; letter-spacing: 2px; font-style: italic; }
.titre_forum { font-family: arial; font-variant: small-caps; font-size: 13px; text-align: justify; padding-right: 10px;}
.profil_contour { background-color: #cacacd; -moz-border-radius: 15px; }
.pseudos { font-variant: small-caps; font-size: 14px}
.onglet { display:inline-block; margin-left:3px; margin-right:3px; padding: 3px; border:0px solid black; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; cursor:pointer; font-family: Verdana; color: #ffffff; font-size: 12px; } .onglet_0 { background:#bbbbbb; border-bottom:0px solid black;
} .onglet_1 { background:#dddddd; border-bottom:0px solid black;
} .contenu_onglet { background-color:#dddddd; border:0px solid black; margin-top:-1px; display:none; width: 500px; }
Je remercie d'avance celui ou celle qui jettera un oeil à mon problème =) | | |
| | | Mina
{ Membre }
Messages : 122
| Bon bah j'peux de nouveau plus éditer. Ne vous prenez pas la tête pour mon problème, c'est réglé ! J'ai trouvé une alternative :
j'ai entouré mon code d'onglets dans le template d'une div "image" que j'ai ajouté dans mon CSS et j'ai réglé l'opacité des onglets pour qu'on voit le fond en entier. Quant à la barre et le message des 24h, j'ai fait du deux en un : j'ai décoché 'affiche la liste des membres connectés aux dernières 24h'.
Voilà ! | | |
| | | Bathory
{ Membre }
Messages : 13
| Bonsoir =) Merci pour ce tutoriel mais j'ai un petit problème ^^' Voici ce que cela me donne : Ici ... Voici mes codes : Dans ma PA : - Spoiler:
- Code:
-
<div class="systeme_onglets">
<div class="onglets"> <span class="onglet_0 onglet" id="onglet_Accueil" onmouseover="javascript:change_onglet('Accueil');">Accueil</span> <span class="onglet_0 onglet" id="onglet_Staff" onmouseover="javascript:change_onglet('Staff');">Staff</span> <span class="onglet_0 onglet" id="onglet_Post_Vacants" onmouseover="javascript:change_onglet('Post_Vacants');">Post Vacants</span> <span class="onglet_0 onglet" id="onglet_News" onmouseover="javascript:change_onglet('News');">News</span> <span class="onglet_0 onglet" id="onglet_Crédits" onmouseover="javascript:change_onglet('Crédits');">Crédits</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"><TD style="VERTICAL-ALIGN: top" width="50%"><DIV style="TEXT-ALIGN: center"><DIV class=atelierdesc><div style="TEXT-ALIGN: center" align=center><SPAN style="FONT-FAMILY: georgia"><FONT face=Georgia size=7><blockquote> <font color="#996814">Bienvenue à </font><br></br> <font color="#7A581F"><i>Forks {USERNAME}</i></font></FONT></SPAN></div></DIV></DIV><BR>Vous venez de pénétrer dans une petite bourgade du nom de Forks; nombre d'habitants: 3. <BR><BR>Nous sommes en l'an 2010, Bella et Edward vivent une idylle lorsqu'un traqueur vient bouleverser leur train-train quotidien. Une mystérieuse femme surgit alors du passé d'Edward; qui est-elle? Comment sait-elle que les amoureux ont besoin d'aide? <BR><BR>Le staff rappelle que Jacob n'a pas encore muté et qu'il n'est donc pas encore au courant de la véracité des histoires des Quileutes. Merci de respecter le scripte. <BR><BR><EMBED height=204 type=application/x-shockwave-flash width=204 src=http://www.archive-host.com/compteur.php?url=http://s3.archive-host.com/membres/up/1696114791/horl_twil/12.swf wmode="transparent"> </TD> </div>
<div class="contenu_onglet" id="contenu_onglet_Staff"><TABLE> <TBODY> <TR> <TD><DIV class=imginfo><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/311.png"> <SPAN> <TABLE> <TBODY> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://forks-illusion.forumactif.com/profile.forum?mode=viewprofile&u=1">Voir le profil</A></FONT><BR></TD></TR> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://forks-illusion.forumactif.com/msg.forum?mode=post&u=1">Envoyer un MP</A><BR></FONT></TD></TR></TBODY></TABLE></SPAN></DIV></TD> <TD><DIV class=imginfo><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/211.png"> <SPAN> <TABLE> <TBODY> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://forks-illusion.forumactif.com/profile.forum?mode=viewprofile&u=3">Voir le profil</A></FONT><BR></TD></TR> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://forks-illusion.forumactif.com/msg.forum?mode=post&u=3">Envoyer un MP</A><BR></FONT></TD></TR></TBODY></TABLE></SPAN></DIV></TD> <TD><DIV class=imginfo><IMG src="http://i63.servimg.com/u/f63/11/83/54/29/50_8510.jpg"> <SPAN> <TABLE> <TBODY> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="LIEN">Voir le profil</A></FONT><BR></TD></TR> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="LIEN">Envoyer un MP</A><BR></FONT></TD></TR></TBODY></TABLE></SPAN></DIV></TD> <TD><DIV class=imginfo><IMG src="http://i63.servimg.com/u/f63/11/83/54/29/50_8510.jpg"> <SPAN> <TABLE> <TBODY> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="LIEN">Voir le profil</A></FONT><BR></TD></TR> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="LIEN">Envoyer un MP</A><BR></FONT></TD></TR></TBODY></TABLE></SPAN></DIV></TD></TR></TBODY></TABLE><BR><A href="http://forks-illusion.forumactif.com/charte-de-vie-f1/staff-du-forum-t14.htm#55">Voir le reste du Staff</A> <BR><BR><BR><BR> </div>
<div class="contenu_onglet" id="contenu_onglet_Post_Vacants"><TR> <TD style="VERTICAL-ALIGN: top; PADDING-TOP: 20px" width="25%" align=middle><a href="http://forks-illusion.forumactif.com/vampires-f7/la-famille-cullen-t5.htm#5#Cullen"><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/pv_edw10.png"></a><BR><BR><a href="http://forks-illusion.forumactif.com/vampires-f7/nomades-t8.htm#23#Nomades"><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/pv_lau10.png"></A><BR><BR><a href="http://forks-illusion.forumactif.com/vampires-f7/nomades-t8.htm#23#Nomades"><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/pv_vic10.png"></A><BR><BR><a href="http://forks-illusion.forumactif.com/humains-f8/les-lyceens-t10.htm#30#Bella"><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/pv_bel10.png"></A><BR><BR><a href="http://forks-illusion.forumactif.com/vampires-f7/nomades-t8.htm#23#Nomades"><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/pv_jam10.png"></A><BR><BR><a href="http://forks-illusion.forumactif.com/quileutes-f9/la-meute-t12.htm#41#Meute"><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/pv_jac10.png"></A><BR><BR></TD></TR></div><div class="contenu_onglet" id="contenu_onglet_News"><MARQUEE onmouseover=this.stop() onmouseout=this.start() direction=up scrollAmount=2 scrollDelay=1 align="center">- Création du forum le 14 Juillet 2010<BR>- Ouverture officielle le ... ... 2010</MARQUEE></TD></div><div class="contenu_onglet" id="contenu_onglet_Crédits">Concept par Saray - Retravaillé par Guillaume<br>Structure par MalOuw<BR>Posts Vacants par Erestina<br>Design par Vickss & jhonny<br><a href="http://createur2forum.forumactif.org/" class="postlink" target="_blank"><img src="http://i39.tinypic.com/30tsy35.gif " border="0" alt="" /></a><A href="http://www.forumgraphisme.com" target=_blank><IMG src="http://www.noelshack.com/uploads/LGOC2059300.jpg"></A> </TD></div><div class="contenu_onglet" id="contenu_onglet_nom_de_longlet"><MARQUEE onmouseover=this.stop() onmouseout=this.start() direction=leaf scrollAmount=2 scrollDelay=1 align="center"><A href="http://n-co.exprimetoi.net" target=_blank><IMG src="http://i38.tinypic.com/14v49kh.png"></A> <A href="http://www.forumgraphisme.com" target=_blank><IMG src="http://www.noelshack.com/uploads/LGOC2059300.jpg"></A> <A href="LIEN" target=_blank><IMG src="http://i63.servimg.com/u/f63/11/83/54/29/88_3112.jpg"></A></MARQUEE></TD></TR></TBODY></TABLE></div></div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'Accueil'; change_onglet(anc_onglet); //--> </script>
Dans mon css : - Spoiler:
- Code:
-
.onglet { display:inline-block; margin-left:3px; margin-right:3px; padding:3px; border:1px solid black; cursor:pointer; } .onglet_0 { background:#996814; border-bottom:1px solid black; } .onglet_1 { background:#996814; border-bottom:0px solid black; padding-bottom:4px; } .contenu_onglet { background-color:#E8D888; border:1px solid black; margin-top:-1px; padding:5px; display:none; }
Dans mon Template : - 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_LIKE} {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_FB_LIKE} <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 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 language="javascript" src="http://forks-illusion.forumactif.com/Onglets-h1.htm script onglet"></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 -->
Pourriez-vous m'aider? D'avance merci (: | | |
| | | Dumax
{ Membre }
Messages : 12
| Hello, J'aurais besoin d'aide s'il vous plaît. J'ai utilisé ce tuto sur mon forum dans les description comme ceci : - Spoiler:
Ce marche très bien mais le problème c'est que ca ne le fait que pour le premier forum et pas sur les autres. Voici le template, pouvez vous m'aidez ? - Spoiler:
{catrow.tablehead.L_FORUM} |
---|
{catrow.cathead.CAT_TITLE} |
| {catrow.forumrow.FORUM_NAME}
{catrow.forumrow.FORUM_DESC} | Stats Who {catrow.forumrow.TOPICS} sujets {catrow.forumrow.POSTS} messages.
{catrow.forumrow.LAST_POST} //
|
| |
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} |
|
Merci d'avance | | |
| | | Æ
{ Membre }
Messages : 27
| Bonjour !
Peut etre c'est ecrit avant mais je n'ai pas vraiment le temps de lire les 8 pages... bref j'aimerais savoir où l'on peut changer ce que l'onglet devient au click ou au passage de la souris SVP ?
Merci d'avance ! | | |
| | | Kory
{ Membre actif }
Messages : 370
| - Tamaki ♫ a écrit:
- J'ai essayé de faire ce tuto, mais quand je veux mettre une PA image dans chaque onglet. J'ai donc mis mon code PA dans "Contenu de l'onglet", mais rien ne s'affiche quand je passe la souris sur mon onglet
Voici le code :
- Code:
-
<div class="systeme_onglets">
<div class="onglets"> <span class="onglet_0 onglet" id="Avant tout" onmoseouver="javascript:change_onglet('nom_de_longlet');">Avant tout</span>
<span class="onglet_0 onglet" id="Staff" onmoseouver="javascript:change_onglet('nom_de_longlet');">Staff</span>
<span class="onglet_0 onglet" id="Wanted" onmoseouver="javascript:change_onglet('nom_de_longlet');">Wanted</span>
<span class="onglet_0 onglet" id="Affiliates" onmoseouver="javascript:change_onglet('nom_de_longlet');">Affiliates</span>
<span class="onglet_0 onglet" id="En plus..." onmoseouver="javascript:change_onglet('nom_de_longlet');">En plus...</span>
</div>
<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet"><IMG NAME="avanttout0" SRC="http://i20.servimg.com/u/f20/14/30/59/21/avant_10.jpg" WIDTH="600" HEIGHT="300" BORDER="0" USEMAP="#avant tout">
<MAP NAME="accueil">
<AREA SHAPE="rect" COORDS="0,65,153,102" HREF=" http://tokyo-decadance.vampire-legend.net/-reglement-f2/rules-t3.htm#3" ALT="Règlement">
<AREA SHAPE="rect" COORDS="0,114,153,151" HREF=" http://tokyo-decadance.vampire-legend.net/-reglement-f2/rules-t3.htm#3" ALT="Contexte">
</MAP> </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 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> Je sais pas si j'ai mis ou enlevé un truc qu'il fallait pas (ouai, je m'appelle "Douée"...) ^^", si quelqu'un peut m'aidé =) Normal, tu ne sais pas écrire "onmouseover" (Tu l'écris "onmoseouver") | | |
| | | Kory
{ Membre actif }
Messages : 370
| - Æ a écrit:
- Bonjour !
Peut etre c'est ecrit avant mais je n'ai pas vraiment le temps de lire les 8 pages... bref j'aimerais savoir où l'on peut changer ce que l'onglet devient au click ou au passage de la souris SVP ?
Merci d'avance ! - Code:
-
<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onmouseover="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span> | | |
| | | Skwatt'
{ Membre }
Messages : 23
| Bonjour,
Tout d'abord, un grand merci pour ce tutoriel ^^ Mais j'aurai une question à vous poser. Dans l'exemple, le code est bien appliqué à la PA ? Si oui, comment faire pour que les onglets soient placés au dessus du tableau de la PA ?
( je reprend le lien de l'exemple pour vous montrer ce que je veux dire ^^ ) :
http://twilight-rpg.forumotion.com/Fiche-Pub-h2.htm
Merci d'avance | | |
| | | Noumi
{ Membre }
Messages : 15
| Ca ne fonctionne pas du tout chez moi | | |
| | | Tiadeets
{ Membre }
Messages : 31
| Je dois être bête mais toute la partie onglet je ne vois pas où mettre ça. | | |
| | | .Little Lady
{ Membre actif }
Messages : 564
| La partie Onglet, tu la mets soit dans une page HTML soit dans ta PA. | | |
| | | Bathory
{ Membre }
Messages : 13
| - Bathory a écrit:
- Bonsoir =)
Merci pour ce tutoriel mais j'ai un petit problème ^^' Voici ce que cela me donne : Ici ...
Voici mes codes :
Dans ma PA :
- Spoiler:
- Code:
-
<div class="systeme_onglets">
<div class="onglets"> <span class="onglet_0 onglet" id="onglet_Accueil" onmouseover="javascript:change_onglet('Accueil');">Accueil</span> <span class="onglet_0 onglet" id="onglet_Staff" onmouseover="javascript:change_onglet('Staff');">Staff</span> <span class="onglet_0 onglet" id="onglet_Post_Vacants" onmouseover="javascript:change_onglet('Post_Vacants');">Post Vacants</span> <span class="onglet_0 onglet" id="onglet_News" onmouseover="javascript:change_onglet('News');">News</span> <span class="onglet_0 onglet" id="onglet_Crédits" onmouseover="javascript:change_onglet('Crédits');">Crédits</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"><TD style="VERTICAL-ALIGN: top" width="50%"><DIV style="TEXT-ALIGN: center"><DIV class=atelierdesc><div style="TEXT-ALIGN: center" align=center><SPAN style="FONT-FAMILY: georgia"><FONT face=Georgia size=7><blockquote> <font color="#996814">Bienvenue à </font><br></br> <font color="#7A581F"><i>Forks {USERNAME}</i></font></FONT></SPAN></div></DIV></DIV><BR>Vous venez de pénétrer dans une petite bourgade du nom de Forks; nombre d'habitants: 3. <BR><BR>Nous sommes en l'an 2010, Bella et Edward vivent une idylle lorsqu'un traqueur vient bouleverser leur train-train quotidien. Une mystérieuse femme surgit alors du passé d'Edward; qui est-elle? Comment sait-elle que les amoureux ont besoin d'aide? <BR><BR>Le staff rappelle que Jacob n'a pas encore muté et qu'il n'est donc pas encore au courant de la véracité des histoires des Quileutes. Merci de respecter le scripte. <BR><BR><EMBED height=204 type=application/x-shockwave-flash width=204 src=http://www.archive-host.com/compteur.php?url=http://s3.archive-host.com/membres/up/1696114791/horl_twil/12.swf wmode="transparent"> </TD> </div>
<div class="contenu_onglet" id="contenu_onglet_Staff"><TABLE> <TBODY> <TR> <TD><DIV class=imginfo><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/311.png"> <SPAN> <TABLE> <TBODY> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://forks-illusion.forumactif.com/profile.forum?mode=viewprofile&u=1">Voir le profil</A></FONT><BR></TD></TR> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://forks-illusion.forumactif.com/msg.forum?mode=post&u=1">Envoyer un MP</A><BR></FONT></TD></TR></TBODY></TABLE></SPAN></DIV></TD> <TD><DIV class=imginfo><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/211.png"> <SPAN> <TABLE> <TBODY> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://forks-illusion.forumactif.com/profile.forum?mode=viewprofile&u=3">Voir le profil</A></FONT><BR></TD></TR> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="http://forks-illusion.forumactif.com/msg.forum?mode=post&u=3">Envoyer un MP</A><BR></FONT></TD></TR></TBODY></TABLE></SPAN></DIV></TD> <TD><DIV class=imginfo><IMG src="http://i63.servimg.com/u/f63/11/83/54/29/50_8510.jpg"> <SPAN> <TABLE> <TBODY> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="LIEN">Voir le profil</A></FONT><BR></TD></TR> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="LIEN">Envoyer un MP</A><BR></FONT></TD></TR></TBODY></TABLE></SPAN></DIV></TD> <TD><DIV class=imginfo><IMG src="http://i63.servimg.com/u/f63/11/83/54/29/50_8510.jpg"> <SPAN> <TABLE> <TBODY> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="LIEN">Voir le profil</A></FONT><BR></TD></TR> <TR> <TD style="TEXT-ALIGN: center"><FONT size=1><A href="LIEN">Envoyer un MP</A><BR></FONT></TD></TR></TBODY></TABLE></SPAN></DIV></TD></TR></TBODY></TABLE><BR><A href="http://forks-illusion.forumactif.com/charte-de-vie-f1/staff-du-forum-t14.htm#55">Voir le reste du Staff</A> <BR><BR><BR><BR> </div>
<div class="contenu_onglet" id="contenu_onglet_Post_Vacants"><TR> <TD style="VERTICAL-ALIGN: top; PADDING-TOP: 20px" width="25%" align=middle><a href="http://forks-illusion.forumactif.com/vampires-f7/la-famille-cullen-t5.htm#5#Cullen"><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/pv_edw10.png"></a><BR><BR><a href="http://forks-illusion.forumactif.com/vampires-f7/nomades-t8.htm#23#Nomades"><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/pv_lau10.png"></A><BR><BR><a href="http://forks-illusion.forumactif.com/vampires-f7/nomades-t8.htm#23#Nomades"><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/pv_vic10.png"></A><BR><BR><a href="http://forks-illusion.forumactif.com/humains-f8/les-lyceens-t10.htm#30#Bella"><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/pv_bel10.png"></A><BR><BR><a href="http://forks-illusion.forumactif.com/vampires-f7/nomades-t8.htm#23#Nomades"><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/pv_jam10.png"></A><BR><BR><a href="http://forks-illusion.forumactif.com/quileutes-f9/la-meute-t12.htm#41#Meute"><IMG src="http://i34.servimg.com/u/f34/15/44/01/35/pv_jac10.png"></A><BR><BR></TD></TR></div><div class="contenu_onglet" id="contenu_onglet_News"><MARQUEE onmouseover=this.stop() onmouseout=this.start() direction=up scrollAmount=2 scrollDelay=1 align="center">- Création du forum le 14 Juillet 2010<BR>- Ouverture officielle le ... ... 2010</MARQUEE></TD></div><div class="contenu_onglet" id="contenu_onglet_Crédits">Concept par Saray - Retravaillé par Guillaume<br>Structure par MalOuw<BR>Posts Vacants par Erestina<br>Design par Vickss & jhonny<br><a href="http://createur2forum.forumactif.org/" class="postlink" target="_blank"><img src="http://i39.tinypic.com/30tsy35.gif " border="0" alt="" /></a><A href="http://www.forumgraphisme.com" target=_blank><IMG src="http://www.noelshack.com/uploads/LGOC2059300.jpg"></A> </TD></div><div class="contenu_onglet" id="contenu_onglet_nom_de_longlet"><MARQUEE onmouseover=this.stop() onmouseout=this.start() direction=leaf scrollAmount=2 scrollDelay=1 align="center"><A href="http://n-co.exprimetoi.net" target=_blank><IMG src="http://i38.tinypic.com/14v49kh.png"></A> <A href="http://www.forumgraphisme.com" target=_blank><IMG src="http://www.noelshack.com/uploads/LGOC2059300.jpg"></A> <A href="LIEN" target=_blank><IMG src="http://i63.servimg.com/u/f63/11/83/54/29/88_3112.jpg"></A></MARQUEE></TD></TR></TBODY></TABLE></div></div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'Accueil'; change_onglet(anc_onglet); //--> </script>
Dans mon css :
- Spoiler:
- Code:
-
.onglet { display:inline-block; margin-left:3px; margin-right:3px; padding:3px; border:1px solid black; cursor:pointer; } .onglet_0 { background:#996814; border-bottom:1px solid black; } .onglet_1 { background:#996814; border-bottom:0px solid black; padding-bottom:4px; } .contenu_onglet { background-color:#E8D888; border:1px solid black; margin-top:-1px; padding:5px; display:none; }
Dans mon Template :
- 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_LIKE} {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_FB_LIKE} <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 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 language="javascript" src="http://forks-illusion.forumactif.com/Onglets-h1.htm script onglet"></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}
<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>
<!-- END switch_logo_center --> <div class="maintitle">{MAIN_SITENAME}</div>
<span class="gen">{SITE_DESCRIPTION} </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 -->
Pourriez-vous m'aider? D'avance merci (: | | |
| | | Aerlinn
{ Membre }
Messages : 82
| Petite question, je ne sais pas si elle a déjà été posée (j'ai regardé mais je n'ai pas trouvé), est-ce que ce tuto peut s'appliquer également avec une image que l'on aurait préalablement découpé avec l'outil tranches sur Photoshop (de la même manière qu'un mapping)? | | |
| | | Tiadeets
{ Membre }
Messages : 31
| Je dois faire un truc qui va pas. Rien ne s'affiche, voici mon code html : - Code:
-
//<!-- 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; } //-->
<div class="systeme_onglets">
<div class="onglets"> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Welcome</span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Staff</span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Partenariats</span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Crédits</span> </div>
<div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet"> <table border="0"> <tr> <td><size=18>Navigation : </size> <br><br> * <a href="http://tiasbook.forumactif.com/dix-commandements-f47/"><font size="2">Les 10 commandements</font></a> <br> * <a href="http://tiasbook.forumactif.com/biographies-f18/"><font size="2">Biographies</font></a> <br> * <a href="http://tiasbook.forumactif.com/demandes-de-partenariats-f32/"><font size="2">Demande de partenariats</font></a> <br> * <a href="http://tiasbook.forumactif.com/actualite-news-f27/"><font size="2">News</font></a></left></td><br><td><size=18>Welcome here {USERNAME}:</size> <br> <br> La musique vous envoute, les livres vous font rêver et voyager, vous ne pouvez plus vous passer de la magie des salles de cinéma? <br> Il n'y a plus qu'un pas à faire: rejoignez nous sur Tia's book, le forum où vous pourrez venir discuter de vos auteurs favoris tout comme faire votre playlist et faire partager vos clips préférés! <br> Niveau détente, le "café" vous accueillera à toute heure, la joie et la bonne humeur seront au rendez vous parmi les jeux et les nombreuses discussions! <br> Et si vous avez envie de devenir notre partenaire, c'est par <a href="http://tiasbook.forumactif.com/demandes-de-partenariats-f32/" class="postlink">ici</a>!</td><br><td><size=18>News :</size> <br><b><list>*Mars 2010 : </b>Boite à idées: Mettez vos idées pour le forum: <a href="http://tiasbook.forumactif.com/boite-a-idee-f35/">Ici</a></list> <br><list><b>*Septembre 2010:</b> Nouveau design! Donner votre avis <a href="http://tiasbook.forumactif.com/t-s-b-news-f27/red-witch-book-t219.htm?sid=8f0a163aa5d96eab7652136c85abd2a0" class="postlink">ici</a></list> <br><list><b>*Octobre 2010:</b> 1000 messages dépassés!!</list></td> </tr> </table></div>
<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet"><center> <a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=1" class="imginfo"><img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum/Tia1.jpg"/><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://i822.photobucket.com/albums/zz147/tiadeets/Signature-Avatar/Keiravava-1.png"/></a></td></tr><tr><td style="text-align: center;"><font size="2"><a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=1"><font color="#966154"><u>Tiadeets</u></font></a><br/></font></td></tr><tr align="center"/><td style="text-align: center;"><font size="1"><font color="#966154">Chef des Bibliothécaires</font><br/></font></td></tbody></table></span></a>
<a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=2" class="imginfo"><img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum/Shin1.jpg"/><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://tiasbook.forumactif.com/users/2312/10/75/93/avatars/2-71.png"/></a></td></tr><tr><td style="text-align: center;"><font size="2"><a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=2"><font color="#966154"><u>Shinsai</u></font></a><br/></font></td></tr><tr align="center"/><td style="text-align: center;"><font size="1"><font color="#966154">Première Assistante</font><br/></font></td></tbody></table></span></a></center></div>
<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet"><HTML> <HEAD> <TITLE> MARQUEE - Exemple DIRECTION=up </TITLE> </HEAD> <BODY BGCOLOR="white" TEXT="black"> <MARQUEE SCROLLAMOUNT="5" DIRECTION="up" onmouseover=this.stop(); onmouseout=this.start() ><center><a href="http://the-graphics-only.forums-actifs.net"><img src="http://alainbregeon.free.fr/download/upload/mini.png" height="31" width="88"></a> <br> <a href="http://lemetro.forumdediscussions.com/forum.htm" class="postlink" target="_blank"><img src="http://i20.servimg.com/u/f20/12/40/50/96/88x3110.png" alt="" border="0"></a> <br> <a href="http://simucatch.pro-forum.fr"><img src="http://i66.servimg.com/u/f66/14/86/53/49/patena10.png" height="31" width="88"></a> <br> <a href="http://accros-et-mordus.forumactif.com"><img src="http://i37.servimg.com/u/f37/11/37/51/56/logo_m10.gif" height="31" width="88"></a> <br> <a href="http://twilighters.forumactif.org/"><img src="http://nsa04.casimages.com/img/2009/01/26/09012608451959293.jpg" height="31" width="88"></a> <br> <a href="http://coffee-pub.forumactif.com"><img src="http://i21.servimg.com/u/f21/09/01/04/42/untitl30.jpg" height="31" width="88"></a> <br> <a href="http://japan-pillow.asiat-world.com"><img src="http://img153.imageshack.us/img153/3270/bouton1japanpillow.png" height="31" width="88"></a> </p></center> </div></MARQUEE> </BODY> </HTML></div> <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Le forum a été créé le 14février 2010. <br> Design créé par <a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=1">Tiadeets</a> <br> <br> Souvent on dit forum optimisé sous tel ou tel navigateur et bien pour Tia's Book c'est Forum optimisé sous Windows 7. ^^ <br> <center><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/"><img alt="Contrat Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/80x15.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Tia's Book</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://tiasbook.forumactif.com" property="cc:attributionName" rel="cc:attributionURL">Tiadeets</a>. <img src="http://informatiquefrance.free.fr/sms/sms_13.jpg" border="0" alt="" /></center> </div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'Hello'; change_onglet(anc_onglet); //--> </script> Vous pouvez m'aider? | | |
| | | Heaven H
{ Membre }
Messages : 4
| Bonjour, je débute en HTML j'ai suivit le tutoriel, le soucis c'est que ca ne marche pas voila ce que j'obtient : - Spoiler:
J'ai suivit exactement les indications donner en créant tout d'abord ma page Html, ensuite j'ai copier ca - Code:
-
<script language="javascript" src="adresse de ta page html script onglet"> dans la description du Forum et enfin j'ai mis ce code dans ma page d’accueil : - Code:
-
<div class="systeme_onglets">
<div class="onglets"> <span class="onglet_0 onglet" id="onglet_contexte" onclick="javascript:change_onglet('contexte');">contexte</span> <span class="onglet_0 onglet" id="onglet_staff" onclick="javascript:change_onglet('staff');">le staff</span> <span class="onglet_0 onglet" id="onglet_posts_vacants" onclick="javascript:change_onglet('posts_vacants');">les posts vacants</span> </div>
<div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_contexte">uc </div>
<div class="contenu_onglet" id="contenu_staff">uc</div>
<div class="contenu_onglet" id="contenu_onglet_posts_vacants">uc</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'accueil'; change_onglet(anc_onglet); //--> </script> Si quelqu'un pouvait m'expliquer où je me suis tromper ce serait super Merci d'avance (: | | |
| | | Choune
{ Membre }
Messages : 14
| Voila moi, j'ai un gros soucis avec le tuto ! J'ai tout suivis et pourtant rien...quand je passe la souris dessus rien ce passe... aucun onglet s'ouvre! Donc voila mes codes , en espérant que vous pouvez m'aidez car la j'en peux plus, j'ai tout essayer... - Code:
-
<div class="systeme_onglets"> <div class="onglets"> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onmouseover="javascript:change_onglet('onglet1');"><font size="4">The Great Story</font></span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onmouseover="javascript:change_onglet('onglet2');"><font size="4">The Crazy Team</font></span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onmouseover="javascript:change_onglet('onglet3');"><font size="4">We Need Them</font></span> <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onmouseover="javascript:change_onglet('onglet4');"><font size="4">We Love It</font></span> </div><div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_onglet1"> <br> <table><tbody><tr><td><blockquote><center><div style="background-color: #D54C39;"><font size="4"><font color="#576F40"><b>CONTEXTE</b></font></font></div> <br><div style="width: 240px; background-color: #EAE08D;"><div style="padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;"><div style="overflow: auto; width: 220px; height: 210px;"><font size="3"><align= justify=""><i><font face="Georgia"><div align="right">Miami, 2010</div> </font></i><br> <font size="3"><div align="justify">La ville à été le terrain de jeux de plusieurs scientifiques qui ont voulu jouer à Dieu. Pour cela, ils ont déversé un produit toxique dans l'eau potable de plusieurs villes. Aujourd'hui le monde est donc ravagé par un nouveau mal, un mal qui tue ou fait évoluer les gênes des gens. Plusieurs personnes se sont découverts des pouvoirs suite à cet "incident", mais toutes ne les utilisent pas pour faire le bien... et vous, quel sera votre camps??</div></font></align=></font></div></div></blockquote></center> <br> </td><td><br><blockquote><center><div style="background-color: #D54C39;"><font size="4"><font color="#586F49"><b>INFOS</b></font></font></div> <br><div style="width: 375px; height:150; background-color: #EAE08D; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px"><div style="padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;"><div style="border: 2px solid #132E16; text-align: center; width: 350px; -moz-border-radius: 9px 9px 9px 9px; line-height: 12px;"><blockquote><div align="justify"><font face="Georgia"><span style="font-size: 14px; line-height: normal;"><br>○ Bienvenue à Miami, <br>○ Ici nous vous demandons un minimum de 15 lignes de RP ○ Si vous avez des questions n'hésitez pas à envoyé un MP aux admins ou à poster dans le coins des invités ○ Aidez nous à faire connaitre le forum en votant pour nous <a href="http://hysteria.forums-actifs.net/banque-f81/les-votes-t58.htm" class="postlink">ici</a> ○ Et surtout n'oubliez pas de vous amuser (mais je m'en fais pas trop pour ça avec nous vous allez vous amuser!! <img src="http://terminator.keuf.net/users/1513/18/91/96/smiles/540148.gif" alt="" border="0"> ) ○ <img src="http://terminator.keuf.net/users/1513/18/91/96/smiles/466589.gif" alt="" border="0"> ○ <br> <br> ○ Nous vous proposons de venir donner vos avis sur ce que vous aimeriez obtenir avec vos points top sites <a href="http://hysteria.forums-actifs.net/panneau-d-affichage-f74/qu-est-ce-que-les-points-apportent-t364.htm" class="postlink">ici</a> ○</span></font></div><font face="Georgia"></font></blockquote></div></center></div></div></blockquote></center></blockquote></td></tr></tbody></table> </div><div class="contenu_onglet" id="contenu_onglet_onglet2"> <br><br><center><blockquote><blockquote><div style="background-color: #D54C39;"><font size="4"><font color="#586F49"><b>TEAM ADMIN</b></font></font></div></blockquote></blockquote> <br><font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://img510.imageshack.us/img510/2443/cait.png" style="border:7px #EAE08D solid; -moz-border-radius:10px;"></font><span><table width="125" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align: center;"><font size="1">Caitlyn Clearwater</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://img838.imageshack.us/img838/8681/21948393.gif"></a></td></tr><tr><td style="text-align: center;"><font size="1">Fondatrice et Admin et le premier qui touche aura affaire à Catwoman...<br></font></td></tr><tr align="center"></tr></tbody></table></span></a> <font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://img821.imageshack.us/img821/2286/cathk.png" style="border:7px #EAE08D solid; -moz-border-radius:10px;"></font><span><table width="125" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align: center;"><font size="1">Catherina Clearwater</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://img225.imageshack.us/img225/8660/66994324.gif"></a></td></tr><tr><td style="text-align: center;"><font size="1">Admin, attention Catwoman adore jouer avec son fouet...<br></font></td></tr><tr align="center"></tr></tbody></table></span></a> <font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://img821.imageshack.us/img821/6029/lukae.png" style="border:7px #EAE08D solid; -moz-border-radius:10px;"></font><span><table width="125" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align: center;"><font size="1">Luka Van H</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://i44.tinypic.com/n1b9xd.gif"></a></td></tr><tr><td style="text-align: center;"><font size="1">Admin, WonderWoman fait des ravage dans son costume moulant...<br></font></td></tr><tr align="center"></tr></tbody></table></span></a> <font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://img829.imageshack.us/img829/8840/esmee.png" style="border:7px #EAE08D solid; -moz-border-radius:10px;"></font><span><table width="125" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align: center;"><font size="1">Esmée A. Brown</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://img96.imageshack.us/img96/7443/651923227.gif"></a></td></tr><tr><td style="text-align: center;"><font size="1">Admin, La folie et la perversion font partie de ses nombreuses qualitées...<br></font></td></tr><tr align="center"></tr></tbody></table></span></a><br><br> <center><blockquote><blockquote><div style="background-color: #D54C39;"><font size="4"><font color="#586F49"><b>TEAM MODO</b></font></font></div></blockquote></blockquote> <br><font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://img84.imageshack.us/img84/3713/carter.png" style="border:7px #EAE08D solid; -moz-border-radius:10px;"></font><span><table width="125" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align: center;"><font size="1">Carter Gordon</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://i40.tinypic.com/14t30ig.gif"></a></td></tr><tr><td style="text-align: center;"><font size="1">Modératrice, elle parle aux animaux mais pas de panique elle sait aussi parler aussi aux humains!!<br></font></td></tr><tr align="center"></tr></tbody></table></span></a> <font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://img196.imageshack.us/img196/9376/jacksonn.png" style="border:7px #EAE08D solid; -moz-border-radius:10px;"></font><span><table width="125" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align: center;"><font size="1">Sean Lewis</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://img508.imageshack.us/img508/9153/45611482.gif"></a></td></tr><tr><td style="text-align: center;"><font size="1">Modérateur, petit tigre pervers mais chou... propriété de Catwoman!!<br></font></td></tr><tr align="center"></tr></tbody></table></span></a> <font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="http://img190.imageshack.us/img190/2542/mikei.png" style="border:7px #EAE08D solid; -moz-border-radius:10px;"></font><span><table width="125" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align: center;"><font size="1">Mike Millers</font><br></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://www.netimago.com/images/yH15FieIcpOrvJC.gif"></a></td></tr><tr><td style="text-align: center;"><font size="1">Modérateur, chef du gouvernement des bisounours...<br></font></td></tr><tr align="center"></tr></tbody></table></span></a></center> <br> </div><div class="contenu_onglet" id="contenu_onglet_onglet3"> <br><br><center><blockquote><blockquote><div style="background-color: #D54C39;"><font size="4"><font color="#586F49"><b>I WANT YOU...</b></font></font></div></blockquote></blockquote> <br><a href="http://hysteria.forums-actifs.net/postes-vacants-f3/heavy-things-2-3-t24.htm" class="postlink" target="_blank"><img src="http://img257.imageshack.us/img257/3598/101103103818253881.png" style="border:7px #EAE08D solid; -moz-border-radius:10px;" border="0" alt="" /></a> <a href="http://hysteria.forums-actifs.net/postes-vacants-des-membres-f69/one-is-mine-the-other-needs-some-love-feat-robert-pattinson-et-steven-strait-t63.htm" class="postlink" target="_blank"><img src="http://img715.imageshack.us/img715/4647/2vk0qc7.png" style="border:7px #EAE08D solid; -moz-border-radius:10px;" border="0" alt="" /></a> <a href="http://hysteria.forums-actifs.net/t25-silver-heart-hunter-1-3" class="postlink" target="_blank"><img src="http://img824.imageshack.us/img824/9578/101103093152775021.png" style="border:7px #EAE08D solid; -moz-border-radius:10px;" border="0" alt="" /></a> <br><br><a href="http://hysteria.forums-actifs.net/t21-black-soul-3-4" class="postlink" target="_blank"><img src="http://img842.imageshack.us/img842/9039/peter1b.jpg" style="border:7px #EAE08D solid; -moz-border-radius:10px;" border="0" alt="" /></a> <a href="http://hysteria.forums-actifs.net/t22-sweet-heart-2-3" class="postlink" target="_blank"><img src="http://img146.imageshack.us/img146/406/596650diannaic4.png" style="border:7px #EAE08D solid; -moz-border-radius:10px;" border="0" alt="" /></a> <a href="http://hysteria.forums-actifs.net/t21-black-soul-3-4" class="postlink" target="_blank"><img src="http://img43.imageshack.us/img43/43/24q7d7cjpg.png" style="border:7px #EAE08D solid; -moz-border-radius:10px;" border="0" alt="" /></a></center> </div><div class="contenu_onglet" id="contenu_onglet_onglet4"> Contenu de l'onglet</div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'onglet1'; change_onglet(anc_onglet); //--> </script> Et voici mon CSS : - Code:
-
.onglet { display:inline-block; margin-left:10px; margin-right:10px; padding:5px; border:5px #A81D0D ridge; -moz-border-radius : 6px 6px 6px 6px; cursor:pointer; } .onglet_0 { background:#576F42; border-bottom:5px #A81D0D ridge; } .onglet_1 { background:#576F42; border-bottom:5px #A81D0D ridge; padding-bottom:6px; } .contenu_onglet { background-color:#576F42; border:5px #A81D0D ridge; margin-top:-1px; padding:5px; display:none; } Merci d'avance, a celui qui pourra m'aidé ^^ | | |
| | | Contenu sponsorisé
| | | | | Créer une organisation par onglets (messages) | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|