Le Deal du moment : -45%
WHIRLPOOL OWFC3C26X – Lave-vaisselle pose libre ...
Voir le deal
339 €

   :: Espace invités :: Intruders :: Résolus Voir le sujet précédent Voir le sujet suivant Aller en bas

Bug d'image de sous catégories

Mevrynn
Bug d'image de sous catégories Empty Ven 12 Fév - 15:50
Bonjour ou bonsoir !


Je ne vais pas faire dans l'originalité, et je vais commencer par vous féliciter pour votre magnifique travail que ce soit en graphisme ou en codage. C'est vraiment un régal pour les yeux <3


J'ai, grâce à vous, enfin trouver comment mettre les sous forums derrières les images, et ait donc utiliser un de vos LS en catégories, que j'ai remanier pour tenter de le faire correspondre à ce que j'avais en tête. Mais bien évidemment, à vouloir jouer les apprentis sorcier, il y a eu un couac xD

En effet, l'image du forum disparaît bien quand on passe la souris sur la description du forum, mais pas quand on passe cette dernière sur l'image et le bloc des sous catégorie ( ou alors ça bug, ça clignote, et impossible de cliquer sur le lien ) :

Je vous laisse le lien de mon forum test pour constater le bug :

Code:
http://hiro-test.probb.fr/

Le CSS :

Code:
/* TITRE CATEGORIES */
.tleCAT{
margin:15px auto 0;
width:800px; padding:10px 0; text-align:center;
background-image: url('http://i40.tinypic.com/96kje8.jpg'); /* MODIFIABLE */
}
.tleCAT h2{
margin:0 auto;
font-size:38px; text-transform:uppercase; letter-spacing:3px;
font-family: 'Merienda'; color:white; text-shadow:1px 1px 0px rgba(0,0,0,0.3); /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:800px;
}
/* BLOC FORUM */
#blocFRM{
margin:10px auto;
width:800px; overflow:hidden; text-align:center;
}
.blocFRM {
position:relative; width:800px; overflow:hidden; text-align:center;
}
/* TITRE FORUMS */
.tleFRM {
display:inline-block; vertical-align:top;
margin-right:10px; width:800px; padding:10px 30px; overflow:hidden;
font-family:georgia; font-size:16px; font-weight:bold; text-transform:uppercase; text-align:left;
background:#3f3e4f; /* MODIFIABLE */
  transition:all 0.65s ease; -webkit-transition:all 0.65s ease;
}

.tleFRM:hover {
display:inline-block; vertical-align:top;
margin-right:10px; width:800px; padding:10px 50px; overflow:hidden; letter-spacing: 3px;
font-family:georgia; font-size:16px; font-weight:bold; text-transform:uppercase; text-align:left;
background:#6f6d8b; /* MODIFIABLE */
  transition:all 0.65s ease; -webkit-transition:all 0.65s ease;
}
.tleFRM a{
color:white !important; text-shadow:1px 1px 0px rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* NOMBRE SUJETS ET MESSAGES */
.nbFRM{
display:inline-block; vertical-align:top; margin-top: 5px;
height:10px; width:130px; padding:10px; overflow:hidden;
text-align:center; font-size:9px; text-transform:uppercase;
font-family:Arial; background:#57566f; color:white; /* MODIFIABLE */
opacity:0.7;
}
/* BLOC IMAGE/DERNIER MESSAGE */
.itsFRM {
display:inline-block; vertical-align:top; margin-top:10px;
width:150px; height:80px;
}
/* ICÔNES FORUMS */
.imgFRM{
position:absolute; z-index:4; margin-left:-75px;
width:150px; height:80px;
transition:all 0s ease; -webkit-transition:all 0s ease;
}
.itsFRM:hover .imgFRM {
opacity:0; transform:scale(0); -webkit-transform:scale(0);
}
/* DERNIER MESSAGE FORUMS */
.lmsgFRM {
width:130px; height:60px; padding:10px; overflow:hidden;
  background-color:#a9b0ba; box-shadow:inset 0 0 15px rgba(0,0,0,0.1); color:#dedede; /* MODIFIABLE */
text-align:center; font-size:11px; text-transform:uppercase; line-height:20px;

}


/* BLOC DESCRIPTION/SOUS-FORUMS */
.defFRM {
display:inline-block; vertical-align:top; margin-left:10px; margin-top:10px;
}
/* DESCRIPTIONS FORUMS */
.descFRM {
display:inline-block; vertical-align:top; margin-right:10px;
width:270px; height:90px; padding:13px; overflow:auto;
background:#e1e1e5; font-family:Arial; color:black; /* MODIFIABLE */
font-size:11px; text-align:justify;
}
/* IMAGES DESCRIPTIONS FORUMS FORUMS */
.descFRM img {
position:absolute; z-index:2; margin-left:-353px; margin-top: -13px;
width:326px; height:116px;
transition:all 0s ease; -webkit-transition:all 0s ease;
}
.defFRM:hover .descFRM img{
transform:translatex(-330px); -webkit-transform:translatex(-330px);
}
/* SOUS-FORUMS */
.sfFRM {
display:inline-block; vertical-align:top; margin-top: 10px;
width:300px; height:90px; padding:13px; overflow:auto;
font-size:25px; text-transform:uppercase; text-align:justify;
background:#e7eaea; /* MODIFIABLE */
}
/* LIENS SOUS-FORUMS */
.sfFRM a{
color:#191919 !important; /* MODIFIABLE */
}

Et la template index_box :

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>
        <div class="mdlCAT"><!-- END tablehead -->

        <!-- BEGIN cathead -->
        <div class="topCAT"></div>
        <!-- END cathead -->
        
        <!-- BEGIN forumrow -->
        <div id="blocFRM"><div class="blocFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
          <table><tr>
            <div id="dtlFRM"><td><div class="sfFRM" id="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></td>
              <td><div class="defFRM"><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div></td> </div>
              <td><div class="itsFRM"><img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" /><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div></div>
            <div class="nbFRM">{catrow.forumrow.TOPICS} SUJETS  ▼  {catrow.forumrow.POSTS} MESSAGES</div></td>
            </tr></table>
            </div> </div>
        <!-- END forumrow -->
        <!-- BEGIN catfoot -->

        <!-- BEGIN inc -->
        <!-- END inc -->
    
        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
        </div>
        <!-- END tablefoot --><!-- END catrow -->



Il va sans dire que lorsque le forum sera ouvert, vous aurez une place toute particulière dans nos crédits, avec un lien vers votre forum =)


Merci d'avance pour le coup de main ! Une très bonne journée à vous ♥
Revenir en haut Aller en bas
Skaemp
Bug d'image de sous catégories Empty Sam 13 Fév - 4:47
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>
            <div class="mdlCAT"><!-- END tablehead -->

            <!-- BEGIN cathead -->
            <div class="topCAT"></div>
            <!-- END cathead -->
           
            <!-- BEGIN forumrow -->
            <div id="blocFRM"><div class="blocFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
            <div id="dtlFRM"><div class="sfFRM" id="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div></div><div class="boxFRM"><div class="itsFRM"><img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" /><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div></div><div class="nbFRM">{catrow.forumrow.TOPICS} SUJETS  ▼  {catrow.forumrow.POSTS} MESSAGES</div></div></div></div>
            <!-- END forumrow -->
            <!-- BEGIN catfoot -->

            <!-- BEGIN inc -->
            <!-- END inc -->
       
            <!-- END catfoot -->
            <!-- BEGIN tablefoot -->
 </div>
            <!-- END tablefoot --><!-- END catrow -->

Partie CSS :
Code:
/* TITRE CATEGORIES */
.tleCAT{
margin:15px auto 0;
width:800px; padding:10px 0; text-align:center;
background-image: url('http://i40.tinypic.com/96kje8.jpg'); /* MODIFIABLE */
}
.tleCAT h2{
margin:0 auto;
font-size:38px; text-transform:uppercase; letter-spacing:3px;
font-family: 'Merienda'; color:white; text-shadow:1px 1px 0px rgba(0,0,0,0.3); /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto; width:800px;
}
/* BLOC FORUM */
#blocFRM{
margin:10px auto;
width:800px; overflow:hidden; text-align:center;
}
.blocFRM {
position:relative; width:800px; overflow:hidden; text-align:center;
}
/* TITRE FORUM */
.tleFRM {
display:inline-block; vertical-align:top; margin-bottom:15px;
width:770px; padding:10px 0 10px 30px; overflow:hidden;
font-family:Georgia; font-size:16px; font-weight:bold; text-transform:uppercase; text-align:left;
background:#3f3e4f; /* MODIFIABLE */
transition:all 0.65s ease; -webkit-transition:all 0.65s ease;
}
.tleFRM:hover {
width:750px; padding:10px 0 10px 50px; overflow:hidden; letter-spacing:3px;
background:#6f6d8b; /* MODIFIABLE */
}
.tleFRM a{
color:white !important; text-shadow:1px 1px 0px rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* BLOC DESCRIPTION/SOUS-FORUMS */
#dtlFRM {
display:inline-block; vertical-align:top;
width:650px;
}
/* IMAGES DESCRIPTIONS FORUMS FORUMS */
.descFRM img {
position:absolute; z-index:2; margin-left:-350px; margin-top:-10px;
width:325px; height:115px;
transition:all 0.45s ease; -webkit-transition:all 0.45s ease;
}
#dtlFRM:hover .descFRM img{
transform:translatex(-330px); -webkit-transform:translatex(-330px);
}
/* SOUS-FORUMS */
.sfFRM {
display:inline-block; vertical-align:top;
width:305px; height:95px; padding:10px; overflow:auto;
font-size:11px; text-transform:uppercase; text-align:justify;
background:#e7eaea; /* MODIFIABLE */
}
/* LIENS SOUS-FORUMS */
.sfFRM a{
color:#191919 !important; /* MODIFIABLE */
}
/* DESCRIPTIONS FORUMS */
.descFRM {
display:inline-block; vertical-align:top; margin:0 15px;
width:270px; height:95px; padding:10px; overflow:auto;
background:#e1e1e5; font-family:Arial; color:black; /* MODIFIABLE */
font-size:11px; text-align:justify;
}
/* BLOC ICÔNES/DERNIER MESSAGE / NOMBRE SUJETS & MESSAGES */
.boxFRM {
display:inline-block; vertical-align:top;
}
/* BLOC IMAGE/DERNIER MESSAGE */
.itsFRM {
width:150px; height:80px;
}
/* ICÔNES FORUMS */
.imgFRM{
position:absolute; z-index:4; margin-left:-75px;
width:150px; height:80px;
transition:all 0.45s ease; -webkit-transition:all 0.45s ease;
}
.itsFRM:hover .imgFRM {
opacity:0; transform:scale(0); -webkit-transform:scale(0);
}
/* DERNIER MESSAGE FORUMS */
.lmsgFRM {
width:130px; height:60px; padding:10px; overflow:hidden;
background-color:#a9b0ba; box-shadow:inset 0 0 15px rgba(0,0,0,0.1); color:#dedede; /* MODIFIABLE */
text-align:center; font-size:11px; text-transform:uppercase;
}
/* NOMBRE SUJETS ET MESSAGES */
.nbFRM{
margin-top:5px;
height:10px; width:140px; padding:10px 5px; overflow:hidden;
text-align:center; font-size:9px; text-transform:uppercase;
font-family:Arial; background:#57566f; color:white; /* MODIFIABLE */
opacity:0.7;
}

Agréable journée à vous aussi.
Revenir en haut Aller en bas
Mevrynn
Bug d'image de sous catégories Empty Dim 14 Fév - 13:35
Tout marche comme sur des roulettes à présent ! Merci beaucoup pour votre aide <3

Une très bonne continuation à vous, au plaisir de voir d'autres de vos créations ♥
Revenir en haut Aller en bas
Contenu sponsorisé
Bug d'image de sous catégories Empty
Revenir en haut Aller en bas
Page 1 sur 1
Vous ne pouvez pas répondre aux sujets dans ce forum