Sujets similaires

Bonjour! J'ai un problème par rapport à mes images du haut de mes catégories, que je n'arrive pas à comprendre comment corriger le tout. J'aimerais avoir un effet semblable que celui sur sos-rpg, c'est-à-dire, une image pour chaque catégories (les titres fait à photoshop) et une image de haut des catégories. Voilà le résultat:

Spoiler:

J'aimerais que le résultat final soit comme cela:

Spoiler:

Je ne sais pas vraiment quoi faire et j'ai peur d'empirer mon cas au lieux de l'améliorer Sad

En plus, mon image est un peu plus vers la gauche que centré. Pouvez-vous m'aider? Voici mon Index_box:

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<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>

<img src="http://img845.imageshack.us/img845/7287/imgcategoriehaut01.png">
<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>

</tr>


<tr>
   
   <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <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>


<tr>
   <tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>


<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<table width="100%" cellspacing="5"><tr><td class="icones" 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>
<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}>
<div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
<span class="gensmall">

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<td class="stats">
<span class="gensmall">Sujets : {catrow.forumrow.TOPICS}</span><br/>
<span class="gensmall">Messages : {catrow.forumrow.POSTS}</span> <br/><br/>
<div class="lastm"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
</td></tr></table>
</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><img src="{SPACER}" alt="" height="5" width="1" />

Bonjour, j'aurais une solution à votre problème, mais cela implique de créer une nouvelle class dans votre css!

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<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="entete">{catrow.tablehead.L_FORUM}</div>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">


<tr>

<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<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>


<tr>
<tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>


<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<table width="100%" cellspacing="5"><tr><td class="icones" 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>
<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}>
<div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
<span class="gensmall">

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<td class="stats">
<span class="gensmall">Sujets : {catrow.forumrow.TOPICS}</span><br/>
<span class="gensmall">Messages : {catrow.forumrow.POSTS}</span> <br/><br/>
<div class="lastm"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
</td></tr></table>
</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><img src="{SPACER}" alt="" height="5" width="1" />

Code:: .entete {
background-image: URL('http://img845.imageshack.us/img845/7287/imgcategoriehaut01.png');
margin-bottom: 0px;
}

En gros, j'ai retiré la ligne de titre et, à la place de votre image, j'ai créé une div qui encadre votre titre ayant en propriété de fond votre image.
Toutefois, il va probablement falloir ajouter des marges pour que votre image soit centrée au-dessus de vos catégories. En ce moment, elle devrait être à gauche, logiquement. Je n'ai pas pu tester, je n'ai pas de forum de test disponible, désolée ^^' Normalement, ça devrait toutefois fonctionner parce que c'est ce que j'ai fait pour mon propre forum (approximativement) et ça fonctionne nickel (;

C'est normal que j'aille ça?

Spoiler:

Mes titres de catégories sont maintenant placé vers la gauche alors qu'ils devraient être centré, je ne vois plus du tout les images des catégories (les titres) et l'image ne s'affiche qu'en mince partie du haut. Sad

Ah oui, c'est mon erreur, j'ai oublié des lignes de code ><
Voici la correction

Code:: .entete {
background-image: URL('http://img845.imageshack.us/img845/7287/imgcategoriehaut01.png');
margin-bottom: 0px;
height: 156px;
width: 912px;
text-align: center;
}

Déjà, l'affichage devrait être plus ressemblante à ce qu'il doit être ^^

On y est presque! Le titre s'est positionné au dessus de l'image au lieu d'être directement sur l'image et il y a un mini espace dessous Sad

J'aurais aimé que l'image des catégories soit collé au contour. L'image est légèrement décalé vers la gauche aussi.

Ça donne ça:

Spoiler:

et je veux ça:

Spoiler:

Pour ce qui est du titre, c'est qu'il faut rajouter la propriété "padding-top" à votre class. Je vous ai mis une valeur approximative, mais il faudra peut-être ajuster la valeur.
Pour ce qui est de l'espace, vous avez peut-être une marge autour de vos catégories (parce que normalement il ne devrait pas y avoir d'espace puis que j'ai indiqué que la marge en bas de l'image doit être de zéro). Sinon, je ne sais pas d'où vient le problème puisqu'il n'y a pas de retour à la ligne. Je laisserai quelqu'un d'autre passer alors, je ne fais que me débrouiller en codage, mes connaissances ne sont peut-être pas suffisantes. Oh, il y a aussi moyen de donner une valeur négative à la marge, mais disons que c'est à l'essai-erreur que vous trouverez la bonne valeur et il vaut mieux chercher le problème, plutôt que faire une telle manipulation!
En ce qui concerne le décalage à gauche, il faut, comme je l'ai précisé plus tôt, ajouter une marge à gauche!

Code:: .entete {
background-image: URL('http://img845.imageshack.us/img845/7287/imgcategoriehaut01.png');
margin-bottom: 0px;
height: 156px;
width: 912px;
text-align: center;
padding-top: 80px;
margin-left: ??px;
}

Je vous laisse le soin de trouver la valeur pour la marge à gauche!

J'arrive pas à comprendre Sad

Ça me montre l'image en double:

Spoiler:

Si j'enlève le padding-top mais que je place le reste, tout est beau à l'exception de l'emplacement du titre:

Spoiler:

Eh bien c'est curieux... hum... essayons ainsi:

Code:: .entete {
background-image: URL('http://img845.imageshack.us/img845/7287/imgcategoriehaut01.png');
margin-bottom: 0px;
height: 156px;
width: 912px;
text-align: center;
padding-top: 80px;
margin-left: ??px;
overflow: hidden;
}

Je suis tout sauf certaine de la validité de cette manipulation, mais bon, il vaut mieux essayer que ne rien faire!

Ça fait le même résultat que la dernière fois Sad

L'image double.

Oh je sais! Je crois ^^

Code:: .entete {
background-image: URL('http://img845.imageshack.us/img845/7287/imgcategoriehaut01.png');
background-repeat: no-repeat;
margin-bottom: 0px;
height: 156px;
width: 912px;
text-align: center;
padding-top: 80px;
margin-left: ??px;
}

Si jamais il reste un espace vilain, je crois savoir comment arranger ^^

Ça a marché^^ Manque plus qu'un détail, l'espace entre l'image et les forums:

Spoiler:

ainsi, ça devrait être bon (:

Code:: .entete {
background-image: URL('http://img845.imageshack.us/img845/7287/imgcategoriehaut01.png');
background-repeat: no-repeat;
margin-bottom: 0px;
height: 76px;
width: 912px;
text-align: center;
padding-top: 80px;
margin-left: ??px;
}

Yayyy ça fonctionne Very Happy

Mercii!^^ On y est arrivé Very Happy

O_O Juste un truc. Les titres de mes catégories étaient des images et maintenant elles sont retournées à l'état texte. C'est normal?

Hum non, ce n'est pas normal, mais ça ne devrait pas être en lien avec le css ni le template. À moins que tu aies mis un code css pour modifier quelque chose par rapport à cela (par exemple, ne les faire apparaître que sur la page d'accueil).
Si c'est le cas passe-moi ton code css. Sinon, je ne sais pas.

Ah, j'ai oublié de mentionner tout à l'heure. ton image fait 156px de haut, alors tout ce que j'ai fait pour ajuster le problème, c'est que j'ai enlevé 80px. Toutefois, si tu changes la valeur du padding, il va falloir changer la hauteur ^^

D'accord^^ Mais mon image fait 160px de haut O_O Pour le css, le voilà:

Code:: .entete {
background-image: URL('http://img543.imageshack.us/img543/7287/imgcategoriehaut01.png');
background-repeat: no-repeat;
margin-bottom: 0px;
height: 76px;
width: 912px;
text-align: center;
padding-top: 80px;
margin-left: ??px;
}

/*coller cadre forum en haut et en bas*/

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

.secondarytitle{
width: 40px; /* hauteur de ta barre */
}

.code {
background-color: #718293; /* couleur noire du fond */
border:1px # dashed; /* bordure blanche en traits peu épais */
-border-radius: 0px; /* tous les côtés sont arrondis */
-moz-border-radius: 0px; /* tous les côtés sont arrondis */
-webkit-border-radius: 0px; /* tous les côtés sont arrondis */
color: #ffffff; /* couleur du texte blanche */
}

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

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

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

.navig {
position: fixed;
top: 0px;
width: 100%;
background-color: #718293;
border-bottom: 4px solid #718293;
left: 0px;
}

a.mainmenu img{
display: none;
}

a.mainmenu {
margin: 15px;
font-family: Tahoma;
color: #FFFFFF;
font-size: 11px;
font-variant: small-caps;
}

/*CONTOUR Du forum*/
.bodyline
{border-left: 2px solid #7e91a5;
border-right: 2px solid #7e91a5;
border-top: none;
border-bottom: none;}

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

/*cadres autour des icones*/
.icones{
border-radius: 0px;
border: 2px solid #;
padding: 3px;
width: 80px;}

/*cadre des descriptions*/
.descrip{
border-radius: 20px;
border: 2px solid #010207;
padding: 3px;
width: 530px;}

/*cadre autour des statistiques*/
.stats{
border-radius: 10px;
border: 2px solid #010207;
padding: 3px;
width: 100px;}

/*ligne au dessus du dernier message*/
.lastm{
border-top: 1px solid #010207;
padding: 3px;}

/*supprimer le fond des titres des catégories par défaut*/
.secondarytitle h2{
backgound-color: none !important;
background-image: none;}

.tableauqueel{
background-color : # ;
border : solid 2px # ;
-moz-border-radius : 30px 30px 30px 30px}

.partiedroite {
font-size : 12px ;
border-left : 2px dotted # ;
padding-left : 5px;
padding-right : 10px}

.groupes{
background-color:# ;
border: 1px color # ;
border-radius : 5px;
height:40px;
padding-right:12px;
padding-left:14px;
padding-bottom:3px;
font-size:24px
;font-weight: bold;
text-align:center;
font-color : #0A0A0A ;
text-decoration: none !important;
}

.forumline{
-webkit-border-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
padding-left: 2px; /*espace entre les bloc et le cadre de l'index*/
padding-right: 2px; /*espace entre les bloc et le cadre de l'index*/
padding-bottom: 2px; /*espace entre les bloc et le cadre de l'index*/
padding-top: 2px;
}

a:link{
text-transform: ;
}

a { text-decoration: none; }

a:hover{text-decoration: none !important;}
a {text-decoration: none !important;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}

/* Sélecteur de couleur */
.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #f00;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 60px;
height: 30px;
left: 213px;
top: 13px;
background: #f00;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #f00;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #898989;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png);
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 22px;
height: 22px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top;
left: 322px;
top: 142px;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus {
background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
background-position: bottom;
}
.colorpicker_slider {
background-position: bottom;
}

.mon_onglet{
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: #fff;
border: 1px solid #000;}

.mon_onglet:hover{
background: #b8efa1;}

.mon_onglet_selected{
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: #ffff;
border: 1px solid #000;}

.clear{
clear: both;}

.mon_contenu{
color: #000;
background: #;
border: 2px solid #ffffff;
padding: 5px;
margin: 5 px;
height: 500px;
width:750px;
line-height: normal;
font-size: 11px;}

#mes_contenus, #mes_onglets{
height: 100%;
width:100%;}

#chatbox_header .catBottom .cattitle {

}
#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "LA TAVERNE"; }
#chatbox_header .cattitle { background-image:url(); }
#chatbox_header .cattitle strong { visibility: hidden; }
th.secondarytitle h2 img { display: inline!important; }
th.secondarytitle h2 .txt-title { display: none; }

Oh, c'est curieux, parce que lorsque je regarde la hauteur ça me donne 156 ._. Peut-être un redimmensionnement à l'hébergement? à voir.

Sinon, j'ai trouvé pourquoi les images n'affichent plus.

Code:: .entete img { display: inline!important; }
.entete .txt-title { display: none; }

Il faut remplacer tes deux dernières lignes de code css par le code ci-haut (quoique je ne suis pas absolument certaine). Si ça ne fonctionne pas, je passerai par le template, mais on va essayer d'éviter ça!