Accueil
Créer un forumDescription forum au survol qui ne s'affiche pas correctement
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Description forum au survol qui ne s'affiche pas correctement
par Melodiam Lun 22 Fév 2021 - 14:24
Détails techniques
Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://whydontyoudoright.forumactif.com/
Description du problème
Bonjour à tous ! :-)Je rencontre un petit problème avec le code qui modifie l'apparence de mes descriptions de forums...
Comme vous pouvez le voir au survol de l'image, un bloc texte apparaît en dessous avec le texte décrivant le forum !
Or, je n'arrive pas à le centrer correctement ni à faire marcher le overflow, ni même à fixer la taille que je veux.
D'autant que, au survol, je vois que le texte "bouge" un peu ?
En soit, j'aimerais parvenir à : lorsqu'on survole l'image, l'effet noir et blanc s'applique sur l'image (ça je garde) et qu'on voit tout de suite bien centré le bloc blanc (séparé des bords (pas de la même taille que l'image donc)) avec le texte - et si le texte est long, j'aimerais que l'on puisse scroll le bloc blanc ! ^^
Je ne sais pas si je suis très claire...
En tous cas, voici mon template index_box
- Spoiler:
- Code:
<table width="800px" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">
<br><br><br>
</td>
</tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
<div class="mdlCAT"><!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="FRM"><div class="tleFRM">
<a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
<div class="nbFRM">{catrow.forumrow.TOPICS} sujets & {catrow.forumrow.POSTS} messages</div></div>
<img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div id="descFRM">{catrow.forumrow.FORUM_DESC}</div>
<div class="lmsgFRM"><div class="avaFRM">
<!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar -->
</div>{catrow.forumrow.LAST_POST}</div>
<div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
<div class="btmCAT"></div>
<!-- END tablefoot --><!-- END catrow -->
Et voici le CSS associé :
- Spoiler:
- Code:
/*******************LES CATÉGORIES*******************/
/* BLOC TITRE CATEGORIE */
.tleCAT{
margin:5px auto 0;
width:1000px; padding:20px 0; text-align:center;
background: rgb(0,0,0);
background: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(145,4,86,1) 59%, rgba(255,2,150,1) 100%);
}
/* TITRE CATEGORIE */
.tleCAT h2{
border: 1px solid white; width: 300px;
font-size:22px;
font-family: 'DM Serif Display', serif;
padding: 20px;
margin-left: 50px;
text-transform:uppercase;
color:white; /* MODIFIABLE */
}
/* CONTENU CATEGORIE */
.mdlCAT {
margin:auto; width:1000px; padding:10px 0 25px;
background:white; /* MODIFIABLE */
}
/* BAS CATEGORIE */
.btmCAT {
margin:auto; margin-bottom:15px;
width:1000px; height:15px;
background-color: rgba(0, 0, 0, 0.5); /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM {
margin:auto; width:950px; text-align:center;
}
/* TITRE FORUM */
.tleFRM {
width:950px; padding:10px 0 5px;
border-bottom: 1px solid black;
margin-bottom: 10px;
text-align:left; font-size:12px; font-family:Arial;
text-transform:uppercase; letter-spacing:1px;
}
.tleFRM a{
display:inline-block; vertical-align:middle;
color:#000 !important; /* MODIFIABLE */
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {
display:inline-block; vertical-align:middle;
width:200px; padding-left:15px;
text-transform:uppercase; font-size:7px;
color:#594c4d; /* MODIFIABLE */
}
/* ICÔNES FORUM */
.imgFRM {
display:inline-block; vertical-align:top;
width:100px; height:138px;
}
/* IMAGE DESCRIPTIVE FORUM */
#descFRM img {
position:absolute;
width:395px; height:138px;
filter:grayscale(0); -webkit-filter:grayscale(0);
transition:all 0.45s ease-in-out; -webkit-transition:all 0.45s ease-in-out;
}
.FRM:hover #descFRM img {
filter:grayscale(1); -webkit-filter:grayscale(1);
}
/* BLOC DESCRIPTION */
#descFRM {
display:inline-block; vertical-align:top; margin:0 10px;
width:395px; height:138px; text-align: justify;
background: black; /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM {
position:relative;
width:340px; height:100px; margin: auto;
transition:all 0.45s ease-in-out; -webkit-transition:all 0.45s ease-in-out;
opacity:0; background:red;
}
/* SURVOL DESCRIPTION FORUM */
#descFRM:hover .descFRM {
padding:10px; margin-top: 20px; overflow:auto; opacity:1;
font-size:9px; text-align:justify;
color: black; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
display:inline-block;
vertical-align:top;
width:420px; height:81px;
padding:55px 5px 0;
text-align:center;
border: 1px solid #efefef;
text-transform:uppercase; font-size:7px;
color:#594c4d; line-height:normal;
background:#fff; /* MODIFIABLE */
}
/* TITRE DERNIER MESSAGE FORUM */
.lmsgFRM a {
font-size:10px; font-family:georgia;
text-transform:uppercase; letter-spacing:1px;
color:black; /* MODIFIABLE */
}
/* TAILLE PSEUDONYME DERNIER POSTEUR FORUM */
.lmsgFRM .gensmall {
font-size:10px; text-transform: italic; /* MODIFIABLE */
}
/* AVATAR DERNIER POSTEUR FORUM */
.avaFRM {
float:right; margin-top:-42px; margin-right:7px;
width:80px; height:auto; overflow:hidden;
}
.avaFRM img{
width:80px; filter:grayscale(0); -webkit-filter:grayscale(0);
transition:all 0.45s ease-in-out; -webkit-transition:all 0.45s ease-in-out;
}
.FRM:hover .avaFRM img{
filter:grayscale(1); -webkit-filter:grayscale(1);
}
/* BLOC SOUS-FORUMS */
.sfFRM {
margin:auto; margin-top:10px;
width:950px; text-align:center;
font-family: arial; letter-spacing: 1px; font-size:9px;
background: black; color: white; /* MODIFIABLE */
}
/* LIENS SOUS-FORUMS */
.sfFRM a{
display:inline-block; vertical-align:middle; margin:5px 0; margin-right:1px;
text-transform:uppercase; color:white !important; /* MODIFIABLE */
}
/********************FIN DES CATÉGORIES**********************/
Si vous savez comment stabiliser mon code ou faire en sorte qu'il marche correctement, je vous en serais très reconnaissante !
Merci !!
:-)
Melodiam- ****
- Messages : 343
Inscrit(e) le : 16/04/2012 -
Re: Description forum au survol qui ne s'affiche pas correctement
par MasDan Mar 23 Fév 2021 - 5:07
Bonjour Melodiam,
À votre CSS supprimer l'attribut height.
À votre CSS supprimer l'attribut height.
MasDan- Membre habitué
-
Messages : 1538
Inscrit(e) le : 24/05/2011 -
Re: Description forum au survol qui ne s'affiche pas correctement
par Melodiam Mar 23 Fév 2021 - 12:58
Hello ! :-)
Ça marche parfaitement, merci beaucoup !!!!
Ça marche parfaitement, merci beaucoup !!!!
Melodiam- ****
- Messages : 343
Inscrit(e) le : 16/04/2012 -
Sujets similaires» Voir la description d'un groupe au survol de la souris.
» Description des sous-forums en survol avec tooltip
» Problème dans un QEEL avec onglets et description au survol du titre
» Image qui disparaît pour laisser place à une description lors du survol de la souris.
» Séparer texte de description et image de description d'un forum
» Description des sous-forums en survol avec tooltip
» Problème dans un QEEL avec onglets et description au survol du titre
» Image qui disparaît pour laisser place à une description lors du survol de la souris.
» Séparer texte de description et image de description d'un forum
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum