Image de fond des titres + espacement {L_LASTPOST}
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 3 • Partagez
Page 1 sur 3 • 1, 2, 3
Image de fond des titres + espacement {L_LASTPOST}
Bonsoir !
Après avoir réecrit une bonne partie de mon CSS avec dur labeur, je viens vous voir ( parce que je suis accro' à vous ! ) parce que je souhaiterais avec une image de catégorie.
Comment ça elle sait pas rajouter une image catégorie ?!
Attendez attendez! En ajoutant une image qui est une fleur par exemple, je ne vois qu'un pétale. Ce que je souhaiterais, c'est que mon image fasse cela :
Et comme vous le voyez, je souhaiterais aussi un espacement de la catégorie {L_LASTPOST}.
J'ai tenté par tout les moyens que je connais en le mettant en <br><tr isolé> et j'en passe...
Merci d'avance à celui, celle ou ceux qui m'aideront!
-> Je ne demande pas un code tout fait mais aussi des explications pour apprendre ! <-
( http://lanfear.forumactif.com )
Après avoir réecrit une bonne partie de mon CSS avec dur labeur, je viens vous voir ( parce que je suis accro' à vous ! ) parce que je souhaiterais avec une image de catégorie.
Comment ça elle sait pas rajouter une image catégorie ?!
Attendez attendez! En ajoutant une image qui est une fleur par exemple, je ne vois qu'un pétale. Ce que je souhaiterais, c'est que mon image fasse cela :
Et comme vous le voyez, je souhaiterais aussi un espacement de la catégorie {L_LASTPOST}.
J'ai tenté par tout les moyens que je connais en le mettant en <br><tr isolé> et j'en passe...
Merci d'avance à celui, celle ou ceux qui m'aideront!
-> Je ne demande pas un code tout fait mais aussi des explications pour apprendre ! <-
( http://lanfear.forumactif.com )
Re: Image de fond des titres + espacement {L_LASTPOST}
Bonjour Kakale,
Je crains n'avoir pas bien compris, surtout au niveau de ton schéma :
Comment ça sans >div< et sans CSS ?
Pour ce qui est du dernier message (et même pour l'image), il faudrait ton template index_boxpuisqu'il est déjà personnalisé, ainsi que la partie (seulement) du CSS concernant l'index_box.
Je crains n'avoir pas bien compris, surtout au niveau de ton schéma :
Comment ça sans >div< et sans CSS ?
Pour ce qui est du dernier message (et même pour l'image), il faudrait ton template index_boxpuisqu'il est déjà personnalisé, ainsi que la partie (seulement) du CSS concernant l'index_box.
Re: Image de fond des titres + espacement {L_LASTPOST}
Bonsoir Finalblonde !
Ce que je sous-entendais est que pour arriver à placer les images présentes, j'avais usés d'une méthode comme la div, suivit d'un placement exact de l'image via CSS. Mais cela n'a pas d'importance, sauf si cela vous intrigue ?
Quoi qu'il en soit, voici le code index box :
Pour le CSS, c'est tellement un foutoir que je ne sais pas en quoi sert tels ou tels trucs ... Enfin si, mais pas à quels templates le code est lié. Catastrophe inter-stellaire si vous voulez voir ça...
Edit : la balise spoiler m'a échappé sur le CSS... Mais en le relisant, j'n'ai pas de CSS concernant index body.
Ce que je sous-entendais est que pour arriver à placer les images présentes, j'avais usés d'une méthode comme la div, suivit d'un placement exact de l'image via CSS. Mais cela n'a pas d'importance, sauf si cela vous intrigue ?
Quoi qu'il en soit, voici le code index box :
- Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr style="display:none;">
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="150">{L_TOPICS}</th>
<th nowrap="nowrap" width="50"><div style="width:50px";>{L_LASTPOST}</div></th>
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="40"><img src="{SPACER}" height="0" width="40" /></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"><div style="width:120px;"> </div></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">{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 -->
Pour le CSS, c'est tellement un foutoir que je ne sais pas en quoi sert tels ou tels trucs ... Enfin si, mais pas à quels templates le code est lié. Catastrophe inter-stellaire si vous voulez voir ça...
- Spoiler:
- .postbody{
color:#E7D9F2;}
.quote{
background-color: #trans;
border: 2px dotted #E77980;
-moz-border-radius: 11px;
border-square: 11px;
-webkit-border-radius: 11px;}
/*----------------------------------------image angles -------*/
.imgbas1 {
background-image : url("https://2img.net/r/ihimizer/img24/6011/pilliergauche.png");
background-repeat : no-repeat;
width : 136px;
height : 1000px;
position : fixed;
bottom : 0px;
left : -10px;
}
.imgbas2 {
background-image : url("https://2img.net/r/ihimizer/img829/6885/pillierdroite.png");
background-repeat : no-repeat;
width : 182px;
height : 1000px;
position : fixed;
bottom : 0px;
right : -20px;
}
/*----------------------------------------image droite-------*/
#content_img{
position: relative;
top: 10px; /* placer à 50px du haut */
width: 800px; /* égal la largueur du forum + largeur des images, sinon tu auras un décalage du forum */
margin: 0 auto;
padding: 0;
}
#img_droite1 {
background: url("https://2img.net/r/ihimizer/img844/6453/551966nnew.png") no-repeat scroll 0 0 transparent;
float: right;
height: 93px;
left: -10px;
position: absolute;
bottom: -1210;
width: 818px;
}
#img_bordure1 {
background: url("https://2img.net/r/ihimizer/img841/7266/bannir10.png") no-repeat scroll 0 0 transparent;
float: right;
height: 320px;
right: 60px;
position: fixed;
top: -10;
width: 273px;
}
#img_bordure2 {
background: url("https://2img.net/r/ihimizer/img197/7266/bannir10.png") no-repeat scroll 0 0 transparent;
float: right;
height: 320px;
left: 50px;
position: fixed;
top: -10;
width: 268px;
}
/*--------------------- code CSS pour centrer les titres des categories ****/
a.cattitle {
display:block;
text-align:center;
}
/*---------------------------------------OMBRE AUTOUR DU CADRE FORUM----------------- ****/
.row1{
-moz-box-shadow: 0px 0px 10px #BFB4B5;
box-shadow: 0px 0px 10px #BFB4B5;
-webkit-box-shadow: 0px 0px 10px #BFB4B5;
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Chrome, Safari, Opera */
border-radius: 10px; /* Chrome et format standard */
}
.row2{
-moz-box-shadow: 0px 0px 10px #BFB4B5;
box-shadow: 0px 0px 10px #BFB4B5;
-webkit-box-shadow: 0px 0px 10px #BFB4B5;
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Chrome, Safari, Opera */
border-radius: 20px; /* Chrome et format standard */
}
.row3{
-moz-box-shadow: 0px 0px 10px #BFB4B5;
box-shadow: 0px 0px 10px #BFB4B5;
-webkit-box-shadow: 0px 0px 10px #BFB4B5;
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Chrome, Safari, Opera */
border-radius: 20px; /* Chrome et format standard */
}
.row3Right{
-moz-box-shadow: 0px 0px 10px #BFB4B5;
box-shadow: 0px 0px 10px #BFB4B5;
-webkit-box-shadow: 0px 0px 10px #BFB4B5;
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Chrome, Safari, Opera */
border-radius: 20px; /* Chrome et format standard */
}
/* ------------------------Banderole qui défile avec le texte de bienvenue. */
.catHead {
-moz-border-radius: 15px;
-webkit-border-radius:15px;
border-radius: 15px;
}
/*-----------------------------------------couleur zone de texte-------*/
input, select, textarea {
background-color: #140C01;
}
/*-------------------------------------------FOND ENCRAN-------*/
body{
background-repeat: no-repeat;
background-position: top center;}
/*------------------------Position de la barre de navigation ( monter ou descendre )-------*/
#i_logo {
margin-bottom: 0px;
margin-top: -200px;
}
.barre_nav{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
z-index: 999;}
table.bodylinewidth {
position:relative;
top: -7px;
}
/*-----------------------------------------QEEL-------------------------------------------------*/
.qeel_start{
background-image: url('https://2img.net/r/ihimizer/img856/3091/decon110.png');
border:0px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
height: 275px;
}
.groupes{
background-color:#000000;
opacity: .7;
border: 1px #8c8c8c dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;
padding-left:14px;
padding-bottom:3px;
font-size:15px;
font-weight: bold;
text-align:center;
text-decoration: none !important;
}
.colo{
border:1px
solid black;
width:900px;
-moz-box-shadow: 1px 1px 12px #F00000;-webkit-box-shadow: 1px 1px 12px #BABABA; box-shadow: 1px 1px 12px #BABABA;margin-left:20px;}
/* --------------------------------------Ombre des rangs-------------------------------------- */
.title
{
text-shadow: 1px 1px 5px #CCA572;
}
/* -------------------------------------------------------------------------------------------- */
/* ----------------------------------------LIEN OMBRE------------------------------------------------ */
a:hover { text-decoration: !important;
text-shadow: 1px 1px 15px #C9A87D; }
.forumlink {text-shadow: #ffffff 1px 1px 15px;}
a.forumlink {text-shadow: #ffffff 1px 1px 15px;}
a.forumlink:hover {text-shadow: #BF5858 1px 1px 15px;}
{text-shadow: #ffffff 1px 1px 15px;}
a.forumlink {text-shadow:#ffffff 1px 1px 15px;}
a.forumlink:hover {text-shadow: #ffffff 1px 1px 15px;}
/*------------------------ -------------mots en gras ombrés---------------------------------------*/
i {
text-shadow: 1px 1px 10px #BF5858;
}
/*--------------------------------------- Liens ombrés--------------------------------------------------*/
a:link {
position: relative;
text-decoration:none;
text-shadow: 3px 1px 10px #BF5858;
}
a:hover {
text-decoration: F00000;
text-shadow: 3px 1px 10px #BF5858;
color: #BF5858;
}
.line{
background-color: #CF8D1B2;
}
/* ---------------------------------Retrait du soulignement ---------------------------------- */
a
{
text-decoration: none;
}
a:active
{
text-decoration: none;
}
a:hover
{
text-decoration: none!important;
}
a.mainmenu:hover
{
font-size: 13px;
text-decoration:none!important;
}
.forumlink
{
text-decoration: none;
}
a.forumtitle
{
text-decoration:none;}
/*----------------------------------- Transparence des coins -------------------------------*/
.thLeft {border: 0px solid transparent !important; background-color:transparent !important;}
.thRight {border: 0px solid transparent !important; background-color:transparent !important;}
.thCornerL {border: 0px solid transparent !important; background-color:transparent !important;}
.thCornerR {border: 0px solid transparent !important; background-color:transparent !important;}
.thTop {border: 0px solid transparent !important; background-color:transparent !important;}
.catBottom {border: 0px solid transparent !important; background-color:transparent !important;}
.catHead {border: 0px solid transparent !important; background-color:transparent !important;}
/*------------------------------------------\* navig rapide /*------------ -------------------*/
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
z-index:999
}
#menu {
width:15em;
z-index:999
bottom: 0; left: 0;
position: fixed;
z-index: 90;
width:170px
background-color: #4B3659}
#smenu1 ul{
width:170px;
}
#menu dt {
cursor: pointer;
margin: 0px 0px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid gray;
z-index:999
}
#menu dt:hover{
box-shadow:0 0 10px rgba(255,255,255,0.;
}
#menu dd {
border: 1px solid gray;
display: none;
z-index:999
width:170px}
#menu li {
text-align: center;
font-family: Verdana;
color: #ffffff
font-size: 80%;
z-index:999
width:170px
}
#menu li a, #menu dt a {
font-size: 75%;
text-decoration: none;
display: block;
border: 0 none;
z-index:999
}
#menu li a:hover, #menu dt a:hover {
color: #BB8888;
text-shadow: 1px 1px 10px #BFB4B5;
}
.cadre{
width:15em;
padding: 2px;
list-style-type: none;
position: fixed;
z-index:999}
Edit : la balise spoiler m'a échappé sur le CSS... Mais en le relisant, j'n'ai pas de CSS concernant index body.
Dernière édition par kakale le Dim 15 Jan 2012 - 13:50, édité 1 fois
Re: Image de fond des titres + espacement {L_LASTPOST}
Euh, tout d'abord Kakale, si tu veux que je t'aide plus avant, sache que je suis la paresse personnifiée quant au scroll, alors si tu pouvais mettre ton CSS dans les balises "spoiler" je pense que même toi tu y verras mieux.
Ensuite, donner tout ton CSS ne me sert à rien, si ce n'est moi qui devrais rechercher dans le bins et dans une manière de coder qui n'est pas du tout mienne, autant dire que j'y passerais bien plus de temp ...
Je regarde déjà au niveau du template.
Ensuite, donner tout ton CSS ne me sert à rien, si ce n'est moi qui devrais rechercher dans le bins et dans une manière de coder qui n'est pas du tout mienne, autant dire que j'y passerais bien plus de temp ...
Je regarde déjà au niveau du template.
Re: Image de fond des titres + espacement {L_LASTPOST}
Désolé, comme dit dans le message édité, la balise spoiler m'a complètement échappée et je m'en excuse. Et en le relisant, je ne vois aucun CSS attitré à l'index_body si je ne me trompe pas. Et désolé si vous pensez que je vous prend pour quelque "chose".
Re: Image de fond des titres + espacement {L_LASTPOST}
Pas de souci, c'est juste que ça semble logique que pour quelqu'un d'autre, sa feuille de style est encore plus "junglifiante".
Pourtant il doit bien y avoir du CSS vu les bords arrondis...
C'est cette partie de ton CSS :
Bon passons d'abord à la cellule des derniers messages.
Il faut en fait séparer ce bloc du corps de la ligne qui comprend l'image des forums, la description et les derniers messages.
Pour ce faire, on crée des tableaux dans le tableau principal à partir du "forumrow" (ligne de forum), c'est à mon avis le mieux gérable.
Ensuite, il faut supprimer le class="forumline" du tableau principal si l'on veut que ça ressemble à quelque chose (bien qu'avec ton fond, tu peux aussi le laisser).
Alors voilà ce que ça donne en clair :
Terminons déjà avec avant d'attaquer l'autre problème, si tu veux bien.
De plus je suis à ma pause déjeuner avant les prochains cours et je ne pense pas pouvoir m'y remettre avant ce soir (et encoe).
Pourtant il doit bien y avoir du CSS vu les bords arrondis...
C'est cette partie de ton CSS :
- Spoiler:
- .row1{
box-shadow: 0px 0px 10px #BFB4B5;
-moz-box-shadow: 0px 0px 10px #BFB4B5;
-webkit-box-shadow: 0px 0px 10px #BFB4B5;
-o-box-shadow: 0px 0px 10px #BFB4B5; /*Opera + version 9 bien qu'il le lise, mais c'est valable pour le CSS3* hormis le radius*/
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Chrome, Safari, Opera */
border-radius: 10px; /* Opera et format standard */
}
.row2{
-moz-box-shadow: 0px 0px 10px #BFB4B5;
box-shadow: 0px 0px 10px #BFB4B5;
-webkit-box-shadow: 0px 0px 10px #BFB4B5;
-o-box-shadow: 0px 0px 10px #BFB4B5;
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Chrome, Safari, Opera */
border-radius: 20px; /* Opera et format standard */
}
.row3{
-moz-box-shadow: 0px 0px 10px #BFB4B5;
box-shadow: 0px 0px 10px #BFB4B5;
-webkit-box-shadow: 0px 0px 10px #BFB4B5;
-o-box-shadow: 0px 0px 10px #BFB4B5;
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Chrome, Safari, Opera */
border-radius: 20px; /* Opera et format standard */
}
.row3Right{
-moz-box-shadow: 0px 0px 10px #BFB4B5;
box-shadow: 0px 0px 10px #BFB4B5;
-webkit-box-shadow: 0px 0px 10px #BFB4B5;
-o-box-shadow: 0px 0px 10px #BFB4B5;
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Chrome, Safari, Opera */
border-radius: 20px; /* Opera et format standard */
}
Bon passons d'abord à la cellule des derniers messages.
Il faut en fait séparer ce bloc du corps de la ligne qui comprend l'image des forums, la description et les derniers messages.
Pour ce faire, on crée des tableaux dans le tableau principal à partir du "forumrow" (ligne de forum), c'est à mon avis le mieux gérable.
Ensuite, il faut supprimer le class="forumline" du tableau principal si l'on veut que ça ressemble à quelque chose (bien qu'avec ton fond, tu peux aussi le laisser).
Alors voilà ce que ça donne en clair :
- Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<table width="100%" border="0" cellspacing="1" cellpadding="0"><tr style="display: none;">
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="150">{L_TOPICS}</th>
<th nowrap="nowrap" width="50"><div style="width:50px";>{L_LASTPOST}</div></th>
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="40"><img src="{SPACER}" height="0" width="40" /></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"><div style="width:120px;"> </div></td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr><td colspan="{catrow.forumrow.INC_SPAN}" width="100%">
<table width="100%"><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></tr></table>
</td>
<td>
<table style="margin-left: 10px;"><tr>
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td></tr></table>
</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 -->
Terminons déjà avec avant d'attaquer l'autre problème, si tu veux bien.
De plus je suis à ma pause déjeuner avant les prochains cours et je ne pense pas pouvoir m'y remettre avant ce soir (et encoe).
Re: Image de fond des titres + espacement {L_LASTPOST}
Bonjour !
Merci énormément de prendre ce temps pour m'expliquer. C'est en effet le résultat que je souhaitais avoir ! à quelques soucis près. Il semblerait que la table soit infiniment petite. J'ai donc tenté de rajouté ceci : width="200". Le 200 est là pour me rendre de compte de : Qu'est-ce qui bouge en définitive ? Absolument rien.
J'ai donc agrandi le Height en "90" mais comme tout height il n'agrandit que la hauteur... Voici l'aperçut de ce que cela donne pour vous donner une idée. D'ailleurs, la table row1 me semble fortement décalé ou est-ce une impression ?
Merci énormément de prendre ce temps pour m'expliquer. C'est en effet le résultat que je souhaitais avoir ! à quelques soucis près. Il semblerait que la table soit infiniment petite. J'ai donc tenté de rajouté ceci : width="200". Le 200 est là pour me rendre de compte de : Qu'est-ce qui bouge en définitive ? Absolument rien.
- Code:
<td class="row3 over" align="center" valign="middle" height="50">
J'ai donc agrandi le Height en "90" mais comme tout height il n'agrandit que la hauteur... Voici l'aperçut de ce que cela donne pour vous donner une idée. D'ailleurs, la table row1 me semble fortement décalé ou est-ce une impression ?
Re: Image de fond des titres + espacement {L_LASTPOST}
As-tu essayé de remettre le class="forumline" au premier "table" du template ?
Et non, supprime ce que tu as ajouter, ça ne sert à rien.
EDIT : Voici ce que ça donne chez moi (mais j'ai à la base un forum tout petit pour un autre tuto) :
Et non, supprime ce que tu as ajouter, ça ne sert à rien.
EDIT : Voici ce que ça donne chez moi (mais j'ai à la base un forum tout petit pour un autre tuto) :
Re: Image de fond des titres + espacement {L_LASTPOST}
Je l'ai rajouté, mais le décalage reste toujours omni-présent. Voir même plus prononcé. Est-ce cette ligne là ?
- Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"><tr style="display: none;">
Re: Image de fond des titres + espacement {L_LASTPOST}
Oui c'est bien cette ligne.
Mais je regarde ton forum directement et je ne constate rien, même pas la modif sur la cellule en question.
Pourrais-tu laisser le forum en l'état après avoir mis le template que je t'ai donné, que je voie ce qui cloche...
Mais je regarde ton forum directement et je ne constate rien, même pas la modif sur la cellule en question.
Pourrais-tu laisser le forum en l'état après avoir mis le template que je t'ai donné, que je voie ce qui cloche...
Re: Image de fond des titres + espacement {L_LASTPOST}
C'est fait. Désolé j'ai la fâcheuse habitude de tester avant de confirmer.
Re: Image de fond des titres + espacement {L_LASTPOST}
C'est en effet à éviter, parfois les prévisualisations de templates jouent de mauvais tours, voire même de méchants bugs.kakale a écrit:j'ai la fâcheuse habitude de tester avant de confirmer.
Le mieux est d'envoyer et d'y revenir sans arrêt.
Non, je vois le tout bien centré.
La description des forums a la bonne largeur parce qu'au "td" qui contient le tableau de cette partie, on a donné la même fusion des colonnes "colspan".
Essaie encore ce template.
J'ai mis le table de la description des forums après les images de forums et mis des align="center" à toutes les tables, mais chez moi ça ne change rien :
- Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<table align="center" width="100%" border="0" cellspacing="1" cellpadding="0"><tr style="display: none;">
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="150">{L_TOPICS}</th>
<th nowrap="nowrap" width="50"><div style="width:50px";>{L_LASTPOST}</div></th>
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="40"><img src="{SPACER}" height="0" width="40" /></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"><div style="width:120px;"> </div></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">
<table class="indexfofo" align="center" width="100%"><tr>
<td 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></tr></table>
</td>
<td>
<table align="center" style="margin-left: 10px;"><tr><td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td></tr></table>
</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 -->
C'est la dernière cellule que tu trouves trop petite ?
Le forum en général ?
La description des forums ?
Re: Image de fond des titres + espacement {L_LASTPOST}
( Votre pseudo n'est pas un mythe, mais vous avez la gentillesse de m'aider, et ça fait beaucoup, merci ! Et en effet, tout rend mieux une fois accepté !)
La cellule que je trouve trop petite est celle de la dernière cellule que vous avez modifié. La " L_Lastpost ". Il faudrait mieux lui donner une largeur plus conséquente pour rendre " sa forme " comme une infobulle qu'on a placé tout le long des topics. Enfin je ne sais pas si vous avez la même vision de la chose que moi-même.
Par ailleurs, Y'aurait-il la possibilité de déplacer vers la droite le forum en général pour afin de bien centrer le tout entre les colonnes ?
Et merci encore pour votre aide, je prend des notes pour de futures manipulations !
EDIT : J'ai testé votre nouveau template, et c'est en effet ce que je voulais ! Le soucis reste la dernière cellule qui a une forme variable selon son contenu. Est-il possible de fixer une taille et d'agrandir un tout petit peu l'espacement des cellules, au risque de réduire éventuellement un tout petit peu la cellule Row 1 ?
La cellule que je trouve trop petite est celle de la dernière cellule que vous avez modifié. La " L_Lastpost ". Il faudrait mieux lui donner une largeur plus conséquente pour rendre " sa forme " comme une infobulle qu'on a placé tout le long des topics. Enfin je ne sais pas si vous avez la même vision de la chose que moi-même.
Par ailleurs, Y'aurait-il la possibilité de déplacer vers la droite le forum en général pour afin de bien centrer le tout entre les colonnes ?
Et merci encore pour votre aide, je prend des notes pour de futures manipulations !
EDIT : J'ai testé votre nouveau template, et c'est en effet ce que je voulais ! Le soucis reste la dernière cellule qui a une forme variable selon son contenu. Est-il possible de fixer une taille et d'agrandir un tout petit peu l'espacement des cellules, au risque de réduire éventuellement un tout petit peu la cellule Row 1 ?
Re: Image de fond des titres + espacement {L_LASTPOST}
Oui c'est possible d'élargir la dernière cellule (td), tout en sachant que celle de la description des forums en sera rétrécie, surtout si le forum a une largeur fixe (en pixels):
Pour ce qui est de décaler le forum, ça risque de ne pas rendre bien du tout selon les résolutions d'écrans et les navigateurs.
Le tout est centré (si l'on tient compte de l'espace entre la dernière cellule et le reste, que tu peux aussi amoindrir dans le même style CSS du même table).
Ce que je te suggèrerais plutôt, c'est d'enlever le cadre de la partie du bas, ou alors de le mettre dans un table aussi, et non comme forumline.
- Code:
<td>
<table align="center" style="width: 200px; margin-left: 10px;"><tr><td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td></tr></table>
</td>
Pour ce qui est de décaler le forum, ça risque de ne pas rendre bien du tout selon les résolutions d'écrans et les navigateurs.
Le tout est centré (si l'on tient compte de l'espace entre la dernière cellule et le reste, que tu peux aussi amoindrir dans le même style CSS du même table).
Ce que je te suggèrerais plutôt, c'est d'enlever le cadre de la partie du bas, ou alors de le mettre dans un table aussi, et non comme forumline.
Re: Image de fond des titres + espacement {L_LASTPOST}
C'est ok !
Le forum a une largeur "fixe " % pour qu'il s'adapte facilement à toutes les résolutions, même si le rendu doit-être pittoresque dans les bases résolution comme 800x600.
Sinon, pour le cadre dont vous parlez... est-ce le QEEL ?
Le forum a une largeur "fixe " % pour qu'il s'adapte facilement à toutes les résolutions, même si le rendu doit-être pittoresque dans les bases résolution comme 800x600.
Sinon, pour le cadre dont vous parlez... est-ce le QEEL ?
Re: Image de fond des titres + espacement {L_LASTPOST}
Nope, c'est le cadre que l'on voit autour de la connexion du bas, il est de la largeur du forum et effectivement il y a un grand vide, mais encore une fois, tout est bien aligné.
Si tu veux décaler le forum, au second "table" celui de la description et des images forums, il faut que tu remettes ce table comme le template que je t'ai donné avant le dernier.
Ce table contient un class="indexfofo" que tu peux reprendre dans le CSS :
A propos de CSS, en ce qui concerne le raccourci "background", la bonne syntaxe pour les normes W3C est :
Si tu veux décaler le forum, au second "table" celui de la description et des images forums, il faut que tu remettes ce table comme le template que je t'ai donné avant le dernier.
Ce table contient un class="indexfofo" que tu peux reprendre dans le CSS :
.indexfofo {
width: auto;
margin: 0 10px 0 0; /*top right bottom left*/
A propos de CSS, en ce qui concerne le raccourci "background", la bonne syntaxe pour les normes W3C est :
background:color url(image) repeat attachment position;
/*on ne met pas de guillemets ou d'apostrophes autour de l'url-image car certains navigateurs ne les lisent pas comme certaines versions (de Safari par exemple)*/
"N'oubliez pas que si vous donnez deux valeurs pour la position, elles doivent être présentées ensemble. Si vous utilisez des valeurs en longueur ou en pourcentage, mettez d'abord la valeur horizontale.
Comme pour les propriétés de border et des côtés de bordures, il n'est pas nécessaire de préciser toutes les valeurs. Si une valeur est omise, elle prendra sa valeur par défaut. Les valeurs par défaut pour les propriétés individuelles de l'arrière-plan (background) sont les suivantes :
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0 0
Cela signifie qu'il est inutile d'appliquer les raccourcis pour background si on n'attribue pas de valeur à color ou à image, car cela rendrait notre arrière-plan transparent."
Re: Image de fond des titres + espacement {L_LASTPOST}
Oh. Merci beaucoup !
Par contre, je dois vous avouer que l'image ne s'affiche plus du tout avec la nouvelle norme... ( Pour le QEEL par exemple )... Ai-je fait une mauvaise manipulation ?
Par contre, je dois vous avouer que l'image ne s'affiche plus du tout avec la nouvelle norme... ( Pour le QEEL par exemple )... Ai-je fait une mauvaise manipulation ?
.qeel_start{
background:transparent url(https://2img.net/r/ihimizer/img856/3091/decon110.png) no-repeat attachment center;
border:0px;
height: 275px;
}
Re: Image de fond des titres + espacement {L_LASTPOST}
En effet, tu as laissé le "attachement".
Si la valeur n'est pas celle par défaut, il faut la préciser comme "fixed", sinon on laisse, comme le "transparent" pour la couleur qui est une valeur par défaut, ou le:
"0 0" >> = "top left"
re- :
Si la valeur n'est pas celle par défaut, il faut la préciser comme "fixed", sinon on laisse, comme le "transparent" pour la couleur qui est une valeur par défaut, ou le:
"0 0" >> = "top left"
re- :
Les valeurs par défaut pour les propriétés individuelles de l'arrière-plan (background) sont les suivantes :
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0 0
Re: Image de fond des titres + espacement {L_LASTPOST}
Ah ! Effectivement, l'image est réapparue !
Sinon, je viens d'avoir une idée, mais je pense que ça se joue "facilement" qui serait de mettre une opacité de "60" par exemple pour le l_lastpost et dès que le curseur passe dessus : "opacité 100". Cette fois-ci ça ne se joue que sur le CSS c'est bien cela?
Quoi qu'il en soit, la première partie me semble résolue !
Sinon, je viens d'avoir une idée, mais je pense que ça se joue "facilement" qui serait de mettre une opacité de "60" par exemple pour le l_lastpost et dès que le curseur passe dessus : "opacité 100". Cette fois-ci ça ne se joue que sur le CSS c'est bien cela?
Quoi qu'il en soit, la première partie me semble résolue !
Re: Image de fond des titres + espacement {L_LASTPOST}
Oui, c'est la propriété "opacity" du CSS.
Commençons par attribuer un identifiant au table des derniers messages par un class, du genre:
Dans la propriété "transition" tu peux modifier les valeurs, temps, la manière dont ça doit intervenir (ici: linear, ease-in) sur quoi ça doit agir (ici: opacity).
Il y en a encore bien plus que tu peux découvrir sur des sites de CSS en cherchant dans Google: "propriété transition du CSS3".
Pour ce qui est des images maintenant :
Peux-tu fournir les liens des images et exactement où tu les aimerais (de préférence avec un jouli schéma) ?
Commençons par attribuer un identifiant au table des derniers messages par un class, du genre:
- Code:
<table align="center" class="lastmessopac" style="width: 200px; margin-left: 10px;">
- Spoiler:
- [quote][spoiler].lastmessopac {
opacity : 0.6;
-moz-opacity : 0.6;
-khtml-opacity: 0.6;
-ms-filter: "alpha(opacity=60)"; /* IE 8 */
filter : alpha(opacity=60); /* IE < 8 */
transition: opacity 1.7s linear;
-moz-transition: opacity 1.7s linear;
-o-transition: opacity 1.7s linear;
-webkit-transition: opacity 1.7s linear;
-htm-transition: opacity 1.7s linear;
}
.lastmessopac:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
transition: opacity 1.9s ease-in;
-moz-transition: opacity 1.9s ease-in;
-o-transition: opacity 1.9s ease-in;
-webkit-transition: opacity 1.9s ease-in;
-htm-transition: opacity 1.9s ease-in;
}
Dans la propriété "transition" tu peux modifier les valeurs, temps, la manière dont ça doit intervenir (ici: linear, ease-in) sur quoi ça doit agir (ici: opacity).
Il y en a encore bien plus que tu peux découvrir sur des sites de CSS en cherchant dans Google: "propriété transition du CSS3".
Pour ce qui est des images maintenant :
Peux-tu fournir les liens des images et exactement où tu les aimerais (de préférence avec un jouli schéma) ?
Re: Image de fond des titres + espacement {L_LASTPOST}
Ah ben merci.
Mais les liens seraient aussi utiles.
Pour l'images dans la description des forums, il faut justement la mettre dans la description des forums.
Pour celle dans le tableau des derniers messages, on peut ajouter au "table" une cellule "td" avec comme fond l'image voulue (du moins si j'ai bien compris).
Mais les liens seraient aussi utiles.
Pour l'images dans la description des forums, il faut justement la mettre dans la description des forums.
Pour celle dans le tableau des derniers messages, on peut ajouter au "table" une cellule "td" avec comme fond l'image voulue (du moins si j'ai bien compris).
Re: Image de fond des titres + espacement {L_LASTPOST}
En tout, c'est surtout pour tenter de minimiser les bug et surtout la charge de travail. Je me demandais si cela posait un problème pour les petites résolutions de voir un forum avec le forum des catégories possédant une image sur toute la largeur, coupé d'un espacement avec la fenêtre derniers messages.
Et j'en suis rendue au fait d'arriver à là :
Si la fenêtre dernier messages que nous avons modifié, gênait ? Et si nous devions mettre L_LASTPOST DANS la catégorie ROW 1 ? Ainsi que "supprimer l'icône à gauche de ce forum si l'on arrive à faire changer de couleur la fleur ? Dîtes moi si cela est compréhensible, et pourquoi pas , faisable ?
Et j'en suis rendue au fait d'arriver à là :
Si la fenêtre dernier messages que nous avons modifié, gênait ? Et si nous devions mettre L_LASTPOST DANS la catégorie ROW 1 ? Ainsi que "supprimer l'icône à gauche de ce forum si l'on arrive à faire changer de couleur la fleur ? Dîtes moi si cela est compréhensible, et pourquoi pas , faisable ?
Re: Image de fond des titres + espacement {L_LASTPOST}
Que nenni, le tableau séparé de droite ne devrait pas gêner car li est compris dans le tableau principal et donc dans la largeur du forum:
bodylinewidth
Je récapitule si j'ai bien saisi :
1°- la fleur "folder" (à gauche) devrait se trouver dans la description des forums ?
2°- le tableau à droite (derniers messages) devrait aussi avoir une image ?
3°- les fleurs entre les catégories sont-elles entre les catégories ou bien entre les forums (sections) ?
4°- quelque soit l'option, il me faut les liens image (sauf pour les "folder" de gauche).
bodylinewidth
Je récapitule si j'ai bien saisi :
1°- la fleur "folder" (à gauche) devrait se trouver dans la description des forums ?
2°- le tableau à droite (derniers messages) devrait aussi avoir une image ?
3°- les fleurs entre les catégories sont-elles entre les catégories ou bien entre les forums (sections) ?
4°- quelque soit l'option, il me faut les liens image (sauf pour les "folder" de gauche).
Re: Image de fond des titres + espacement {L_LASTPOST}
1- Le folder à gauche ne serait plus le folder du forum. Il faudrait que les fleurs que vous voyez soient en fait LE folder de chaque catégories. Donc au lieu d'être dans le ROW1 à gauche, elle sera AU-DESSUS du row 1. Ce qui donne en fait une décoration dite "cadre" autour de la description.
Re: Image de fond des titres + espacement {L_LASTPOST}
OK.
Pour les deux autres points c'est bien ça ?
Et enfin, le 4° me parait maintenant d'actualité...
Pour les deux autres points c'est bien ça ?
Et enfin, le 4° me parait maintenant d'actualité...
Re: Image de fond des titres + espacement {L_LASTPOST}
Le tableau des derniers messages ne devrait avoir AUCUNES images. A vrai dire, il n'est là que pour avertir les membres d'un nouveaux messages dans cette catégorie et s'y rendre tout de suite.
Et pour finir , les fleurs devront être entre chaque forum. Donc j'dirais, pour m'expliquer à moi-même, entre chaque début de squelette...
- Hall d'entrée ( C'est lui dont je parle )
-> Corridor
-> chambre
-> ect...
4°- Voici le lien des images :
https://2img.net/r/ihimizer/img543/9493/bloque.png
https://2img.net/r/ihimizer/img207/6788/nonouveau.png
https://i.servimg.com/u/f47/12/57/30/22/nouvea10.gif
Et merci d'avance pour votre travail !
Et pour finir , les fleurs devront être entre chaque forum. Donc j'dirais, pour m'expliquer à moi-même, entre chaque début de squelette...
- Hall d'entrée ( C'est lui dont je parle )
-> Corridor
-> chambre
-> ect...
4°- Voici le lien des images :
https://2img.net/r/ihimizer/img543/9493/bloque.png
https://2img.net/r/ihimizer/img207/6788/nonouveau.png
https://i.servimg.com/u/f47/12/57/30/22/nouvea10.gif
Et merci d'avance pour votre travail !
Re: Image de fond des titres + espacement {L_LASTPOST}
Un p'tit up pour la forme !
Page 1 sur 3 • 1, 2, 3
Sujets similaires
» Comment modifier l'image de fond des titres ?
» Fond Image des Titres de Catégories
» Problème d'image du fond des titres
» Image de fond des titres de catégories
» Image fond des titres (.cate_head)
» Fond Image des Titres de Catégories
» Problème d'image du fond des titres
» Image de fond des titres de catégories
» Image fond des titres (.cate_head)
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 3
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum