Images de catégories
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Images de catégories
Bonjour à tout le monde !
Je viens vous voir parce que je n'arrive pas à régler un problème alors que j'ai chercher des solutions sur plusieurs forums en parcourant les différents sujets, j'ai changé plusieurs fois les codes, tester un peu tout et n'importe quoi et je n'arrive pas à mettre la main sur mon problème...
Alors, je voulais en fait mettre une image qui "couvrirait" toute la largeur du forum pour faire les titres des catégories, malheureusement l'image s'arrête au niveau du "dernier message"
Image du problème :
L'image rouge du bas se met parfaitement et j'aimerai que celle du haut fasse pareil... Et je n'y arrive absolument pas... =/
C'est mon forum de test sous firefox, je suis fondatrice et c'est une version PHBB2.
Je vous donne mon template index_box
Et mon CSS
J'espère que je n'oublie rien et que je suis assez clair dans la description de mon problème (:
Si quelqu'un peut m'aider ce serait vraiment génial !
Merci pour ceux qui passeront par là et essayeront de m'aider
Bonne soirée à tous !
Je viens vous voir parce que je n'arrive pas à régler un problème alors que j'ai chercher des solutions sur plusieurs forums en parcourant les différents sujets, j'ai changé plusieurs fois les codes, tester un peu tout et n'importe quoi et je n'arrive pas à mettre la main sur mon problème...
Alors, je voulais en fait mettre une image qui "couvrirait" toute la largeur du forum pour faire les titres des catégories, malheureusement l'image s'arrête au niveau du "dernier message"
Image du problème :
L'image rouge du bas se met parfaitement et j'aimerai que celle du haut fasse pareil... Et je n'y arrive absolument pas... =/
C'est mon forum de test sous firefox, je suis fondatrice et c'est une version PHBB2.
Je vous donne mon 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 --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </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">
<span class="gensmall"></span><br />
<span class="gensmall">{catrow.forumrow.LAST_POST}
<br />{catrow.forumrow.POSTS} messages || {catrow.forumrow.TOPICS} sujets.</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="http://img15.hostingpics.net/pics/741939CFB2.png" alt="" height="50px" width="930px" /><br><br><!-- END tablefoot --><!-- END catrow -->
Et mon CSS
- Code:
a:hover{text-transform:uppercase;}
a {font-variant: small-caps;}
body {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: top center;
}
.forumline {width: 930px;}
a.forumlink:link, a.forumlink:visited {
font-family: serif;
text-transform : uppercase;
text-align: center;
font-size: 100%;
border-bottom: 5px solid #410945;
color: #410945;
letter-spacing: 3px;
display: block;
-moz-border-radius:10px;
}
a.forumlink:hover, a.forumlink:hover:visited {
background-image: url("");
color: #5D406B;
text-align: center;
display: block;
border-bottom: 5px solid #5D406B;
-moz-border-radius:10px;
}
a.mainmenu {
font-family: arial;
text-align: center;
font-size: 70%;
background-color: #;
color: #B38F9C;
-moz-border-radius-topleft:9px;
-moz-border-radius-topright:9px;}
a.mainmenu:hover {
background-image: url("");
text-align: center;}
a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }
.quote{
font-family: Tahoma;
font-size: 12px;
color: #B38F9C;
line-height: 125%;
background-image: url("");
border: #b84a72;
border-style: solid;
border: 1px #b84a72;
dotted;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
-moz-border-radius:6px;}
.code{
font-family: Courier,Courier New,sans-serif;
font-size: 11px;
color: #B38F9C;
background-image: url("");
border: #b84a72;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border: 1px #b84a72;
dotted;
-moz-border-radius:6px;}
input,textarea, select {
-moz-border-radius-bottomleft:9px;
-moz-border-radius-bottomright:9px;
-moz-border-radius-topleft:9px;
-moz-border-radius-topright:9px;
}
a.mainmenu:link, a.mainmenu:visited{
font-family :Georgia;
text-align:left;}
.statistiques{
border:0px;
background-image: url("http://i63.servimg.com/u/f63/16/03/03/56/pa1c6r10.gif");
background-repeat: no-repeat;
background-position: center;
height:260px;}
.groupes{
background-color:#B9BABF;border: 1px #D0D0D0 dotted;
-moz-border-radius : 15px 15px 15px 15px;
height:40px;padding-right:5px;padding-left:5px;padding-bottom:1px;
font-size:12px;font-weight: bold;text-align:center;
text-decoration: none !important;}
.boxtitle{
font-family: serif;
text-align: center;
background-image: url("http://i63.servimg.com/u/f63/16/03/03/56/pa1c6r10.gif");
font-size:15px;
border-bottom: 3px double #4A2606;
color: #DCB77F;
display: block;}
.box {
background-image: url("http://i63.servimg.com/u/f63/16/03/03/56/pa1c6r10.gif");
color:#DCB77F;
font-size:11px;
margin:0;
padding:3px 10px;
}
.main
{font-family: serif;
text-transform : uppercase;
text-align: center;
font-size: 100%;
background-color: #DCB77F;
border-bottom: 2px solid #A6A4A4;
color: #FCFCFC;
letter-spacing: 1px;
display: block;}
.main:hover
{background-color: #A6A4A4;
text-align: center;
display: block;
border-bottom: 2px solid #6A6E80;
}
a.imginfo {
position: relative;
color: #4A2606;
text-decoration: none;
border-bottom: 0px #7d7d7d solid;
}
a.imginfo span {
display: none;
}
a.imginfo:hover {
background: none;
z-index: 999;
cursor: help;
}
a.imginfo:hover span {
display: inline;
position: absolute;
white-space: nowrap;
top: 5px;
left: 15px;
background: #6A6E80;
color: 7d7d7d;
padding: 3px;
border: 0px solid grey;
border-left: 5px solid #b6b6b6;
border-right: 3px solid #b6b6b6;
border-top: 3px solid #b6b6b6;
border-bottom: 5px solid #b6b6b6;
}
.abc {border-bottom: 5px solid #ffffff}
.def {
background-color: #ffffff;
-moz-border-radius:10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px;
text-transform:uppercase;}
.postdetails.poster-profile a img {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border: 5px solid #B38F9C;
}
tr.post span.gensmall { display: none; }
th {
-moz-border-radius-topleft: 20%;
-moz-border-radius-topright: 20%;
border-top-left-radius: 20%;
border-top-right-radius: 20%;
}
td.row1{
background-image: url("");
}
td.row2{
background-image: url("");
}
td.row3{
background-image: url("");
}
td.row3Right{background-image : url();}
.name a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:0;
background:#734666 none repeat scroll 0 0;
display:block;
font-variant:normal;
letter-spacing:1px;
text-align:center;
}
.name {
text-transform: UPPERCASE;
font-size: 10px;
text-align: center;
}
.postbody {
display: block;
padding-left: 40px;
padding-right: 40px;
text-align:justify;}
.profilentour {
text-align:center;
padding:9px;
background-image: url("");
background-color:#B38F9C;
-moz-border-radius:10px;
-webkit-border-radius
border-radius
}
a.info {
position: relative;
color: black;
text-decoration: none;
}
a.info span {
display: none; /* on masque l'infobulle */
font-size: 12px;
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}
a.info:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 10px; /* on positionne notre infobulle */
left: 5px;
background-image: url("");
border-bottom: 5px solid #000000;
-moz-border-radius:10px;
color: #4A2606;
padding: 3px;
border: 1px solid #;
border-left: 4px solid #;
}
.signature_div img {
max-width:500px;
}
/*PA en onglet */
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #;
border: 2px solid #B38F9C;
cursor: pointer;
margin-bottom: -1px;
list-style: none;
-moz-border-radius:10px;
}
.mon_onglet:hover{
background: #ffffff;
}
.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #190C1F;
border-top: 2px solid #B38F9C;
border-right: 2px solid #B38F9C;
border-left: 2px solid #B38F9C;
border-bottom: 2px solid #B38F9C;
cursor: pointer;
margin-bottom: -1px;
list-style: none;
-moz-border-radius:10px;
}
.clear{
clear: both;
}
.mon_contenu{
color: #;
background: #;
border: 2px solid #B38F9C;
padding: 10px;
line-height: normal;
font-size: 11px;
-moz-border-radius:10px;
}
#mes_contenus, #mes_onglets{
width: 650px;
margin: auto;}
/*Barre Navig Top*/
.navtop {
top : 0px;
position: fixed;
valign : left ;
width : 100% ;
font-size: 20px;
color: #000;
background-image: url("");
}
/* CATEGORIES */
.secondarytitle {
background-image: url('http://img15.hostingpics.net/pics/945523CFB.png');
height:60px; width: 930px;
}
J'espère que je n'oublie rien et que je suis assez clair dans la description de mon problème (:
Si quelqu'un peut m'aider ce serait vraiment génial !
Merci pour ceux qui passeront par là et essayeront de m'aider
Bonne soirée à tous !
Dernière édition par So_Cara le Dim 20 Mai 2012 - 17:13, édité 1 fois
Re: Images de catégories
Bonsoir,
Remplacez votre index box par celui ci:
Il suffisait de retirer cette partie:
et de mettre un colspan de 3 ici:
NB: Si la largeur de la colonne des derniers messages ne vous convient pas, il suffit de mettre un min-width dans le td concerné.
Cordialement.
Remplacez votre index box par celui ci:
- 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 --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </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">
<span class="gensmall"></span><br />
<span class="gensmall">{catrow.forumrow.LAST_POST}
<br />{catrow.forumrow.POSTS} messages || {catrow.forumrow.TOPICS} sujets.</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="http://img15.hostingpics.net/pics/741939CFB2.png" alt="" height="50px" width="930px" /><br><br><!-- END tablefoot --><!-- END catrow -->
Il suffisait de retirer cette partie:
- Code:
<th nowrap="nowrap" width="150"><div style="width:150px;"></div></th>
et de mettre un colspan de 3 ici:
- Code:
<th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
NB: Si la largeur de la colonne des derniers messages ne vous convient pas, il suffit de mettre un min-width dans le td concerné.
Cordialement.
Re: Images de catégories
Oh merci ! C'est parfait !
Je me doutais que c'était dû à cette partie mais je ne savais pas du tout par quoi la remplacer... Je ne suis pas vraiment au point niveau template ^^
Sinon, effectivement la dernière colonne à une taille très petite.
Je pensais qu'il fallait mettre le min-width ici
Désolée donc, de encore demander de l'aide, normalement après, tout sera ok =/
Merci encore !
Bonne soirée.
Je me doutais que c'était dû à cette partie mais je ne savais pas du tout par quoi la remplacer... Je ne suis pas vraiment au point niveau template ^^
Sinon, effectivement la dernière colonne à une taille très petite.
Je pensais qu'il fallait mettre le min-width ici
- Code:
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall"></span><br />
<span class="gensmall">{catrow.forumrow.LAST_POST}
<br />{catrow.forumrow.POSTS} messages || {catrow.forumrow.TOPICS} sujets.</span>
</td>
Désolée donc, de encore demander de l'aide, normalement après, tout sera ok =/
Merci encore !
Bonne soirée.
Re: Images de catégories
Autant pour moi, j'ai fini par trouver la solution à mon problème !
Merci encore pour tout
Sujet résolu !
Merci encore pour tout
Sujet résolu !
Sujets similaires
» mettre les titres des catégories sur les images d'en-tête des catégories
» images par catégories
» Catégories en images
» Images dans les catégories ?
» Taille des images de mes catégories
» images par catégories
» Catégories en images
» Images dans les catégories ?
» Taille des images de mes catégories
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum