Catégories qui se chevauchent

Catégories qui se chevauchent  Empty 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
Catégories qui se chevauchent  Empty 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
Catégories qui se chevauchent  Empty 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
Catégories qui se chevauchent  Empty 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
Catégories qui se chevauchent  Empty 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 :
https://www.zupimages.net/up/16/09/hbly.png

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

Merci d'avance !
Revenir en haut Aller en bas
Catégories qui se chevauchent  Empty 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