Catégories qui se chevauchent

Dim 28 Fév - 20:51
Hellow !

Donc en fait j'ai pris des catégories dans un LS et les sous-forums de chevauchent (voilà un aperçu) et du coup j'aimerai bien arranger ça ^^

Voilà les codes :

Templates:

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

    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="topCAT"><div class="dcoCAT"></div><div class="tleCAT">{catrow.tablehead.L_FORUM}</div><div class="dcoCAT"></div></div>
    <br clear="all" /><!-- END tablehead -->

    <!-- BEGIN cathead -->
    <!-- END cathead -->
    
    <!-- BEGIN forumrow -->
    <div class="blocFRM"><div class="FRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div> <div class="sjtFRM">{catrow.forumrow.TOPICS}</div> <div class="repFRM">{catrow.forumrow.POSTS}</div>
    <div class="dsfFRM"><div class="sfFRM" id="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">jQuery('#sfFRM').html(jQuery('#sfFRM').html().replace(/, /g,'<br /> ')).removeAttr('id');</script></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div></div>
    <div class="limgFRM"><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div><img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" /></div>
    </div></div>  
    <!-- END forumrow -->
    
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    
    <!-- BEGIN tablefoot -->
    <br clear="all" />
    <!-- END tablefoot --><!-- END catrow -->

CSS :

Code:
/* TITRES CATEGORIES */
.topCAT{
width:825px; margin:auto;
}
.tleCAT{
width:715px; height:65px; text-align:center; margin:0 5px; display:inline-block;
background:coral; /* MODIFIABLE */
}
.tleCAT h2{
font-size:24px; text-transform:uppercase; letter-spacing:3px;
font-family:Arial; color:white; text-shadow:1px 1px 0px black; /* MODIFIABLE */
}
/* DECORATIONS TITRES CATEGORIES */
.dcoCAT {
display:inline-block; vertical-align:top;
width:50px; height:65px;
background-color:rgba(250,250,250,0.6); /* MODIFIABLE */
}
/* BLOC FORUMS */
.blocFRM{
width:825px; padding-left:30px;
margin-left:auto; margin-right:auto; margin-top:-10px;
text-align:center;
}
/* BLOCS FORUMS */
.FRM{
float:left; margin:10px;
width:375px; height:275px;  
}
/* TITRE BLOC FORUMS */
.tleFRM {
width:235px; height:35px; padding-top:20px; overflow:hidden;
font-size:14px; display:inline-block; vertical-align:top;
font-family:Arial; background:coral; /* MODIFIABLE */
text-transform:uppercase; text-align:center;
}
.tleFRM a{
color:white !important; /* MODIFIABLE */
}
/* NOMBRE SUJETS ET MESSAGES */
.sjtFRM{
width:50px; height:35px; padding-top:20px;
background-color:rgba(250,250,250,0.8); /* MODIFIABLE */
font-size:11px; display:inline-block;
}
.repFRM {  
width:50px; height:35px; padding-top:20px;
background-color:rgba(250,250,250,0.6); /* MODIFIABLE */
font-size:11px; display:inline-block;
}
/* BLOC IMAGE + DERNIER MESSAGE FORUMS */
.limgFRM{
width:335px; height:55px; margin:auto;
}
/* IMAGES FORUMS */
.imgFRM{
width:165px; height:55px; display:inline-block;
}
/* DERNIER MESSAGE */
.lmsgFRM {
display:inline-block; vertical-align:top; margin-right:5px;
width:165px; height:45px; padding:5px 0;
background-color:rgba(250,250,250,0.7); /* MODIFIABLE */
text-align:center; font-size:11px;
}
/* BLOC DESCRIPTION + SOUS-FORUMS */
.dsfFRM {
width:330px; margin:10px auto; padding:10px;
background:rgba(250,250,250,0.8); box-shadow:0 0 3px rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* DESCRIPTIONS BLOC FORUMS */
.descFRM {
width:160px; height:115px; padding:0px 5px; overflow:auto;
display:inline-block;
font-size:11px; text-align:justify;
color:black; /* MODIFIABLE */
}
/* IMAGES DESCRIPTIVES BLOC FORUMS */
.descFRM img {
position:absolute; z-index:3; margin-left:-165px;
width:160px; height:115px;
transition:all 0.45s ease; -webkit-transition:all 0.45s ease;
}
/* SOUS-FORUMS */
.sfFRM{
position:relative; z-index:5; display:inline-block;
padding:5px; width:150px; height:105px; overflow:auto; text-align:left;
background:coral; /* MODIFIABLE */
opacity:0;
transition:all .65s linear; -webkit-transition:all .65s linear;
}
.sfFRM a{
color:white !important; /* MODIFIABLE */
}
.sfFRM:hover {
opacity:1;
}

Merci d'avance ^^
Revenir en haut Aller en bas
Lun 29 Fév - 5:17
Bonjour,

L'application de l'ensemble suivant résout-il votre problème ?


Remplacer l'intégralité du template index_box par :
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}<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>

        <!-- BEGIN catrow --><!-- BEGIN tablehead -->
        <div class="topCAT"><div class="tleCAT">{catrow.tablehead.L_FORUM}</div><div class="dcoCAT"></div><div class="dcoCAT"></div></div>
        <br clear="all" /><!-- END tablehead -->

        <!-- BEGIN cathead -->
        <!-- END cathead -->
     
        <!-- BEGIN forumrow -->
        <div class="blocFRM"><div class="FRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div> <div class="sjtFRM">{catrow.forumrow.TOPICS}</div> <div class="repFRM">{catrow.forumrow.POSTS}</div><div class="dsfFRM"><div class="blocSF"></div><div class="sfFRM" id="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">$('.sfFRM').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div></div><div class="limgFRM"><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div><img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" /></div></div></div>
        <!-- END forumrow -->
     
        <!-- BEGIN catfoot -->
        <!-- END catfoot -->
     
        <!-- BEGIN tablefoot -->
        <br clear="all" />
        <!-- END tablefoot --><!-- END catrow -->

Partie CSS :
Code:
/* TITRE CATEGORIES */
.topCAT{
width:825px; margin:auto;
}
.tleCAT{
display:inline-block;
width:715px; height:65px; text-align:center;
background:coral; /* MODIFIABLE */
}
.tleCAT h2{
font-size:24px; text-transform:uppercase; letter-spacing:3px;
font-family:Arial; color:white; text-shadow:1px 1px 0px black; /* MODIFIABLE */
}
/* DECORATIONS TITRES CATEGORIES */
.dcoCAT {
display:inline-block; vertical-align:top; margin-left:5px;
width:50px; height:65px;
background-color:rgba(250,250,250,0.6); /* MODIFIABLE */
}
/* BLOC FORUMS */
.blocFRM{
width:810px; padding-left:15px;
margin-left:auto; margin-right:auto; margin-top:-10px;
text-align:center;
}
/* BLOC FORUM */
.FRM{
float:left; margin:10px;
width:375px; height:275px;
}
/* TITRE FORUM */
.tleFRM {
width:235px; height:35px; padding-top:20px; overflow:hidden;
display:inline-block; vertical-align:top;
font-family:Arial; background:coral; /* MODIFIABLE */
text-transform:uppercase; text-align:center; font-size:14px;
}
.tleFRM a{
color:white !important; /* MODIFIABLE */
}
/* NOMBRE SUJETS FORUM */
.sjtFRM{
width:50px; height:35px; padding-top:20px;
background-color:rgba(250,250,250,0.8); /* MODIFIABLE */
font-size:11px; display:inline-block;
}
/* NOMBRE MESSAGES FORUM */
.repFRM {
width:50px; height:35px; padding-top:20px;
background-color:rgba(250,250,250,0.6); /* MODIFIABLE */
font-size:11px; display:inline-block;
}
/* BLOC DESCRIPTION + SOUS-FORUMS */
.dsfFRM {
margin:10px auto;
width:330px; height:115px; padding:10px;
background:rgba(250,250,250,0.8); box-shadow:0 0 3px rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* BLOC IMAGE DESCRIPTIVE/SOUS-FORUMS */
.blocSF {
display:inline-block;
width:160px; height:115px;
background:coral; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
.descFRM img {
position:absolute; z-index:3; margin-left:-165px;
width:160px; height:115px;
transition:all 0.45s ease; -webkit-transition:all 0.45s ease;
}
/* SOUS-FORUMS */
.sfFRM{
position:absolute; z-index:5; margin-top:-115px;
width:150px; height:105px; padding:5px;  overflow:auto;
text-align:left;
background:coral; /* MODIFIABLE */
opacity:0; transition:all .65s linear; -webkit-transition:all .65s linear;
}
.sfFRM:hover {
opacity:1;
}
/* LIEN SOUS-FORUM */
.sfFRM a{
color:white !important; /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM {
display:inline-block;
width:160px; height:115px; padding:0px 5px; overflow:auto; 
font-size:11px; text-align:justify;
color:black; /* MODIFIABLE */
}
/* BLOC ICÔNES + DERNIER MESSAGE FORUM */
.limgFRM{
width:355px; height:55px; margin:auto;
}
/* DERNIER MESSAGE */
.lmsgFRM {
display:inline-block; vertical-align:top; margin-right:5px;
width:180px; height:45px; padding:5px 0;
background-color:rgba(250,250,250,0.7); /* MODIFIABLE */
text-align:center; font-size:11px;
}
/* ICÔNES FORUMS */
.imgFRM{
display:inline-block;
width:165px; height:55px;
}
Revenir en haut Aller en bas
Lun 29 Fév - 18:33
Coucou ! Donc les catégories ne se chevauchent plus, merci beaucoup, mais on ne peut plus voir les sous-forums ^^" merci d'avance ! :3
Revenir en haut Aller en bas
Mar 1 Mar - 2:45
Le lien vers les niveaux inférieurs - Panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie, est-il correctement activé ? Le problème ne survenant sur aucun de mes navigateurs, une capture d'écran sera nécessaire si la vérification des paramètres s'avoue infructueuse.
Revenir en haut Aller en bas
Mar 1 Mar - 11:30
Coucou ^^ donc oui j'ai bien activé le lien vers les niveaux inférieurs ^^ mais voilà les différents problèmes que je rencontre :

Déjà, sur mon ordinateur, tout marche parfaitement, mais le problème c'est que j'utilise principalement ma tablette ><"
Sur ma tablette :

Sur Safari je ne vois pas les sous-forums, et je n'arrive pas à cliquer sur les liens des derniers messages (le lien test-codage)

Sur Firefox voilà ce qu'il se passe quand j'essaye de voir les sous-forums :
http://zupimages.net/up/16/09/hbly.png

Et quand j'essaye de cliquer sur le lien :
http://zupimages.net/up/16/09/x4r0.png

Merci d'avance !
Revenir en haut Aller en bas
Mer 2 Mar - 23:28
Ne disposant de pareil équipement, il ne m'est possible d'effectuer une quelconque vérification quant à l'efficacité des modifications suivantes.

Remplacer l'intégralité du template index_box par :


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

            <!-- BEGIN catrow --><!-- BEGIN tablehead -->
            <div class="topCAT"><div class="tleCAT">{catrow.tablehead.L_FORUM}</div><div class="dcoCAT"></div><div class="dcoCAT"></div></div>
            <br clear="all" /><!-- END tablehead -->

            <!-- BEGIN cathead -->
            <!-- END cathead -->
        
            <!-- BEGIN forumrow -->
            <div class="blocFRM"><div class="FRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div> <div class="sjtFRM">{catrow.forumrow.TOPICS}</div> <div class="repFRM">{catrow.forumrow.POSTS}</div><div class="dsfFRM"><div class="blocSF"><div class="sfFRM" id="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">$('.sfFRM').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script></div></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div></div><div class="limgFRM"><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div><img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" /></div></div></div>
            <!-- END forumrow -->
        
            <!-- BEGIN catfoot -->
            <!-- END catfoot -->
        
            <!-- BEGIN tablefoot -->
            <br clear="all" />
            <!-- END tablefoot --><!-- END catrow -->

Remplacer :
Code:
/* SOUS-FORUMS */
.sfFRM{
position:absolute; z-index:5; margin-top:-115px;
width:150px; height:105px; padding:5px;  overflow:auto;
text-align:left;
background:coral; /* MODIFIABLE */
opacity:0; transition:all .65s linear; -webkit-transition:all .65s linear;
}
Par :
Code:
/* SOUS-FORUMS */
.sfFRM{
position:absolute; z-index:5;
width:150px; height:105px; padding:5px;  overflow:auto;
text-align:left;
background:coral; /* MODIFIABLE */
opacity:0; transition:all .65s linear; -webkit-transition:all .65s linear;
}
Revenir en haut Aller en bas
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum