Espace entre image en-tête catégorie et titre catégorie

par Jay K. Mar 2 Mai 2017 - 15:29

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Opera
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Dès le premier essai pour afficher l'image d'en-tête de catégorie
Lien du forum : http://straightouttaperth.forumgratuit.fr/

Description du problème

Bonjour !

Après avoir cherché et testé divers codes désespérément pendant plusieurs semaines, je me décide à vous demander de l'aide pour ce problème. En fait, sur la capture d'écran, on peut voir un espace entre l'image d'en-tête de catégorie, et le titre de la catégorie (qui est une image). J'aimerais que l'image d'en-tête se place derrière l'image de titre, et non au-dessus comme actuellement... Ci-dessous le template index_box modifié et le CSS complet.

Un grand merci d'avance à tous ceux qui m'éclaireront sur ce problème !

Template index_box:

Code:: <link href='https://fonts.googleapis.com/css?family=Great+Vibes|Lato' rel='stylesheet' type='text/css'> <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center" class="firstbegincat"> <tr> <td valign="bottom">  <span class="gensmall">{LAST_VISIT_DATE}<br /> {CURRENT_TIME}<br /> </span>  <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div> </td> <td class="gensmall" align="right" valign="bottom">  <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br /> <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />  <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> </td> </tr> </table><div class="catrow_container"> <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="https://i.imgbox.com/qIxDyY1i.png"/></td></tr></table> <table class="forumline" width="100%" border="0" cellspacing="7" cellpadding="5" id="categories"> <caption colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </caption>   <tr> <td class="{catrow.cathead.CLASS_CAT}" colspan="3" width="100%"> <h{catrow.cathead.LEVEL} class="hierarchy"> <span class="cattitle"> <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a> </span> </h{catrow.cathead.LEVEL}> </td> </tr>   <tr> <td class="newpost clearfix" align="center" valign="middle"> <div class="infonewpost infopost"> <img class="imgnewpost" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> <div id="lastpost" class="gensmall clickinfopost">{catrow.forumrow.LAST_POST}</div> </div> <div class="lastpost-avatar-container infopost"> <div class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div> </div> </td> <td valign="top" width="100%" class="descriptions"> <div class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br /> <span id="nbposts" class="gensmall"><b>{catrow.forumrow.POSTS}</b> messages dans <b>{catrow.forumrow.TOPICS}</b> sujets</span> </div> <div class="description"> <span class="genmed">{catrow.forumrow.FORUM_DESC}</span> </div> </td> <td class="sousforums_container"> <div id="details" class="sousforums gensmall"> <div id="lienssousforums" class="sousforums_details">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div> <script text="javascript"> jQuery('#lienssousforums').html(jQuery('#lienssousforums').html().replace(/, /g,' ')).removeAttr('id'); </script> </div> </td> </tr>   <tr>  <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>  <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td> </tr>   </table></div>

CSS:

Code:: /*BACKGROUND + HEADER*/ body{ background-color: #FAF2F2 ; background-image: url("http://img4.hostingpics.net/pics/784929headerdef1.png"); background-image: url("http://img4.hostingpics.net/pics/598861headerdef22.png"); background-image: url("http://img4.hostingpics.net/pics/691645headerdef3.png"); background-position: top-center; background-repeat:no-repeat; background-attachment: scroll; } /*SAUT DE LIGNE TEXTE DERNIER MESSAGE*/ td.row3Right { white-space: normal; } /*CHATBOX*/ #chatbox .chatbox_row_1,#chatbox .chatbox_row_2{ background-color: transparent; } /*COULEUR FOND CHATBOX*/ body.chatbox { background-color: #FAF2F2; } /*POLICE CHATBOX*/ #chatbox p{ font-size:12px; } /*POLICE FORUM*/ a { text-decoration: none; } .element {font-family:"Megrim";} a span strong { font-weight: normal !important; } /*MENU NAVIGATION*/ a.mainmenu{ color:black; text-transform:uppercase; font-size:10px; letter-spacing:2px; text-shadow:0px 0px 2px; } /*SUPPRESSION DU CADRE SUJET*/ th.thHead, th.thCornerL, th.thTop, th.thCornerR, th.thSides, th.thLeft, th.thRight, td.catHead, td.catBottom, td.catLeft, td.catRight, th.thBottom, td.row3Right, td.catSides { border-width: 0px !important; } /*FIN SUPPRESSION DU CADRE SUJET*/ /*SUPPRESSION DE LA FAQ*/ a.mainmenu[href="/faq"] { display: none !important; } /*PROFIL EN HOVER SOUS AVATAR*/ .avatar_mess { display: block; width: 200px; height: 320px; margin-left: -10px; margin-right: 10px; overflow: hidden; background: #E4E4E4; border: 1px #3e1d19; transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -htm-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); box-shadow: 0px 0px 6px #000000; -moz-box-shadow: 0px 0px 6px #000000; -o-box-shadow: 0px 0px 6px #000000; -htm-box-shadow: 0px 0px 6px #000000; -webkit-box-shadow: 0px 0px 6px #000000; transform: all; -moz-transform: all; -o-transform: all; -htm-transform: all; -webkit-transform: all; transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; } .avatar_mess:hover { margin-left: 5px; transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -htm-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: all; -moz-transform: all; -o-transform: all; -htm-transform: all; -webkit-transform: all; transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; } .profil_mess { position: absolute; display: block; width: 190px; height: 310px; margin: auto; padding: 5px; overflow: auto; background: #E4E4E4; color: #96928D; font-size: 10px; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); transform: all; -moz-transform: all; -o-transform: all; -htm-transform: all; -webkit-transform: all; transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; } .profil_mess:hover { overflow: auto; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100); transform: all; -moz-transform: all; -o-transform: all; -htm-transform: all; -webkit-transform: all; transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; } .pseudo_mess { display: block; position: relative; z-index: 2; width: 190px; margin-top: -10px; margin-left: 10px; text-align: center; font-size: 20px; font-family: mistral; font-weight: normal; text-shadow: 0px 0px 3px #c5bea0; background-color: rgba(240,240,240,0.5); padding-top: 5px; border-left: 3px #371e1a; border-right: 3px #371e1a; border-top: 1px #371e1a; border-bottom: 1px #371e1a; box-shadow: 0px 0px 3px #000000; -moz-box-shadow: 0px 0px 3px #000000; -o-box-shadow: 0px 0px 3px #000000; -htm-box-shadow: 0px 0px 3px #000000; -webkit-box-shadow: 0px 0px 3px #000000; } /*FIN DU PROFIL*/ /* Images dans champs profil */ .profil_mess:hover img { max-width: 100%; } /*JUSTIFIER LE TEXTE AUTOMATIQUEMENT + MARGE*/ .postbody { display: block; padding-left: 15px; padding-right: 15px; text-align:justify; } /*SUPPRIMER LE MESS DERNIERE EDITION*/ -RETRAIT : ce CSS pose de nombreux problèmes - { display: none; } /* -------------------------------- QEEL -------------------------------- */ /*QEEL HAUTEUR LAST24h*/ #last24h { max-height: 100px; overflow-y: auto; } a:hover{text-decoration: none !important;} a {text-decoration: none !important;} a:link {text-decoration: none;} a:visited {text-decoration: none;} /*** MISE EN FORME LIENS AU SURVOL ***/ a:hover { text-decoration: none !important; } /*** MISE EN FORME FONT DU QEEL ***/ .fond_qeel { width: 800px; border-radius: 0px 0px 25px 25px; background-color: #E6E2E2; margin: auto; height: 620px; position: relative; } /*** MISE EN FORME TITRE PRINCIPAL ***/ .titre_principal { color: #000000; font-family: Megrim; font-size: 28; letter-spacing: 5px; text-align: center; } /*** MISE EN FORME SOUS-TITRE "Et à qui se fier ?" ***/ .titre_secondaire { color: #96928D; font-family: Megrim; font-size: 14px; text-align: center; } /*** MISE EN FORME BLOC STATISTIQUES ***/ .bloc_stat { background-color: #F0F0F0; padding: 15px; width: 200px; height: 150px; overflow: auto; font-size: 11px; border: 2px solid #CACACA; text-align: justify; color: #515151; position: absolute; left: 3em; z-index: 1; } /*** MISE EN FORME BLOC DES GROUPES ***/ .bloc_groupes { background-color: #F0F0F0; padding: 15px; width: 420px; height: 50px; overflow: auto; font-size: 20px; border: 2px solid #CACACA; text-align: center; font-family: 'Megrim', sans-serif; position: absolute; left: 15.5em; z-index: 1; } /*** MISE EN FORME BLOC DES CONNECTES LES 24H ***/ .bloc_connectes { background-color: #F0F0F0; padding: 15px; width: 420px; height: 50px; overflow: auto; font-size: 20px; border: 2px solid #CACACA; text-align: center; font-family: 'Six Caps', sans-serif; position: absolute; left: 15.5em; z-index: 1; } /*** COULEUR ET TRANSPARENCE DU FOND DES 24H ***/ #kaboum .row1 { background-color : transparent; } #kaboum span.gensmall { color: #515151; } /*** MISE EN FORME DES TITRES (simple + survol) ***/ .titre_bloc { font-family: 'Megrim', cursive; font-size: 24px; font-weight: bold; color: #C7BBC1; position: absolute; z-index: 2; margin-top: -18px; } .titre_bloc:hover { color: #87D021; } /*** GROUPES A ONGLETS ***/ /* Mise en forme des noms de groupe */ .groupe_onglet { display: inline-block; padding: 10px; } /* Mise en forme du bloc en transparence de description */ .contenu_groupe_onglet { padding: 15px; display: none; width: 315px; height: 115px; overflow: auto; font-size: 11px; color: #414141; text-align: justify; background-color: #CBC4C2; position: absolute; top: 14em; left: 21em; filter: alpha(opacity = 50); opacity: 0.5; } /* Mise en forme des liens */ .contenu_groupe_onglet a{ text-decoration: none !important; } /*** MISE EN FORME DES CREDITS ***/ .credits { text-align: right; margin-right: 10px; font-size: 8px; margin-top: 5px; } .credits a{ color: #B0C3AB; } /* -------------------------------- FIN QEEL -------------------------------- */ /*SUPPRIMER ESPACE ENTRE MENU ET HEADER*/ .bodylinewidth .bodyline > table:first-child tr:first-child > td span.gen, .bodylinewidth .bodyline > table:first-child tr:first-child > td br, .bodylinewidth .bodyline > table:first-child tr:first-child > td div.maintitle { display: none } body{ margin-top: 0px !important; } /*CATEGORIES*/ /**rajouter un espace entre les catégories**/ .forumline { margin-bottom: 10px; } /*mise en forme des catégories*/ .newpost, .descriptions { font-family: 'Lato', sans-serif; } .newpost .gensmall, .descriptions .gensmall { font-size: 12px !important; } .forumlink { font-family: 'Megrim', cursive; font-size: 20px; font-weight: 400 !important; } .forumlink a { width: 100%; border-bottom: 1px solid #363A3D; padding: 0 50px 6px 0; } .newpost, .descriptions, .sousforums_container { background-color: #E6E2E2; display: inline-block; } .newpost { width: 250px; } .descriptions { width: 400px; margin: 0 8px; height: 122px; overflow: hidden; } .description { height: 70px; margin-top: 10px; padding: 0 10px 0 0; text-align: justify; overflow: auto; } .infopost { float: left; } .lastpost-avatar-container { height: 120px; width: 72px; } .lastpost-avatar img { height: 120px; width: 72px; border-radius: 0; } .clickinfopost { margin-top: 5px; } .clickinfopost .gensmall { letter-spacing: -.5px; font-size: 11px !important; } .infonewpost { width: 170px; height: 120px; margin: 2px 5px 0 0; background-color: #EFEEEE; } .infonewpost a, .forumlink .gensmall, .sousforums_details a { text-transform: uppercase; font-family: Georgia; } .infonewpost a { font-size: 11px; } .forumlink .gensmall { margin-top: -4px; display: block; font-size: 9px !important; font-family: Arial; } .sousforums_container { width: 100px; height: 120px; /*ECART ENTRE LES SOUS FORUMS*/ overflow: auto; } .sousforums_details a { display: block; margin: 2px; padding: 2px; background-color: #EFEEEE; font-size: 9px !important; } .secondarytitle, .secondarytitle h2 { color: #363A3D; margin: 30px 0 0 0; padding: 10px; background-color: #E6E2E2; font-family: 'Megrim', cursive; font-size: 25px; font-weight: 400!important; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } /*FIN CATEGORIES*/ /*TOOLBAR*/ #fa_hide{display:none!important;} /*RETRAIT RÉSEAUX SOCIAUX SUR LA TOOLBAR*/ #fa_share { display: none!important; } #fa_textarea {display: none!important;} /*BOUTON "TOUT SELECTIONNER" */ .selectCode { float:right; text-transform: uppercase; cursor:pointer; } div.cont_code { clear: right; } /*AVATAR REPONSE RAPIDE*/ #av_quickreply img { left: 15px; position: relative; top: 5px; max-width: 120px; } #av_quickreply { float: left; position : absolute; } /* largeur de l'éditeur */ .sceditor-container { width: 610px!important; float: right; position : relative; } /* largeur de la zone de saisie de texte */ .sceditor-container iframe, .sceditor-container textarea { width: 89%!important; } /*FIN AVATAR REPONSE RAPIDE*/ /*CODE FICHE PRESA*/ .generalfiche {width: 500px; text-align: justify; background-color: #EFEFEF; line-height: 15px; border-bottom: 1px solid #CBCBCB; font-size: 12px; margin-left: 20px; margin-right: 20px; margin: auto;} .intro {font-size: 12px; color: #262626; text-align: center; font-family: 'Megrim'; margin-bottom: -50px; padding-bottom: 3px;} .nom {font-family: 'Mistral', cursive; margin-top:-70px; line-height:68px; font-size:30px; color:#E6E2E2; text-align: center;} .bloc_avatar {width: 220px; background-color: #E8E8E8; font-size: 9px; text-shadow: 1px 1px 1px rgb(191, 191, 192); text-align: center; padding: 5px;} .cadre_identité {text-transform: normal; overflow: auto; width: 245px; height: 320px; padding: 5px; font-size: 11px;} .titre_identité {font-size: 16px; border-bottom: 2px solid rgb(208, 207, 209); padding-bottom: 5px; font-family: Megrim; font-weight: bold;} .bloc_avis {margin-top: -8px; width: 229px; height: auto; /*overflow: auto;*/ text-align: justify; padding: 8px; background-color: #E8E8E8; border: 2px solid rgb(208, 207, 209); text-shadow: 1px 1px 1px rgb(191, 191, 192);} .titre {font-size: 18px; color: #NNNNNN; text-align: center; font-family: Megrim; font-weight : bold;} .bloc_texte {margin: auto; margin-top: -8px; width: 440px; height: auto; /*overflow: auto;*/ text-align: justify; padding: 8px; background-color: #E8E8E8; border: 2px solid rgb(208, 207, 209);} .bloc_HRP {margin: auto; width: 440px; padding: 5px; text-align: justify;} .titre_HRP {border-bottom: 2px solid rgb(208, 207, 209); padding-bottom: 3px; font-family: Megrim; text-align: right; font-weight: bold; font-size: 16px;} .creditsfiche {display: block; text-align: center; color: #EFEFEF; font-size: 2px; font-family: arial narrow; letter-spacing: 2px;} /*FIN CODE PRESA*/ /*CODES MISE EN FORME POSTS ADMIN*/ .grand_titre {font-family: 'Mistral', cursive; margin-top:-80px; line-height:68px; font-size:42px; color:#E6E2E2; text-align:center;} .petit_titre {font-family: 'Mistral', cursive; margin-top:-30px; line-height:37px; font-size:17px; color:#E6E2E2; text-align:center;} .sous_titre_bleu {font-family: 'Megrim', cursive; font-size:18px; color:#1DA8FE; text-align:center ; font-weight:bold;} .sous_titre_orange {font-family: 'Megrim', cursive; font-size:18px; color:#FF9500; text-align:center ; font-weight:bold;} .sous_titre_vert {font-family: 'Megrim', cursive; font-size:18px; color:#87D021; text-align:center ; font-weight:bold;} .bodypost {width:425px; text-align:justify; font-family: arial; font-size:12px;} /*FIN CODES POSTS ADMIN*/ /*AFFICHE TITRE CATE TEXTUEL AU LIEU D'IMAGE DANS LES SUJETS*/ a.forumlink span, a.forumtitle span { display: none; } a.forumlink img, a.forumtitle img { display: inline!important; } a.cattitle span, .secondarytitle h2 span, .table-title h2 span, .maintitle h2 span, .page-title h2 span { display: none; } a.cattitle img, .secondarytitle h2 img, .table-title h2 img, .maintitle h2 img, .page-title h2 img { display: inline!important; } /*-------FIN-------*/ /*SUPPRIMER DEUX POINTS DANS CHAMPS PROFIL */ .ChampsProfil > span { white-space:normal!important; color:#E6E2E2; font-size: 2px; } .ChampsProfil > span > span { font-size:10px; } /*------FIN------*/

par MlleAlys Mar 2 Mai 2017 - 19:25

Bonjour,
Dans ce cas, mieux vaut placer l'image en fond des titres via le css :

- dans le template, localisez et supprimer la partie suivante :

Code:: <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="https://i.imgbox.com/qIxDyY1i.png"/></td></tr></table>

- dans le css, ajoutez les codes suivants :

Code:: caption.secondarytitle { background: url(https://i.imgbox.com/qIxDyY1i.png) #e6e2e2; margin: 0; padding: 0; background-size: 810px; height: 102px; background-repeat: no-repeat; border-radius: 7px 7px 0 0; } caption.secondarytitle h2 { background: none; display: block; margin: 0; padding: 0; }

par Jay K. Mar 2 Mai 2017 - 20:02

Ca fonctionne parfaitement !! Un grand grand merci pour votre réponse, ça m'a enfin débloqué !
C'est bien plus simple que tout ce que j'ai pu essayer... Le problème est résolu du coup Very Happy