Marge entre image catégorie et corps catégorie.
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
Marge entre image catégorie et corps catégorie.
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 :
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 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
CSS :
Je précise par ailleurs que mon forum est en PHPBB2. Je vous remercie à l'avance pour votre aide ! ^^ Bonne journée/soirée.
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 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"> </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
Re: Marge entre image catégorie et corps catégorie.
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 :
Ce qui donne avec le css corrigé :
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- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Marge entre image catégorie et corps catégorie.
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)
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)
Sujets similaires
» espace entre l'image du bas de catégorie et la catégorie
» Espace entre le haut de catégorie et le corps de catégorie
» Espace entre entête catégorie et corps du forum
» marge de l'image d'une catégorie
» Espace entre image en-tête catégorie et titre catégorie
» Espace entre le haut de catégorie et le corps de catégorie
» Espace entre entête catégorie et corps du forum
» marge de l'image d'une catégorie
» Espace entre image en-tête catégorie et titre catégorie
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