Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Problème avec les onglets

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

Résolu Problème avec les onglets

Message par Shika85 le Lun 6 Déc 2010 - 19:41

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 ) .


Dernière édition par Shika85 le Mer 8 Déc 2010 - 19:01, édité 1 fois
avatar

Shika85
***

Masculin
Messages : 107
Inscrit(e) le : 01/08/2010

http://op-hansen.forumactif.com/
Shika85 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les onglets

Message par Invité le Lun 6 Déc 2010 - 20:25

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 Wink
avatar

Invité
Invité


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

Résolu Re: Problème avec les onglets

Message par Shika85 le Lun 6 Déc 2010 - 20:45

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
avatar

Shika85
***

Masculin
Messages : 107
Inscrit(e) le : 01/08/2010

http://op-hansen.forumactif.com/
Shika85 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les onglets

Message par Invité le Mar 7 Déc 2010 - 20:52

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 Confused 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 Wink
avatar

Invité
Invité


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

Résolu Re: Problème avec les onglets

Message par Shika85 le Mer 8 Déc 2010 - 19:01

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

Shika85
***

Masculin
Messages : 107
Inscrit(e) le : 01/08/2010

http://op-hansen.forumactif.com/
Shika85 a été remercié(e) par l'auteur de ce sujet.

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