Aller au contenu

Question, affichage par onglet

Yumi

Par Yumi
dans (X)HTML et CSS

 Partager

Sujets conseillés

Yumi

Yumi

Posté
Posté (modifié)

Bonsoir. Je voudrais que quelqu'un puisse m'aider a un sujet qui pourrait me faciliter vraiment un de mes problèmes. Voila, je voudrais savoir comment faire pour mettre ses catégories sous onglets comme ses images ci-dessous :

sans_t12.jpg

sans_t13.jpg

Je sais pas si vous avez compris mais si quelqu'un voit ce dont je veux parler, pourriez vous m'aider ? J'ai cherché un peu partout mais je ne trouve rien ... Merci d'avance en tout cas.

Modifié par Patrick
Modification du titre du topic
baulet

baulet

Posté
Posté

bonjour,

si j'ai bien compris, cela peut être un simple menu <ul> avec un display:inline; positionné en haut du premier "cadre"...

Yumi

Yumi

Posté
  • Auteur
Posté

Bonsoir, voila ce que je souhaite savoir comment faire cela :

sans_t14.jpg

Voici le lien du forum pour que vous comprenez ce que je souhaite -> Celui-ci

En faite, je voudrais pouvoir faire des onglets ou il y a des catégories de rubrique du forum comme celui-ci pour améliorer mon forum qui a pas mal de rubrique donc ça allégera beaucoup ainsi que ça m'aidera. Merci d'avance de m'aider et de me dire si vous pouvez m'aider a cela.

Valtiel

Valtiel

Posté
Posté

Salut,

Et bien comme l'a dit Baulet, tu pourras arriver à ce genre de résultat avec la balise <ul> et display: inline; qu'il te faudra ensuite peaufiner et placer. Il va te falloir mettre les mains dans le cambouis :)

yuston

yuston

Posté
Posté

C'est du phpBB hébergé gratuitement avec options payantes par Forumactif. Je ne sais pas si c'est possible de modifier les .tpl dans ce service.

Patrick

Patrick

Posté
Posté

Salut Yumi,

ce que tu cherches est un script intégré à Dreamweaver. Si tu as Dreamweaver, c'est tout automatisé, il suffit de sélectionner le menu Insertion > Spry > Panneau à onglet Spry.

Si tu n'as pas Dreamweaver il faudra tout coder ou alors utiliser une bibliothèque comme JQuery.

++

Patrick

Yumi

Yumi

Posté
  • Auteur
Posté (modifié)

Désolée du double poste

voici un lien avec les codes et tout le reste : http://css-actif.forumactif.net/structures-des-forums-f31/classer-les-categories-de-votre-forum-par-onglet-t5637.htm

Quelqu'un pourrait il m'aider a pouvoir faire ses onglets sur mon forum, ça serait très gentil car franchement je suis nulle niveau HTML et tout ça ^^'

Modifié par Patrick
Pas de soucis pour le post en double, ça arrive ;)
Patrick

Patrick

Posté
Posté

Salut,

Utilises-tu Dreamweaver pour faire/modifier ton site ?

Si c'est le cas, je veux bien t'aider pour intégrer le système à onglet Spry dont tu parles dans ton post du 24 juillet.

++

Patrick

Yumi

Yumi

Posté
  • Auteur
Posté

Euh alors la je ne sais pas, comme je le dis je suis nulle en codage et tout ça, un des moyens les plus simple serait que tu t'inscris sur mon forum pour pouvoir accéder au panneau d'admin et voir un peu tout cela sans rien modifier bien sur XD sinon après je ne sais pas comment faire ...

Patrick

Patrick

Posté
Posté

Re,

j'ai ma réponse ;) . Dreamweaver est un logiciel (comme Word) qui permet de développer un site internet. Je te parle de Dreamweaver car le script dont tu as donné le lien est utilisé par Dreamweaver.

Voilà :P

Maintenant, mon avis personnel, est que si tu ne connais vraiment rien, il va être compliqué de t'aider à distance comme ça. De plus je ne souhaite pas intervenir directement sur ton administration pour diverses raisons. Avec Dreamweaver je t'aurai aidé avec plaisir, mais là je passe mon tour.

Bon courage.

++

Patrick

Dadou

Dadou

Posté
Posté

Non, on est pas inscrit à ce forum, le problème n'est pas comment faire, mais comment tu peux modifier les sources d'un forum gratuit?

Yumi

Yumi

Posté
  • Auteur
Posté

Vous pouvez pas lire ? Le truc c'est qu'il ne faut pas s'incrire XD juste qu'ils fournissent le code et puis il suffit de remplacer et mettre des info a ce code

Dadou

Dadou

Posté
Posté

Non, on ne peut pas lire puisque l'on n'est pas inscrit à ce forum, mais cela ne change pas le problème, on ne peux modifier les sources d'un forum hebergé

Yumi

Yumi

Posté
  • Auteur
Posté

Okay alors je vais vous mettre ce qu'ils disent :

Vous croyiez peut-être que ce tutoriel est long mais rassurez-vous, le plus long est le CSS et non pas la partie template puisque vous avez juste à cliquer deux, trois fois sur un bouton OK Nous allons faire a peu près ceci :

onglet10.png

Mettez cette configuration sur votre forum : (PA Affichage Structure et hiérarchie){ Ce qui est fait pour mon cas pour mon forum }

Ensuite, rendez-vous sur le Générateur d'Onglets. Lorsque vous avez insérer tous les noms de vos onglets, il vous suffit de cliquer sur Annuler. Ensuite, vous prenez TOUT le code et ce sera votre nouveau template index_box N'oubliez pas de le Publier ;D

Nous avons terminé la partie HTML Pas très long, ehin ?

Passons, au CSS qui lui va être légèrement plus compliqué.

Voici le code tout prêt, tout frais avec quelques modifications que vous devrez y apporter

.text {

color:#FFFFFF; /*Couleur du texte de vos onglets*/

cursor:pointer;

}

#cat_nomonglet1,#cat_nomonglet2,#cat_nomonglet3,#cat_nomonglet4,#cat_nomonglet5 /*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;

margin-top:30px;

text-decoration:none; !important

cursor:pointer;

}

.onglet li {

float:left;

list-style-type:none;

margin-bottom:-22px;

text-decoration:none; !important

cursor:pointer;

}

.onglet li:hover {

text-decoration:none; !important

cursor:pointer;

}

.onglet li a {

display:block;

text-decoration:none; !important

list-style-type: none;

cursor:pointer;

}

.onglet li a: hover {

text-decoration:none;

list-style-type:none;

cursor:pointer;

}

.onglet_actif {

background: url('URL_ONGLET_ACTIF') no-repeat; /*URL de l'onglet étant actif*/

width:LARGEURpx; /*Largeur de l'onglet étant actif*/

height:HAUTEURpx; /*Hauteur de l'onglet étant actif*/

cursor:pointer;

}

.onglet_nactif {

background:url('URL_ONGLET_INACTIF') no-repeat; /*URL de l'onglet étant inactif*/

width:LARGEURpx; /*Largeur de l'onglet étant inactif*/

height:HAUTEURpx; /*Hauteur de l'onglet étant inactif*/

cursor:pointer;

}

Ce qui est en vert est à modifier par dessus tout

Le reste, c'est facultatif

Si vous souhaitez une couleur unie en fond de vos onglets remplacez :

background:url('URL_ONGLET') no-repeat;

Par :

background-color : #FF0000;

Voilà! Normalement, vous devez arrivez au Résultat souhaité.

C'est long je sais et normalement on doit obtenir un résultat comme ce forum : http://rock-werchter.1fr1.net/index.htm

Mon forum est de Forumactif voila, j'espère que quelqu'un pourra m'aider ><

yuston

yuston

Posté
Posté

Le problème, vois-tu, c'est comme tu l'as dit, ton forum est hébergé par Forumactif. Et normalement, tu n'as pas les accès pour modifier les design, les CSS, les fichiers HTML, et PHP de ton forum. C'est peut-être proposé en option payante. Or pour intégrer un système d'onglets, il est absolument nécessaire de pouvoir modifier le HTML et le CSS (comme le dit le tuto).

Donc on ne peut pas vraiment t'aider. Par contre, si tu nous dis qu'il est possible de modifier les fichiers HTML/CSS, là, on va pouvoir t'aider un peu plus.

Yumi

Yumi

Posté
  • Auteur
Posté

Ben si normalement je peux modifier le code CSS, je peux rajouter des pages HTML et modifier des templates alors je ne vois pas pourquoi des forums de forumactifs sont parvenus a faire des onglets, c'est gratuit faut juste mettre les codes que je vous ai montré dans le topic précédent en remplaçant ce qu'ils demandent de remplacer

Dadou

Dadou

Posté
Posté

Alors tu as juste à suivre ce qui est indiqué, tu as tout ce qu'il faut pour y arriver.

Yumi

Yumi

Posté
  • Auteur
Posté

J'ai suivi mais je n'y parviens pas au résultat, pas grave je vais essayer de leur demander conseil ça va etre plus simple

Yumi

Yumi

Posté
  • Auteur
Posté

Bonjour, quelqu'un pourrait m'aider car personne n'est la pour règler mon problème. Voila mon CSS et le Template, j'ai suivi ce qu'il demandait mais rien ne s'affiche sur mon forum test qui normalement devrait avoir des onglets.

template :

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

var i = 0;

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


<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">Votre 1ère catégorie</li>
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">RPG</li>

</ul>
</div>
');

var compteur_cat = 0;

var anc_cat = 0;

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


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="cat_forum" id="' + nom_cat[compteur_cat] + '" >');
}
else{
 document.write('<table class="cat_forum" 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="50">{L_TOPICS}</th>
<th nowrap="nowrap" width="50">{L_POSTS}</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">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
</span>
</h{catrow.forumrow.LEVEL}>
<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" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.TOPICS}</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.POSTS}</span>
</td>
<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 -->

CSS :

/********onglets***************/

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

#cat_Votre 1ère catégorie,#cat_RPG, /*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;
margin-top:30px;
text-decoration:none; !important
cursor:pointer;
}

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

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

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

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

.onglet_actif {
background: url('http://hitskin.com/themes/13/82/71/i_background.gif') no-repeat; /*URL de l'onglet étant actif*/
width:150px; /*Largeur de l'onglet étant actif*/
height:50px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
}

.onglet_nactif {
background:url('http://hitskin.com/themes/13/82/71/i_background.gif') no-repeat; /*URL de l'onglet étant inactif*/
width:150px; /*Largeur de l'onglet étant inactif*/
height:50px; /*Hauteur de l'onglet étant inactif*/
cursor:pointer;
}

Voici le forum test, si quelqu'un pourrait m'aider ça serait très gentil de sa part : http://test-powaa.forumactif.com/index.htm

Dadou

Dadou

Posté
Posté

Si tu ne fais pas l'effort de lire un minimum le code qui était dans le tuto, tu ne vas pas aller loin, tu passes à coter d'infos comme :

#cat_Votre 1ère catégorie,#cat_RPG, /*nomonglet... à remplacer par le nom des onglets*/ {

Yumi

Yumi

Posté
  • Auteur
Posté (modifié)

Et alors c'est remplacé. C'est moi qui est mis 1ère catégorie et RPG

Modifié par Yumi

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...