Marge entre image catégorie et corps catégorie.

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Marge entre image catégorie et corps catégorie.

Message par Selywen Jeu 17 Juil 2014 - 0:51

Bonjour à toutes et à tous !

Voila, après quelques recherches pour tenter de résoudre tout seul mon problème, je n'ai toujours pas trouvé de solution adéquate. Je m'explique ; J'ai modifié mon template index-box pour me permettre de remplacer le titre des catégories par des images. Le problème, est qu'une sorte de marge s'est créée entre l'image et le corps de la catégorie. Voici une capture d'écran pour illustrer :

Spoiler:

La marge indésirable en question est la zone en rouge. J'ai aussi modifié mon CSS, mais même en essayant de trifouiller sur les margin-bottom, ou autre chose dans le genre, il n'y a strictement rien à faire Sad Je n'ai pas de solution. Pourriez-vous m'aider à supprimer cet (horrible) espace ? Je vous fourni aussi mon template et mon CSS :

Template Index_box
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <!-- 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 -->
                        <!-- END switch_user_logged_in -->
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categotitre">{catrow.tablehead.L_FORUM}</div><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th nowrap="nowrap" width="50"></th>
      <th nowrap="nowrap" width="50"></th>
      <th nowrap="nowrap" width="150"><div style="width:150px;"></div></th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" 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>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>

      <td class="row3 over" align="center" valign="middle" height="50">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
      <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
         
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

CSS :
Code:
/*coller cadre forum en haut et en bas*/

body{
margin-top: 5px;
margin-bottom: 0px;
}

.bodyline {padding-top:5px !important;}

#i_logo {
margin-top: 5px;
margin-bottom: 0px;
}

body{
margin-top: 5px;
margin-bottom: 0px;
}

/*coller la bannière en haut et sur les cotés*/
.bodyline {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}

/*cursuer de la sourie*/
body { cursor: crosshair }
a:hover { cursor:ne-resize; }

   
/*barre de navigation*/
.navig {
        position:fixed;
        top:-4px;
        width:100%;
        background-color: #ffffff;
        border-bottom:4px solid #b5abaa;
left: 0px;
        }
     
  /*CONTOUR Du forum*/
.bodyline
{border-left: 4px solid #4D4D4D;
border-right: 4px solid #4D4D4D;
border-top: none;
border-bottom: none;}
     
  /*image fond forum*/
                                         
 .bodyline {
background-attachment: fixed;
background-image: url("http://img15.hostingpics.net/pics/686321pat.png");
background-repeat: repeat;
background-position: top left;
}
td.row1 {
background-repeat: repeat;
background-image: url("http://img15.hostingpics.net/pics/589547pat2.png");
background-position: center;
}
td.row2 {
background-repeat: repeat;
background-image: url("http://img15.hostingpics.net/pics/589547pat2.png");
background-position: center;
}
td.row3 {
background-repeat: repeat;
background-image: url("http://img15.hostingpics.net/pics/589547pat2.png");
background-position: center;
}

body.chatbox {
background-color: #fff;!important}
body {
background-repeat: repeat;
background-position:center top;
}

body.chatbox
{background-image: url("http://img15.hostingpics.net/pics/589547pat2.png");
background-color: transparent;}

/* QEEL */

#groups
{
  width: 200px;
  height: 200px;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
  -htm-border-radius: 100px;
  -webkit-border-radius: 100px;
  border: 1px solid #353535;
  box-shadow: 3px 3px 3px #000000;
  background: url(http://sd-2.archive-host.com/membres/up/210852277737036210/ProtoFow/Image_Structure/fond_groupes2.png) center center no-repeat #212121;
  /* image et couleur du cercle des groupes */
  overflow: hidden;
  opacity: 0.6;
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
filter: alpha(opacity=60);
  transition: 500ms;
  -o-transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -webkit-transition: 500ms;
}
#groups:hover
{
    opacity: 0.9;
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
filter: alpha(opacity=90);
  transition: 500ms;
  -o-transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -webkit-transition: 500ms;
}
.groups_content
{
  display: block;
  width: 200px;
  height: 160px;
  padding: 20px 0px;
  background: #212121;
  line-height: 11px;
  opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
  transition: 500ms;
  -o-transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -webkit-transition: 500ms;
}
.groups_content:hover
{
      opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
  transition: 500ms;
  -o-transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -webkit-transition: 500ms;
}
.groups_content span
{
  display: block;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  font: Verdana;
  margin-bottom: 10px;
}
/* mettez ci-dessous la couleur d écriture de chaque groupe et si vous en avez ajouté dans le template n oubliez pas
d indiquer sa couleur ici */
.g1
{
  color: #a93434;
}
.g2
{
  color: #cc8036;
}
.g3
{
  color: #4fad32;
}
.g4
{
  color: #3964c5;
}
.g5
{
  color: #8c54b3;
}
.g6
{
  color: #898989;
}
.qeel_titre
{
  width: 375px;
  background: #212121; /* couleur de fond du titre de QEEL */
  padding-left: 100px;
  margin: 10px 0px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 2px;
  font-size: 14px;
  font-weight: normal !important;
  color: #e6e6e6 !important; /* couleur du texte de titre de QEEL */
}
.qeel_content
{
  width: 90%;
  margin: auto;
  text-align: justify;
}

#page-footer a
{
  font-size: 10px;
  color: #484848 !important; /* couleur des liens de bas de page */
}
#page-footer a:hover
{
  color: #9f9f9f !important; /* couleur des liens survolés en bas de page */
}


/* ce qui suit enlève les bordures par défaut présentes sur les tables */
.row3Right
{
border: none !important;
}
.thHead
{
border: none !important;
}
.thCornerL, .thCornerR, .thTop
{
border: none !important;
}
.thLeft, .thRight
{
border-left: none !important;
border-right: none !important;
}
.catLeft, .catRight
{
border: none! important;
}
.catHead
{
border: none !important;
margin: 0px auto -5px;
}
.catBottom
{
border: none !important;
}

.titre_cat {
        margin-bottom: 0px;
}

.categotitre {
 width:50%;                  (largeur de votre forum)
 text-align:center;            (Permet de centrer votre image)
 margin-bottom:-5px ;      (Permet d'aligner votre image titre en fonction de la marge du haut)

Dans cette partie du code de CSS, vous pouvez également rajouter

background : #ffffff ;        (Si vous n'avez pas mis d'image pour encadrer vos catégories, vous pouvez mettre une couleur en fond de votre image titre au cas où cette dernière serait sans fond c'est à dire juste avec le nom du titre)
margin-left : 20px;            (Permet d'aligner en fonction de la marge de gauche, elle pourra être utile si vous avez mis un cadrage à vos catégories et que vous devez installer votre titre image à l'intérieur)
}

.categotitre img {
 display: inline!important;
  text-align: center; 
}

.categotitre .textecatego {
  display: none;
  text-align: center; 
}
.textecatego {
 display: inline;
 text-align:center; 
}

Je précise par ailleurs que mon forum est en PHPBB2. Je vous remercie à l'avance pour votre aide ! ^^ Bonne journée/soirée.


Dernière édition par Selywen le Jeu 17 Juil 2014 - 1:30, édité 1 fois
avatar

Selywen
Nouveau membre

Messages : 2
Inscrit(e) le : 17/07/2014

http://mysterelandtest.forumactif.org/
Selywen a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Marge entre image catégorie et corps catégorie.

Message par MlleAlys Jeu 17 Juil 2014 - 1:16

Bonjour,
vous avez des commentaires dans votre css qui sont placés entre parenthèses : cela fausse le code, toute cette partie n'est pas correctement prise en compte par les navigateurs ^^" Les commentaires doivent être placés entre /* ..... */

pour ce qui du problème de l'espace, il s'agit majoritairement d'une mage par défaut pour le titre h2, puis quelques pixels entre les bordures du tableau. Vous pouvez ajouter ce code dans votre css pour corriger :
Code:
div.categotitre h2 {
  margin: 0;  /*supprime la marge du titre*/
  position: relative;  /*permet de repositionner le titre*/
  top: 3px;  /*descend le titre de 3 pixels*/
}

Ce qui donne avec le css corrigé :
Code:
/*coller cadre forum en haut et en bas*/
 body {
    margin-top: 5px;
    margin-bottom: 0px;
}
.bodyline {
    padding-top:5px !important;
}
#i_logo {
    margin-top: 5px;
    margin-bottom: 0px;
}
body {
    margin-top: 5px;
    margin-bottom: 0px;
}
/*coller la bannière en haut et sur les cotés*/
 .bodyline {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}
/*cursuer de la sourie*/
 body {
    cursor: crosshair
}
a:hover {
    cursor:ne-resize;
}
/*barre de navigation*/
 .navig {
    position:fixed;
    top:-4px;
    width:100%;
    background-color: #ffffff;
    border-bottom:4px solid #b5abaa;
    left: 0px;
}
/*CONTOUR Du forum*/
 .bodyline {
    border-left: 4px solid #4D4D4D;
    border-right: 4px solid #4D4D4D;
    border-top: none;
    border-bottom: none;
}
/*image fond forum*/
 .bodyline {
    background-attachment: fixed;
    background-image: url("http://img15.hostingpics.net/pics/686321pat.png");
    background-repeat: repeat;
    background-position: top left;
}
td.row1 {
    background-repeat: repeat;
    background-image: url("http://img15.hostingpics.net/pics/589547pat2.png");
    background-position: center;
}
td.row2 {
    background-repeat: repeat;
    background-image: url("http://img15.hostingpics.net/pics/589547pat2.png");
    background-position: center;
}
td.row3 {
    background-repeat: repeat;
    background-image: url("http://img15.hostingpics.net/pics/589547pat2.png");
    background-position: center;
}
body.chatbox {
    background-color: #fff;
    !important
}
body {
    background-repeat: repeat;
    background-position:center top;
}
body.chatbox {
    background-image: url("http://img15.hostingpics.net/pics/589547pat2.png");
    background-color: transparent;
}
/* QEEL */
 #groups {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -o-border-radius: 100px;
    -htm-border-radius: 100px;
    -webkit-border-radius: 100px;
    border: 1px solid #353535;
    box-shadow: 3px 3px 3px #000000;
    background: url(http://sd-2.archive-host.com/membres/up/210852277737036210/ProtoFow/Image_Structure/fond_groupes2.png) center center no-repeat #212121;
    /* image et couleur du cercle des groupes */
    overflow: hidden;
    opacity: 0.6;
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    filter: alpha(opacity=60);
    transition: 500ms;
    -o-transition: 500ms;
    -moz-transition: 500ms;
    -htm-transition: 500ms;
    -webkit-transition: 500ms;
}
#groups:hover {
    opacity: 0.9;
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    filter: alpha(opacity=90);
    transition: 500ms;
    -o-transition: 500ms;
    -moz-transition: 500ms;
    -htm-transition: 500ms;
    -webkit-transition: 500ms;
}
.groups_content {
    display: block;
    width: 200px;
    height: 160px;
    padding: 20px 0px;
    background: #212121;
    line-height: 11px;
    opacity: 0;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    filter: alpha(opacity=0);
    transition: 500ms;
    -o-transition: 500ms;
    -moz-transition: 500ms;
    -htm-transition: 500ms;
    -webkit-transition: 500ms;
}
.groups_content:hover {
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    transition: 500ms;
    -o-transition: 500ms;
    -moz-transition: 500ms;
    -htm-transition: 500ms;
    -webkit-transition: 500ms;
}
.groups_content span {
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    font: Verdana;
    margin-bottom: 10px;
}
/* mettez ci-dessous la couleur d écriture de chaque groupe et si vous en avez ajouté dans le template n oubliez pas
d indiquer sa couleur ici */
 .g1 {
    color: #a93434;
}
.g2 {
    color: #cc8036;
}
.g3 {
    color: #4fad32;
}
.g4 {
    color: #3964c5;
}
.g5 {
    color: #8c54b3;
}
.g6 {
    color: #898989;
}
.qeel_titre {
    width: 375px;
    background: #212121;    /* couleur de fond du titre de QEEL */
    padding-left: 100px;
    margin: 10px 0px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 2px;
    font-size: 14px;
    font-weight: normal !important;
    color: #e6e6e6 !important;    /* couleur du texte de titre de QEEL */
}
.qeel_content {
    width: 90%;
    margin: auto;
    text-align: justify;
}
#page-footer a {
    font-size: 10px;
    color: #484848 !important;    /* couleur des liens de bas de page */
}
#page-footer a:hover {
    color: #9f9f9f !important;    /* couleur des liens survolés en bas de page */
}


/* ce qui suit enlève les bordures par défaut présentes sur les tables */
 .row3Right {
    border: none !important;
}
.thHead {
    border: none !important;
}
.thCornerL, .thCornerR, .thTop {
    border: none !important;
}
.thLeft, .thRight {
    border-left: none !important;
    border-right: none !important;
}
.catLeft, .catRight {
    border: none! important;
}
.catHead {
    border: none !important;
    margin: 0px auto -5px;
}
.catBottom {
    border: none !important;
}
.titre_cat {
    margin-bottom: 0px;
}
div.categotitre h2 {
    margin: 0;  /*supprime la marge du titre*/
    position: relative;  /*permet de repositionner le titre*/
    top: 3px;  /*descend le titre de 3 pixels*/
}
.categotitre img {
    display: inline!important;
}
.categotitre .textecatego {
    display: none;
    text-align: center;
}
.textecatego {
    display: inline;
    text-align:center;
}
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Marge entre image catégorie et corps catégorie.

Message par Selywen Jeu 17 Juil 2014 - 1:30

Pour les commentaires dans le CSS, cela m'a aussi paru étrange mais vu que c'était un CSS fourni d'office avec le thème, et que j'avais peur de trop le trifouiller et de tout faire planter, j'ai rien changé de ce coté là x) Mais je retiendrai ça à l'avenir.

Le problème est résolu, votre version du CSS a corrigé le problème ^^ (Il n'y a plus cette espèce de marge entre l'image et le haut de la catégorie). Merci beaucoup ! x)
avatar

Selywen
Nouveau membre

Messages : 2
Inscrit(e) le : 17/07/2014

http://mysterelandtest.forumactif.org/
Selywen a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum