|
|
| Auteur | Message |
|---|
 | Sujet: Re: Aide en codage. Ven 16 Déc - 9:21 | |
| Hello  On y va donc ^^ Dans le css on va donc indiquer pour les onglets -> alignés à gauche | Code: | ul.conteneur_onglets{ margin:0; padding:0; float:left; } |
Que chaque onglet | Code: | ul.conteneur_onglets li.onglet{ |
-> a un fond de couleur unie
| Code: | background-color:#code_couleur; |
-> Angle arrondi en haut à gauche
| Code: | -webkit-border-top-left-radius: 12px; -moz-border-radius-topleft: 12px; border-top-left-radius: 12px; |
-> Angle arrondi en bas à droite
| Code: | -webkit-border-bottom-right-radius: 12px; -moz-border-radius-bottomright: 12px; border-bottom-right-radius: 12px;
|
-> A une largeur minimum fixe et une hauteur fixe
| Code: | min-width:140px; width:auto; height:20px; |
-> a des bordures
| Code: | border-top:solid 2px black; border-left:solid 2px black; border-right:solid 2px black; |
Ce qui nous donne par exemple :
| Code: | ul.conteneur_onglets li.onglet{ display:inline-block; padding:5px; /* Espace entre le bord de l'onglet et le texte */ margin-left:4px; /* Espace entre chaque onglet */ margin-bottom:0 !important; min-width:140px; width:auto; height:20px; background-color:#e26e26; border-top:solid 2px black; border-left:solid 2px black; border-right:solid 2px black; -webkit-border-top-left-radius: 12px; -webkit-border-bottom-right-radius: 12px; -moz-border-radius-topleft: 12px; -moz-border-radius-bottomright: 12px; border-top-left-radius: 12px; border-bottom-right-radius: 12px; } |
###########
Et ensuite, on travaille le rendu quand ils sont survolés
| Code: | ul.conteneur_onglets li.onglet:hover{ |
pour que le texte se "dédouble" (bref, on ajoute une ombre)
| Code: | text-shadow: Xpx Ypx Zpx #code_couleur; |
X = décalage de l'ombre sur l'axe horizontal Y = décalage de l'ombre sur l'axe vertical Z = flou de l'ombre
ce qui donne par exemple pour cette partie
| Code: | ul.conteneur_onglets li.onglet:hover{ text-shadow: 1px 1px 4px #666666; } |
##########
Et donc au final, le code CSS ressemble à ça
| Code: | ul.conteneur_onglets{ margin:0; padding:0; float:left; }
ul.conteneur_onglets li.onglet{ display:inline-block; padding:5px; /* Espace entre le bord de l'onglet et le texte */ margin-left:4px; /* Espace entre chaque onglet */ margin-bottom:0 !important; min-width:140px; width:auto; height:20px; background-color:#e26e26; border-top:solid 2px black; border-left:solid 2px black; border-right:solid 2px black; -webkit-border-top-left-radius: 12px; -webkit-border-bottom-right-radius: 12px; -moz-border-radius-topleft: 12px; -moz-border-radius-bottomright: 12px; border-top-left-radius: 12px; border-bottom-right-radius: 12px; }
ul.conteneur_onglets li.onglet:hover{ text-shadow: 1px 1px 4px #666666; } |
|
|
 | |
 | |
 | |
 | |
 | |
 | Sujet: Re: Aide en codage. Sam 17 Déc - 22:33 | |
| Flûte il me semblait que je l'avait déjà fait ^^'   Et voici le template complet au cas ou .. ^^' | 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> <!-- DEBUT MODIF ONGLETS --> <script type="text/javascript"> <!-- document.write('<div align="center" style="display:none;" id="conteneur_barre_onglet"> <ul class="conteneur_onglets"> <li onClick="change_cat(1)" class="onglet actif" id="onglet_1"> *Staff* </li> <li onClick="change_cat(2)" class="onglet " id="onglet_2"> Avant d'accoster sur les continents </li> <li onClick="change_cat(3)" class="onglet " id="onglet_3"> Bienvenue Sur Enkidiev </li> <li onClick="change_cat(4)" class="onglet " id="onglet_4"> Premiers pas sur Irianeth ... </li> <li onClick="change_cat(5)" class="onglet " id="onglet_5"> La salle de détente </li> </ul></div>'); var compteur_cat = 1; function change_cat(numero) { if(document.getElementById('categorie_'+numero)) { /* affichage de la bonne categorie */ $('table[id^=categorie_]').css('display','none'); $('table[id=categorie_'+numero+']').fadeIn(); /* affichage du bon onglet */ $('.actif').removeClass("actif"); $('.onglet[id=onglet_'+numero+']').addClass("actif"); } } function capture_cat() { if(compteur_cat == 1) { document.write('<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="categorie_' + compteur_cat + '" >'); } else { $('#conteneur_barre_onglet').css("display","block"); document.write('<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="categorie_' + compteur_cat + '" style="display:none;">'); } compteur_cat++; } //--> </script> <!-- BEGIN catrow --><!-- BEGIN tablehead --> <script type="text/javascript"> <!-- capture_cat(); //--> </script> <!-- FIN MODIF ONGLETS -->
<tr> <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th> </tr> <!-- END tablehead --> <!-- BEGIN cathead --> <tr> <!-- BEGIN inc --> <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%"> <h{catrow.cathead.LEVEL} class="hierarchy"> <span class="cattitle"> <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a> </span> </h{catrow.cathead.LEVEL}> </td> <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td> </tr> <!-- END cathead --> <!-- BEGIN forumrow --> <tr> <!-- BEGIN inc --> <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td> <!-- END inc --> <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </td> <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> <h{catrow.forumrow.LEVEL} class="hierarchy"> <span class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br /> </span> </h{catrow.forumrow.LEVEL}> <div class="desc_forum">{catrow.forumrow.FORUM_DESC}</div><div class="stats">{catrow.forumrow.TOPICS} sujets & {catrow.forumrow.POSTS} messages<br />{catrow.forumrow.LAST_POST}</div> <span class="gensmall"> <!-- BEGIN switch_moderators_links --> {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} <!-- END switch_moderators_links --> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} </span> </td> </tr> <!-- END forumrow --> <!-- BEGIN catfoot --> <tr> <!-- BEGIN inc --> <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td> </tr> <!-- END catfoot --> <!-- BEGIN tablefoot --> </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --> |
|
|
 | |
 | Sujet: Re: Aide en codage. Lun 19 Déc - 12:51 | |
| Coucou  En fait, pour que ça fonctionne, il faut que ton forum ait exactement les memes catégories que ton forum. Sinon, le code ne sait pas quel onglet correspond à tel catégorie  |
|
 | |
 | Sujet: Re: Aide en codage. Lun 19 Déc - 13:03 | |
| Tu parle des noms des catégories ? C'est le cas j'ai fait du copier/coller j'ai fait correspondre les numéros à la place de la catégorie (savais pas si c'était utile mais bon xD) du coup je vois pas trop ce qui bug =/ |
|
 | |
 | |
 | |
 | |
 | |
 | Sujet: Re: Aide en codage. Lun 19 Déc - 14:11 | |
| Tu avais essayer de le mettre et de valider le template toussa ? Parce que le code est bon, ça devrait marcher (pas en prévisualisation par contre) |
|
 | |
 | Sujet: Re: Aide en codage. Lun 19 Déc - 14:30 | |
| Oui les impr écran que je t'ai mit ont été fait quand je l'ai mit en place é_è Edit' J'ai réussi, en faite ça venait des noms en mettant exactement les même ça plante mais en modifiant ça fonctionne, je comprend pas pourquoi mais bon au moins ça marche °°' |
|
 | |
 | |
 | |
 | |
 | |
 | |
 | |
|