Bonjour !!
Je viens à vous, chers amis codeurs, car cela fait bientôt trois heures que je me prends la tête sur l'installation d'un code pourtant simple.
Ce dernier en libre service est ici :
https://www.never-utopia.com/t46680-css-et-template-simples-categories
J'ai revérifié une dizaine de fois. J'ai bien séparé les catégories sur l'index au niveau moyen, j'ai bien affiché le titre du sujet du dernier message d'un forum sur l'index et j'ai bien un lien vers les niveaux inférieurs. J'ai fait exactement ce qu'il était indiqué dans le tuto... Sur ma page principale du fofo, aucun soucis, comme vous pouvez le voir ici :
http://valarmorghulis.forumpro.fr/
En revanche, si je rentre dans un forum, l'affichage des sous-forums n'est pas correct :
http://valarmorghulis.forumpro.fr/f1-reglement-et-histoire-des-royaumes
La police n'est pas la bonne, l'affichage pas exactement non plus !! Je ne parviens vraiment pas à trouver d'où ça vient.... J'ai bien entouré mes titres de catégorie, forums et sous-forums avec des balises span.
Je vous colle tout mon CSS :
- CSS:
- /*DÉBUT DES CATÉGORIES*/
/*Corps de Catégorie*/
.global_cate {
background-color: #1B1B1F;
border: solid 1px #960505;
border-bottom: double 8px #960505;
border-top: none;
}
/*Titre de la Catégorie*/
.title_cate span {
display: block;
margin-top: -10px;
padding-left: 40px;
background-color: #1B1B1F;
font-size: 30px;
font-family: parisienne
color: #E01B1B;
border-bottom: double 8px #000000;
transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
-webkit-transition: 0.8s;
}
/*Corps de Forum*/
.global_forum {
margin-top: 15px;
margin-bottom: 15px;
padding-right: 20px;
padding-left: 20px;
font-family: Verdana;
color: #767676;
}
/*Sous-forums*/
.gensous_forums {
position: relative;
left: -5px;
top: -32px;
overflow: auto;
z-index: 1;
padding: 5px;
background-color: #141517;
width: 95px;
height: 110px;
border: solid 1px #700707;
border-bottom: solid 5px #700707;
border-top: solid 5px #700707;
box-shadow: 0px 0px 15px 3px #700707;
text-align: center;
}
/*Bloc de la description du forum*/
.gendesc_forum {
background-color: #000000;
padding-right: 40px;
height: 105px;
border: solid 1px #730505;
border-left: solid 5px #730505;
border-right: solid 5px #730505;
}
/*Description du forum*/
.desc_forum {
position: relative;
top: 15px;
right: -30px;
height: 85px;
overflow: auto;
padding-left: 110px;
padding-right: 10px;
text-align: justify;
font-family: Verdana;
font-size: 13px;
}
/*Titre de forum*/
.forumlink {
display: block;
margin-top: -212px;
margin-bottom: -17px;
padding-left: 50px;
text-align: center;
font-family: parisienne
font-size: 28px;
color: #FFFFFF;
letter-spacing: 2px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
/*Image New-Old_Lock*/
.genicone_forum {
position: relative;
width: 50px;
height: 40px;
top: -178px;
right: -13px;
z-index: 1;
}
/*Bloc du Dernier Message*/
.stats_forum {
padding: 5px;
padding-top: 10px;
border: solid 1px #700707;
border-bottom: solid 5px #700707;
border-top: solid 5px #700707;
background-color: #141517;
width: 126px;
height: 80px;
font-family: Times New Roman;
font-size: 13px;
}
/*Nb de Topics et Messages*/
.stat_forum {
font-family: Times New Roman;
font-size: 11px;
}
/*FIN DES CATÉGORIES*/
/*--------------------------------- DEBUT PROFIL --------------------------------- */
.profil_mess
{
position: relative;
z-index: 9;
width: 210px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-color: #333333;
padding: 4px;
text-align: center;
border-radius: 10px;
-moz-border-radius: 10px;
-htm-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #5b5b5b;
box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
-htm-box-shadow: 0px 0px 5px #000000;
-o-box-shadow: 0px 0px 5px #000000;
-webkit-box-shadow: 0px 0px 5px #000000;
}
.name
{
display: block;
text-transform: uppercase;
margin-top: -15px;
margin-bottom: -10px;
font-size: 14px;
font-family: arial black;
text-shadow: 1px 1px 0px #000000;
padding-bottom: 5px;
border-bottom: 1px dashed #5b5b5b;
}
.avatar_mess
{
display: block;
width: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
height: 320px;
overflow: hidden;
border: 5px solid #0d0d0d;
opacity: 0.7;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.avatar_mess:hover
{
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil2_mess
{
position: relative;
z-index: 1;
width: 180px;
margin-left: auto;
margin-right: auto;
margin-top: -202px;
background-color: #141414;
padding-left: 4px;
padding-right: 4px;
text-align: left;
border-radius: 10px;
-moz-border-radius: 10px;
-htm-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #434343;
box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
-htm-box-shadow: 0px 0px 5px #000000;
-o-box-shadow: 0px 0px 5px #000000;
-webkit-box-shadow: 0px 0px 5px #000000;
color: #434343 !important;
transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-htm-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
.profil2_mess:hover
{
margin-top: -42px;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-htm-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
.profil2_content
{
display: block;
width: 180px;
height: 200px;
max-height: 200px;
overflow: auto;
}
/*--------------------------------- FIN PROFIL --------------------------------- */
/************************************************************ DÉBUT QEEL ************************************************************/
/*Fond du qeel*/
#qeel {
position: relative;
width: 800px;
height: 680px;
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
background: #141313 url('https://2img.net/r/hpimg15/pics/570241qeel2.png') no-repeat top center;
border-radius: 20px;
box-shadow: 0px 0px 10px #000000;
}
/*Titre du qeel*/
#qeel_title {
color: goldenrod;
font-size: 44px;
font-family: 'Great Vibes', cursive;
text-shadow: 1px 1px 2px #000000;
padding-left: 15px;
}
/*Carré des informations sur les membres*/
#qeel_info_members {
position: absolute;
top: 25px;
left: 25px;
width: 320px;
height: 290px;
background-color: rgba(20, 19, 19, 0.6);
border-radius: 10px;
box-shadow: 0px 0px 3px #141313;
padding: 10px;
color: #c9c7be;
font-size: 13px;
font-family: arial;
letter-spacing: 1px;
text-align: left;
}
/*Mise en forme des listes des membres connectés*/
#userlists {
margin-top: 5px;
height: 205px;
overflow: auto;
}
#totalconn {
margin-top: 5px;
}
#totalconn .row1{
background: transparent;
vertical-align: top;
}
#totalconn .gensmall {
color: #c9c7be;
font-size: 13px;
font-family: arial;
letter-spacing: 1px;
text-align: left;
}
/*Section des groupes*/
#qeel_bottom {
position: absolute;
top: 418px;
left: 0px;
width: 800px;
text-align: center;
}
/*Nom des groupes*/
.qeelonglet {
display: inline-block;
margin-left: 20px;
margin-right: 20px;
margin-top: 2px;
height: 40px;
font-size: 38px;
font-family: 'Great Vibes', cursive;
letter-spacing: 1px;
text-shadow: 0px 0px 3px #000000;
opacity: 0.6;
}
/*Groupe au survol*/
.qeelonglet_0:hover {
cursor: pointer;
opacity: 0.8;
}
/*Groupe actif*/
.qeelonglet_1 {
opacity: 1;
}
/*Description des groupes*/
.contenu_qeelonglet {
position: relative;
width: 800px;
height: 200px;
margin-top: 20px;
display: none;
}
/*Images des groupes*/
.contenu_qeelonglet img {
width: 800px;
height: 200px;
border-radius: 0px 0px 20px 20px;
}
/*Descriptions des groupes*/
.qeel_desc {
position: absolute;
top: 0px;
left: 0px;
width: 780px;
height: 180px;
background-color: rgba(20, 19, 19, 0.6);
border-radius: 0px 0px 20px 20px;
padding: 10px;
color: #c9c7be;
font-size: 13px;
font-family: arial;
letter-spacing: 1px;
text-align: justify;
overflow: auto;
transition: 0.5s;
opacity: 0;
}
/*Descriptions des groupes au survol*/
.contenu_qeelonglet:hover .qeel_desc {
opacity: 1;
}
/************************************************************ FIN QEEL ************************************************************/
/*--------------------------------- PA ---------------------------------*/
/* Fond */
.fondsgénéraux {
background-color: #1B1B1F;
width: 700px;
padding: 15px;
color: #767676;
}
.blocpa {
width: 220px;
padding: 15px;
background-color: #141517;
}
.blocpa:hover {
width: 220px;
background-color: #141517;
border-left: 2px solid #2F3C3E;
border-right: 2px solid #2F3C3E;
}
/* Titres */
.titrePA1 {
font-family: parisienne;
font-size: 35px;
color: #FE6D6D;
z-index: 1px;
position: relative;
}
.titrePA2 {
font-family: parisienne;
font-size: 25px;
color: #F0F0F0;
position: relative;
}
.titrePA2:hover {
font-family: parisienne;
font-size: 25px;
color: #FE6D6D;
position: relative;
}
.titrePA3 {
font-family: parisienne;
font-size: 25px;
color: #FE6D6D;
position: relative;
}
.titrePA3:hover {
font-family: parisienne;
font-size: 25px;
color: #F0F0F0;
position: relative;
}
/* Système onglets */
.paonglet {
display: inline-block;
cursor: pointer;
}
.contenu_paonglet {
display: none;
width: 250px;
height: 360px;
background-color: #141517;
}
.contenu_paonglet:hover {
display: none;
width: 250px;
background-color: #141517;
border-left: 2px solid #2F3C3E;
border-right: 2px solid #2F3C3E;
}
/* Info-bulles staff */
.info {
position: relative;
z-index: 24;
text-decoration: none;
}
d.info:hover {
z-index: 25;
}
d.info span {
display: none;
}
d.info:hover span {
display: block;
position: absolute;
top: -2em;
left: -2em;
width: 120px;
height: 50px;
background-color: #1B1B1F;
color: #16161A;
text-align: center;
font-weight: none;
}
/* Info-bulles prédef */
.info {
position: relative;
z-index: 24;
text-decoration: none;
}
c.info:hover {
z-index: 25;
}
c.info span {
display: none;
}
c.info:hover span {
display: block;
position: absolute;
top: -7.3em;
left: -0.2em;
border-radius: 50%;
width: 85px;
height: 85px;
background-color: #1B1B1F;
color: #16161A;
text-align: center;
font-weight: none;
}
/* Images Prédef */
.imgPA {
border-radius: 50%;
width: 80px;
height: 80px;
}
/* Images Staff */
.imgwidget {
border-radius: 50%;
width: 60px;
height: 60px;
-moz-transition-duration: 1s;
-moz-transition-timing-function: linear;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-duration: 1s;
transition-timing-function: linear;
}
.imgwidget:hover {
border-radius: 50%;
width: 60px;
height: 60px;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
/* Top Sites */
.tops {
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
width: 40px;
}
.tops:hover {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
width: 40px;
}
/*--------------------------------- FIN PA ---------------------------------*/
/********************************************* NAVIGATION *********************************************/
/*Fixe la navigation en haut cachée*/
#navbloc {
position: fixed;
z-index: 20;
top: -32px;
left: 0px;
width: 100%;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
/*Barre de la navigation*/
.nav_links {
background: #1A1815;
border-bottom: 2px solid #000000;
color: #850606;
height: 20px;
padding: 5px;
}
/*Liens de la navigation*/
#navbloc a.mainmenu {
font-family: monotype corsiva;
font-size: 18px;
color: #850606;
text-shadow: 1px 1px 1px #000000;
}
/*Liens de la navigation au survol*/
#navbloc a.mainmenu:hover {
color: #850606;
text-shadow: 1px 1px 1px #000000;
}
/*Boutons pour ouvrir ou fermer la navigation*/
#nav_ouvrir, #nav_fermer {
display: block;
width: 190px;
margin-left: 15px;
margin-top: -2px;
background: #1A1815;
border: 2px solid #000000;
border-top: none;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
color: #850606;
text-shadow: 1px 1px 1px #000000;
padding: 5px;
font-family: Times New Roman;
font-size: 20px;
font-variant: small-caps;
cursor: pointer;
text-align: center;
}
/*Boutons au survol*/
#nav_ouvrir:hover, #nav_fermer:hover {
color: #850606;
}
/********************************************* FIN NAVIGATION *********************************************/
a { text-decoration: none; }
a:hover{text-decoration: none !important;}
a {text-decoration: none !important;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
/*--- Partie texte area : fond ---*/
.sceditor-container iframe, .sceditor-container textarea {
background-color: #1B1B1F !important;
width: 540px !important;
color: #FFFFFF !important;
font-size:12px !important;
}
Ainsi que le template Index_Box :
- Index_Box:
- Code:
<link href='http://fonts.googleapis.com/css?family=Lobster|Shadows+Into+Light|Indie+Flower|Nunito' rel='stylesheet' type='text/css' />
<br><br>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<table class="global_cate" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td class="title_cate">
{catrow.tablehead.L_FORUM}
</td></tr>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<tr>
<td>
<table align="center" class="global_forum" cellspacing="15" width="100%">
<tr>
<td align="left" valign="middle" style="padding-top: 24px;" width="95%">
<div class="gensous_forums" align="center">
<span class="sub_forums">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
<script type="text/javascript">jQuery('.sub_forums').html(jQuery('.sub_forums').html().replace(/, /g,'<br />')).removeAttr('class');</script>
</div>
<div align="right"><div class="genicone_forum" align="center">
<img class="icone_forum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div></div>
<span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
<div class="gendesc_forum">
<div class="desc_forum">{catrow.forumrow.FORUM_DESC}</div>
</div>
</td>
<td align="center" valign="middle" width="5%">
<div class="stats_forum">
<span class="stat_forum">Topics: {catrow.forumrow.TOPICS} | Messages: {catrow.forumrow.POSTS}</span><br /><br />
{catrow.forumrow.LAST_POST}
</div>
</td>
</tr>
</table>
</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 -->
Je suis sous Firefox pour info et mon forum est en phhb2
Si vous pouviez m'aider, je vous en serai vraiment immensément reconnaissante,
Un très grand merci d'avance !!!
Juju
