Image de fond des titres + espacement {L_LASTPOST}

2 participants

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

Image de fond des titres + espacement {L_LASTPOST} Eplica11

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

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

kheino
Membre habitué

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

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

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

Message par kakale 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:

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

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

kheino
Membre habitué

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

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

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

Message par kakale 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

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

kheino
Membre habitué

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

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

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

Message par kakale 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 ?

Image de fond des titres + espacement {L_LASTPOST} Nouvea10
kakale

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 kheino 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) :
Image de fond des titres + espacement {L_LASTPOST} Captur23
kheino

kheino
Membre habitué

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

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

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

Message par kakale 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

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

kheino
Membre habitué

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

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

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

Message par kakale Lun 16 Jan 2012 - 13:49

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

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

kheino
Membre habitué

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

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

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

Message par kakale 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

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

kheino
Membre habitué

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

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

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

Message par kakale 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

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

kheino
Membre habitué

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

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

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

Message par kakale 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(https://2img.net/r/ihimizer/img856/3091/decon110.png) no-repeat attachment center;
border:0px;
height: 275px;
}
kakale

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

kheino
Membre habitué

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

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

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

Message par kakale 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

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

kheino
Membre habitué

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

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

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

Message par kakale Mar 17 Jan 2012 - 14:21

Voici l'image d'explication ! ( en .gif pour éviter de vous faire scroll ! Very Happy )
Image de fond des titres + espacement {L_LASTPOST} Explic17


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

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

kheino
Membre habitué

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

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

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

Message par kakale 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

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

kheino
Membre habitué

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

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

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

Message par kakale 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

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

kheino
Membre habitué

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

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

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

Message par kakale 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 :


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

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 Mer 18 Jan 2012 - 16:13

Un p'tit up pour la forme ! Very Happy
kakale

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 Jeu 19 Jan 2012 - 22:46

Up. thumright
kakale

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 Dim 22 Jan 2012 - 1:55

Up Cool
kakale

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

- Sujets similaires

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