Apparence des onglets

Page 2 sur 2 Précédent  1, 2

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Apparence des onglets

Message par Enigmatic le Mar 18 Oct 2011 - 21:43

Rappel du premier message :

Bonjour! J'ai finalement réussi a faire mes onglets ( j'avais ouvert un sujet, il y a quelques temps ) et maintenant, j'aimerais simplement qu'on m'aide pour l'apparence. Voici mon forum www Comme vous le voyez, les liens d'onglets sont un à la suite de l'autre, etc. J'aimerais qu'ils soit un à côté de l'autre et de la même écriture que mon forum ( ainsi qu'avec une écriture plus petite que celle-ci ) Sinon, est-ce possible de donné au onglet les mêmes effets que mes titres de forum ? Lorsqu'on passe le curseur sur un sujet : exemple : Charte de Tears of Enkidiev, il y a une petite « animation »

Voici mon index_box
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<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}

{CURRENT_TIME}

</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>

<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

<!-- 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">Accueil & Administration</li>
<li onClick="change_cat(2)" class="onglet " id="onglet_2">Salon privé</li>
<li onClick="change_cat(3)" class="onglet " id="onglet_3">Les terres Enkidiev</li>
<li onClick="change_cat(4)" class="onglet " id="onglet_4">Les terres Obsidienne</li>
<li onClick="change_cat(5)" class="onglet " id="onglet_5">Les Îles</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" id="categorie_' + compteur_cat + '" >');
   }
   else
   {
      $('#conteneur_barre_onglet').css("display","block");
      document.write('</table><table class="forumline" 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>

<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></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">
        <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
                    <span class="forumlink">
                      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
       
                    </span>
                </h{catrow.forumrow.LEVEL}></td></tr></tbody></table>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<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>
<!-- BEGIN forum_link_no -->
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>
<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</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 -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


Et ma CSS
Code:
 /*bannière du forum diminution des marges haut gauche et droite*/
    #i_logo {
    margin-left:-10px;
    margin-right:-10px;
    margin-top:-10px; }




/*liens*/
a { text-decoration: none;/*supprime le soulignement*/ }
a:hover { text-decoration: none !important;/*supprime le soulignement*/ }

 


/*contour du forum et ombre*/
.bodyline{


-moz-box-shadow: 0px 0px 10px #000000;
  box-shadow: 0px 0px 10px #000000;
-webkit-box-shadow: 0px 0px 10px #000000;
}




/*boite des categorie*/
   


 /*image interieur du forum*/
.bodyline {
background-image: url(http://img200.imageshack.us/img200/8019/fondyc10.jpg);
background-repeat: repeat;






 /*qui est en ligne*/
    .groupes{
    background-color:#FFFFFF;border: 1px #D0D0D0 dotted;
    -moz-border-radius : 5px 5px 5px 5px;
    height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
    font-size:15px;font-weight: bold;text-align:center;
    text-decoration: none !important;}




    .opac {
    opacity:0.6;
    -moz-opacity:0.6;
    -ms-filter:"alpha(opacity=60)";
    filter:alpha(opacity=60);
    }

    .opac:hover {
      opacity:1;
      -moz-opacity:1;
      -ms-filter:"alpha(opacity=100)";
      filter:alpha(opacity=100);
    }




/*cadre avatar*/
.postdetails.poster-profile img {border:4px solid white;}

     
 
            .profil
                {background-color: #5B4419;
                border: 2px solid #5B4419;
                }






a:hover { letter-spacing: 2px; }

a:hover {
font-variant : small-caps;
}

a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}



a
{
font-variant: small-caps;
text-decoration: none;
}



a.forumlink
{
display: block;
padding-left: 20px;
font-size: 16px;
font-family: Georgia;
letter-spacing: 2px;
border-bottom: 4px solid #F4F5EB;
border-left: 4px solid #F4F5EB;
border-radius: 20px;
-moz-border-radius: 20px;
-htm-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
color: #D8DBAD !important;
text-shadow: 0px 0px 1px #D8DBAD;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
a.forumlink:hover
{
padding-left: 50px;
text-transform: uppercase;
border-bottom: 4px solid #D8DBAD;
border-left: 4px solid #D8DBAD;
color: #756422 !important;
text-shadow: 0px 0px 1px #000000;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.forumline
{
width: 95%;
margin: auto;
background-color: #F4F5EB;
border-top: 3px solid #D8DBAD;
border-bottom: 3px solid #D8DBAD;
padding: 4px;
}
#cate_foot
{
width: 950px;
height: 95px;
margin: auto;
background: url(http://img11.hostingpics.net/pics/139213category04.jpg) center no-repeat;
}


Merci!


Dernière édition par Enigmatic le Jeu 20 Oct 2011 - 0:48, édité 1 fois

Enigmatic
***

Féminin
Messages : 199
Inscrit(e) le : 16/11/2009

Enigmatic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des onglets

Message par Enigmatic le Mer 19 Oct 2011 - 19:59

Non, toujours pas ! Vous pouvez aller voir, quand on passe le curseur dessus... ça fait quelque chose d'étrange! :s

Enigmatic
***

Féminin
Messages : 199
Inscrit(e) le : 16/11/2009

Enigmatic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des onglets

Message par SoraNoHime le Mer 19 Oct 2011 - 20:04

Code:
*bannière du forum diminution des marges haut gauche et droite*/
            #i_logo {
            margin-left:-10px;
            margin-right:-10px;
            margin-top:-10px; }
                 
        /*liens*/
        a { text-decoration: none;/*supprime le soulignement*/ }
        a:hover { text-decoration: none !important;/*supprime le soulignement*/ }

       
        /*contour du forum et ombre*/
        .bodyline{       
        -moz-box-shadow: 0px 0px 10px #000000;
          box-shadow: 0px 0px 10px #000000;
        -webkit-box-shadow: 0px 0px 10px #000000;
        }
       
        /*boite des categorie*/
       
        /*image interieur du forum*/
        .bodyline {
        background-image: url(http://img200.imageshack.us/img200/8019/fondyc10.jpg);
        background-repeat: repeat;
        }
       
       
        /*qui est en ligne*/
            .groupes{
            background-color:#FFFFFF;border: 1px #D0D0D0 dotted;
            -moz-border-radius : 5px 5px 5px 5px;
            height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
            font-size:15px;font-weight: bold;text-align:center;
            text-decoration: none !important;}
               
            .opac {
            opacity:0.6;
            -moz-opacity:0.6;
            -ms-filter:"alpha(opacity=60)";
            filter:alpha(opacity=60);
            }
       
            .opac:hover {
              opacity:1;
              -moz-opacity:1;
              -ms-filter:"alpha(opacity=100)";
              filter:alpha(opacity=100);
            }

       
        /*cadre avatar*/
        .postdetails.poster-profile img {border:4px solid white;}
       
           
       
                    .profil
                        {background-color: #5B4419;
                        border: 2px solid #5B4419;
                        }
       
       
        a:hover { letter-spacing: 2px; }
       
        a:hover {
        font-variant : small-caps;
        }
       
        a:link {text-decoration: none;}
        a:hover{text-decoration: none !important;}
       

        a
        {
        font-variant: small-caps;
        text-decoration: none;
        }
       
       
        a.forumlink
        {
        display: block;
        padding-left: 20px;
        font-size: 16px;
        font-family: Georgia;
        letter-spacing: 2px;
        border-bottom: 4px solid #F4F5EB;
        border-left: 4px solid #F4F5EB;
        border-radius: 20px;
        -moz-border-radius: 20px;
        -htm-border-radius: 20px;
        -webkit-border-radius: 20px;
        -o-border-radius: 20px;
        color: #D8DBAD !important;
        text-shadow: 0px 0px 1px #D8DBAD;
        transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        a.forumlink:hover
        {
        padding-left: 50px;
        text-transform: uppercase;
        border-bottom: 4px solid #D8DBAD;
        border-left: 4px solid #D8DBAD;
        color: #756422 !important;
        text-shadow: 0px 0px 1px #000000;
        transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .forumline
        {
        width: 95%;
        margin: auto;
        background-color: #F4F5EB;
        border-top: 3px solid #D8DBAD;
        border-bottom: 3px solid #D8DBAD;
        padding: 4px;
        }
        #cate_foot
        {
        width: 950px;
        height: 95px;
        margin: auto;
        background: url(http://img11.hostingpics.net/pics/139213category04.jpg) center no-repeat;
        }
       
       
        .onglet {
        display:inline-block;
        margin:20px 5px;
        }
        .onglet:hover {
        padding-left: 20px;
        font-size: 16px;
        font-family: Georgia;
        letter-spacing: 2px;
        border-bottom: 4px solid #F4F5EB;
        border-left: 4px solid #F4F5EB;
        border-radius: 20px;
        -moz-border-radius: 20px;
        -htm-border-radius: 20px;
        -webkit-border-radius: 20px;
        -o-border-radius: 20px;
        color: #D8DBAD !important;
        text-shadow: 0px 0px 1px #D8DBAD;
        transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .actif {
        display:inline-block;
        margin:20px 5px;
        }

une fois réparée Wink

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des onglets

Message par Enigmatic le Mer 19 Oct 2011 - 20:26

OMG! Ça fonctionne O_o
Merci pour ta patience Macema <3

Enigmatic
***

Féminin
Messages : 199
Inscrit(e) le : 16/11/2009

Enigmatic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des onglets

Message par SoraNoHime le Mer 19 Oct 2011 - 20:56

Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des onglets

Message par Enigmatic le Jeu 20 Oct 2011 - 0:39

Je n'ai rien dis ! ^^ Merci !

Enigmatic
***

Féminin
Messages : 199
Inscrit(e) le : 16/11/2009

Enigmatic a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 2 Précédent  1, 2

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum