Problème avec les onglets

[Shika85]

Bonsoirs,

J'ai utiliser le tuto des onglet pour les catégories et j'arrive à ça observez par vous même je voudrais savoir ce qui ne va pas merci d'avance !

l'adresse du forum : http://narutoshinobidestiny.forumactif.org/forum.htm

Ps :Je voulais savoir aussi de quoi vous auriez besoin pour régler le problème ( CSS ou Templates ) .

[Invité]

Bonjour,

On ne peut pas vraiment t'aider si on ne sais pas à quel résultat tu veux arriver.
Il serait également bien de fournir le template concerné && le CSS

[Shika85]

Le CSS(entier) :

Code:

a.forumlink{
background-color: #8dbcdd;
border-bottom: 5px double #175a8e;
color:8ab8d9;
font-family: sans-serif;
font-size: 12px;
font-weight: lighter;
letter-spacing: 1px;
display:block;
text-align: center;
}

.quote
{
background-color: #6595c5;
background-repeat: repeat-y;
background-position: top center;
}

.spoiler
{
background-color: #6595c5;
background-repeat: repeat-y;
background-position: top center;
}

.code
{
background-color: #6595c5;
background-repeat: repeat-y;
background-position: top center;
}

background-color: #8dbcdd;
a.forumlink:hover{
font-family: georgia;
font-size: 12px;
font-weight: lighter;
letter-spacing: 1px;
text-align: center;}

body
{
background-color: #8dbcdd;
background-repeat: repeat-y;
background-position: top center;
}

.bodylinewidth
{
width: 900px;
}

a
{
outiline: none;
}

#i_logo
{
margin-top: -18px;
margin-bottom: -115px;
}

.mainmenu
{
margin-right: -5px;
}

a.mainmenu
{
color: #5e90c1;
}

a.mainmenu:hover
{
text-decoration: none !important;
color: #e9f4e8;
}

#page-body
{
width: 893px;
background-image: url(http://host.image.files.free.fr/host/4c4c6ff952740skin_04.png);
background-repeat: repeat-y;
margin-top: 80px;
padding-bottom: 30px;
}

.forumline
{
max-width: 850px;
margin: auto;
background-color: #175a8e;
border-radius: 10px;
-moz-border-radius: 10px;
border: 1px solid #144b74;
padding: 4px;
}

table
{
max-width: 850px;
margin: auto;
}

.cattitle
{
display: block;
font-variant: small-caps;
text-align: center;
}

th
{
text-align: left;
font-variant: small-caps;
}

#page-footer
{
background-image: url(http://s2.noelshack.com/old/up/foot2-d972a26b42.jpg);
background-repeat: no-repeat;
width: 978px;
height: 200px;
margin-bottom: -18px;
}

#page-footer a
{
font-size: 10px;
}


.cat_forum {
-moz-border-radius: 10px;
border: 4px ridge #043152;
background-color: #043152;
margin: auto;
margin-bottom:30px;
}

.onglet {
display:inline-block;
height:22px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:8px auto auto;
margin-top:30px;

}

.onglet li {
float:left;     
list-style-type:none;
}


.onglet li a {
display:block;
text-decoration:none;
margin-left:5px;
}



.onglet li a:hover {
background-image: url (http://img4.hostingpics.net/pics/582179trucjpg.jpg);
}



.onglet_actif {
background-image: url (http://img4.hostingpics.net/pics/582179trucjpg.jpg);
}


/*ici, mettez tout vos NOM DE CATEGORIE sauf un : il sera afficher en premier */
 {#Gestion du Personnage, #Le Monde Shinobi, #Hors Rp, #Discussion Admin et Modo
display : none;
}

Le template :

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}

{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">
<!--

var i = 0;

document.write('<div align="center">
<ul class="onglet">

 
<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">Avant le Rp</li>
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Gestion du Personnage</li>
<li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">Le Monde Shinobi</li>
<li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">Hors Rp</li>
<li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">Discussion Admin et Modo</li>



</ul>
</div>
');

var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3','4');

 
function change_cat(numero)
{
 document.getElementById(nom_cat[anc_cat]).style.display = 'none';
 document.getElementById(nom_cat[numero]).style.display = 'block';
 document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
 document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
 anc_cat = numero;
}

function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class="forumline" id="' + nom_cat[compteur_cat] + '" >');
}
else{
 document.write('<table class="forumline" id="' + nom_cat[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">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
 <table width="100%"><tr><td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></td><td align="right"><span class="gensmall">{catrow.forumrow.TOPICS} <b> Rouleaux</b> | {catrow.forumrow.POSTS} <b> Parchemins</b> </span></td></tr></table>
</span>
</h{catrow.forumrow.LEVEL}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<center><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}</center>
</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 -->

Enfaite je voudrais pour l'instant de simple onglet svp merci

[Invité]

Salut,

Voilà, alors j'ai complètement changer ta partie CSS qui concerne les onglets && j'ai pris celle que moi j'avais quand j'avais des onglets. Voilà ce que ça donne :

Code:

.text {
color:#FFFFFF; /*Couleur du texte de vos onglets*/
cursor:pointer;
}

#cat_Avant le RP,#Gestion du Personnage,#Le Monde Shinobi,#cat_Hors Rp,#cat_Discussion Admin et Modo /*nomonglet... à remplacer par le nom des onglets*/ {
padding-top:4px;
}

.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }

.cat_forum {
background-color: #000000;
margin: auto;
margin-bottom:30px;
width:800px;
}

.onglet {
display:inline-block;
text-decoration:none;
margin-top:30px;
cursor:pointer;
}

.onglet li {
float:left;
list-style-type:none;
text-decoration:none;
margin-bottom:-22px;
cursor:pointer;
}

.onglet li:hover {
text-decoration:none;
cursor:pointer;
}

.onglet li a {
display:block;
text-decoration:none;
list-style-type: none;
cursor:pointer;
}

.onglet li a: hover {
list-style-type:none;
text-decoration:none;
cursor:pointer;
}

.onglet_actif
{background-color : #FF0000;  /* Couleur du fond de l'onglet*/
width: 100px; /* Largeur de l'onglet */
height: 60px; /* Hauteur de l'onglet */
cursor: pointer;
cursor:crosshair;
text-align : center;
color: #ffffff; /* Couleur du texte*/
padding: 5px; /* Sans le padding les onglets sont les uns sur les autres :S */
margin: 5px;  /* Espace entre les onglets. Si pas de margin les onglets sont collés les uns aux autres pour faire une barre*/
}

.onglet_nactif
{background-color : #FF0000;  /* Couleur du fond de l'onglet*/
width: 100px; /* Largeur de l'onglet */
height: 60px; /* Hauteur de l'onglet */
cursor: pointer;
text-align : center;
color: #000000;  /* Couleur du texte*/
padding: 5px; /* Sans le padding les onglets sont les uns sur les autres :S */
margin: 5px;  /* Espace entre les onglets. Si pas de margin les onglets sont collés les uns aux autres pour faire une barre*/
}

Par contre je n'arrive pas à modifier la taille du texte alors ça donne de gros onglets je trouve Pour le moment ça donne de simples onglets. Si tu veux ajouter des images à la place de la couleur en fond il suffit de remplacer .onglet_actif & .onglet_nactif par ça :

Code:

.onglet_actif
{background: url('URL_ONGLET_ACTIF') no-repeat;  /* Image de fond */
width: 100px; /* Largeur de l'onglet */
height: 60px; /* Hauteur de l'onglet */
cursor: pointer;
cursor:crosshair;
text-align : center;
color: #ffffff; /* Couleur du texte*/
padding: 5px; /* Sans le padding les onglets sont les uns sur les autres :S */
margin: 5px;  /* Espace entre les onglets. Si pas de margin les onglets sont collés les uns aux autres pour faire une barre*/
}

.onglet_nactif
{background: url('URL_ONGLET_ACTIF') no-repeat;  /* Image de fond*/
width: 100px; /* Largeur de l'onglet */
height: 60px; /* Hauteur de l'onglet */
cursor: pointer;
text-align : center;
color: #000000;  /* Couleur du texte*/
padding: 5px; /* Sans le padding les onglets sont les uns sur les autres :S */
margin: 5px;  /* Espace entre les onglets. Si pas de margin les onglets sont collés les uns aux autres pour faire une barre*/
}

&& Pour finir, si tu veux que tes onglets soient collés à l'en-tête de tes catégories ne touche pas le template sinon ajoute juste la balise :

Code:

<br>

Juste devant :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

Ca permet de faire un saut à la ligne && comme ça de créer un espace

[Shika85]

Merci sa marche très bien je vais changer tout le reste t'inquiète pas merci de ton aide !