Image de fond des titres + espacement {L_LASTPOST}

Page 1 sur 3 1, 2, 3  Suivant

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

Résolu Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Dim 15 Jan 2012 - 3:58

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 ! ::fete:: <-
( http://lanfear.forumactif.com )

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Dim 15 Jan 2012 - 10:04

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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Dim 15 Jan 2012 - 13:09

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 :

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... Very Happy

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("http://img24.imageshack.us/img24/6011/pilliergauche.png");
background-repeat : no-repeat;
width : 136px;
height : 1000px;
position : fixed;
bottom : 0px;
left : -10px;
}
.imgbas2 {
background-image : url("http://img829.imageshack.us/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("http://img844.imageshack.us/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("http://img841.imageshack.us/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("http://img197.imageshack.us/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('http://img856.imageshack.us/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.Cool;
}

#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. scratch


Dernière édition par kakale le Dim 15 Jan 2012 - 13:50, édité 1 fois

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Dim 15 Jan 2012 - 13:38

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

Je regarde déjà au niveau du template.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Dim 15 Jan 2012 - 13:51

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". Snifff

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 16 Jan 2012 - 12:06

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 :
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 */
}
J'y ai corrigé deux points sur le radius (border-radius qui est pour Opera) et sur le box-shadow (mais je crois que sans le o-box-shadow ça va aussi pour les versions au-dessus de Opera9, dans le doute vaut mieux parce que à part ces deux propriétés et le text-shadow, pour Opera il faut le mentionner avec le CSS3).

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 -->
J'ai séparé tous les éléments afin que tu t'y retrouve mieux. Ce template est particulièrement simple à suivre.

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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 16 Jan 2012 - 13:21

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.

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 ?


kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 16 Jan 2012 - 13:25

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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 16 Jan 2012 - 13:38

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

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 16 Jan 2012 - 13:48

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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 16 Jan 2012 - 13:49

C'est fait. Désolé j'ai la fâcheuse habitude de tester avant de confirmer.

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 16 Jan 2012 - 14:21

@kakale a écrit:j'ai la fâcheuse habitude de tester avant de confirmer.
C'est en effet à éviter, parfois les prévisualisations de templates jouent de mauvais tours, voire même de méchants bugs.
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 -->
Sinon, explique-moi mieux ce qui cloche (mon pseudo n'est pas un mythe !).
C'est la dernière cellule que tu trouves trop petite ?
Le forum en général ?
La description des forums ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 16 Jan 2012 - 14:27

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

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 16 Jan 2012 - 14:41

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):
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>
C'est le table que l'on élargi par le style CSS du code HTML.

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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 16 Jan 2012 - 14:44

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 ?

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 16 Jan 2012 - 15:00

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 :
.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."

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 16 Jan 2012 - 15:09

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 ?

.qeel_start{

background:transparent url(http://img856.imageshack.us/img856/3091/decon110.png) no-repeat attachment center;
border:0px;
height: 275px;
}

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 16 Jan 2012 - 15:19

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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 16 Jan 2012 - 16:19

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 !

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Mar 17 Jan 2012 - 13:17

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:
Code:
<table align="center" class="lastmessopac" style="width: 200px; margin-left: 10px;">
Dans le CSS (avec en bonus la propriétés du CSS3 "transition" :
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;

}
Le "transition" (en anglais) du premier est pour donner un effet de retirement "lent" à l'opacité générée par le hover.

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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Mar 17 Jan 2012 - 14:21

Voici l'image d'explication ! ( en .gif pour éviter de vous faire scroll ! Very Happy )



Si on a du mal à lire, alors tant pis !:


kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Mar 17 Jan 2012 - 14:38

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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Mar 17 Jan 2012 - 14:42

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

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Mar 17 Jan 2012 - 15:19

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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Mar 17 Jan 2012 - 16:23


1°- la fleur "folder" (à gauche) devrait se trouver dans la description des forums ?
2°- le tableau à droite (derniers messages) devrait aussi avoir une image ?

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.

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Mar 17 Jan 2012 - 16:29

OK.

Pour les deux autres points c'est bien ça ?

Et enfin, le 4° me parait maintenant d'actualité...

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Mar 17 Jan 2012 - 16:38

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 :


http://img543.imageshack.us/img543/9493/bloque.png
http://img207.imageshack.us/img207/6788/nonouveau.png
http://i47.servimg.com/u/f47/12/57/30/22/nouvea10.gif

Et merci d'avance pour votre travail !

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Mer 18 Jan 2012 - 16:13

Un p'tit up pour la forme ! Very Happy

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Jeu 19 Jan 2012 - 22:46

Up. thumright

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Dim 22 Jan 2012 - 1:55

Up Cool

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 3 1, 2, 3  Suivant

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


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