Image en Fond de Catégorie

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

Résolu Image en Fond de Catégorie

Message par *angiesworld* le Lun 16 Mai 2011 - 18:37

Avant tout bien le bonjour à vous.

Si je vous adresse ce message aujourd’hui c’est parce que malgré mes recherches je n’ai rien trouvée qui puisse m’aider concrètement dans ce que je voudrais.
Etant une quiche en CSS je vous demande votre aide.
Voilà j'aimerais savoir comment recréer ce genre de catégorie pour mon fan club officiel :

http://www.feeltherock.com

Je ne cherche pas exactement à refaire la même chose! En fait je voudrais juste savoir faire ce genre de chose, ajouter une image en fond de catégorie.. etc
Croyez vous donc pouvoir m’aider?!
Si oui, merci par avance à tout ceux qui prendront de leur temps pour m’éclairer.
Amicalement, Angie
xoXox

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en Fond de Catégorie

Message par Convivialite le Mar 17 Mai 2011 - 10:40

Bonjour

pour agrandir tes catégories et mettre une image

code a mettre dans ta feuille de css


Code:

th {
background-image: url("");
font-size: 13px;
color: #;
height: 100px;
padding: 2px 3px;
}

background-image: url(""); url de l'image , entre " xxxx "

height: 100px; ne pas oublier de modifier suivant la hauteur de ton image


Amicalement

Convivialite
+ Hyperactif +

Féminin
Messages : 2874
Inscrit(e) le : 19/03/2009

http://la-convivialite.forumactif.com
Convivialite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en Fond de Catégorie

Message par *angiesworld* le Mar 17 Mai 2011 - 15:45

Merci beaucoup Convivialite pour l’aide de apporté. Very Happy
Mais cela ne fonctionne pas. L’image voulu ne s’affiche pas. Cela ne fait qu’agrandir la taille de la catégorie, ainsi que l'écrit "Derniers Messages".
De plus ce que je voudrais c’est une image qui s’affiche en fond, non seulement du titre de la catégorie mais aussi des sous catégories. Tu vois ce que je veux dire?! ^_^
Sur l’exemple on voit que le fond enveloppe tous les sujets et ne s’arrête pas qu’au titre =)

Ma foi je te remercie énormément de m’avoir aidé.

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en Fond de Catégorie

Message par *angiesworld* le Jeu 19 Mai 2011 - 19:19

Personne pour m'aider?! Neutral

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en Fond de Catégorie

Message par Milouze14 le Jeu 19 Mai 2011 - 20:05

Salut,
si tu veux insérer une image ou même deux Very Happy .
Dans ton C.S.S

Insères ceci:

Code:

.secondarytitle
{

background-color: #la couleur;
background-image: url("le lien de ta première image"),  url("le lien de ta deuxième image");
background-position:la position; la deuxième position;
background-repeat: no-repeat;

}

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

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

Résolu Re: Image en Fond de Catégorie

Message par *angiesworld* le Jeu 19 Mai 2011 - 20:11

Merci infiniment milouze14 Razz
Je vais essayer le code de ce pas. Néanmoins je voudrais savoir ce que tu appelle par :
Code:

background-position:la position; la deuxième position;
Que suis-je censé écrire?! =/

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en Fond de Catégorie

Message par Milouze14 le Jeu 19 Mai 2011 - 21:44

Salut,

Code:
background-position:la position, la deuxième position;
la position
topleft
topright
bottomleft
bottomright
la deuxième position
topleft
topright
bottomleft
bottomright
Edit sur le positionnement
a++


Dernière édition par milouze14 le Ven 20 Mai 2011 - 18:37, édité 1 fois

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

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

Résolu Re: Image en Fond de Catégorie

Message par *angiesworld* le Ven 20 Mai 2011 - 18:33

Merci Milouze14 pour la précision.
Cependant cela semble ne pas fonctionner. Confused
En effet aucune des deux images mise n’apparaît. Seul la couleur choisi vient à s’afficher.


Le code:
Code:
.secondarytitle
{

background-color: #B57D55;
background-image: url("http://imageshack.us/photo/my-images/200/110219023744284923.png/"),  url("http://imageshack.us/photo/my-images/41/405663haut.png/");
background-position:topleft; bottomleft;
background-repeat: no-repeat;

}
L’aurais je mal remplit?!

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en Fond de Catégorie

Message par Milouze14 le Ven 20 Mai 2011 - 18:36

Salut
oui effectivement

modifies ton css
Code:
.secondarytitle
{

background-color: #B57D55;
background-image: url("http://imageshack.us/photo/my-images/200/110219023744284923.png/"),  url("http://imageshack.us/photo/my-images/41/405663haut.png/");
background-position:topleft, bottomleft;
background-repeat: no-repeat;

}

le positionnement doit être séparé par une virgule et non un point virgule Confused

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

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

Résolu Re: Image en Fond de Catégorie

Message par *angiesworld* le Ven 20 Mai 2011 - 19:32

Modification faite! Malheureusement le résultat est le même.. Snifff
Merci tout d’même d’avoir essayée de m'aider ^_^

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en Fond de Catégorie

Message par Milouze14 le Ven 20 Mai 2011 - 19:55

Salut,
as tu optimisé ton CSS ?

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

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

Résolu Re: Image en Fond de Catégorie

Message par *angiesworld* le Ven 20 Mai 2011 - 20:00

Comment ça?! Tu veux dire mettre à jour avec le code que tu m’as donné?!
Oui je l’ai fait.
Pas totalement bête la Ginette! xD

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en Fond de Catégorie

Message par Milouze14 le Ven 20 Mai 2011 - 20:02

Salut,

non cela n'a rien a voir il faut optimiser ta feuille de style pour un rendu optimal.



a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

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

Résolu Re: Image en Fond de Catégorie

Message par *angiesworld* le Ven 20 Mai 2011 - 20:10

Ah ça.. Dit elle honteusement. Embarassed
Donc non il n’était pas optimisé.. Ceci dit je n’ai jamais eu besoin de l’optimiser pour que les codes fonctionne correctement.
Ma foi.. En l’ayant optimisé et en ayant rajouté le code donné.. Je peux donc confirmer, que cela ne marche toujours pas.
Le rendu est malheureusement toujours le même =/

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en Fond de Catégorie

Message par Milouze14 le Ven 20 Mai 2011 - 20:28

Salut,
tu peux donner ton template index_box stp
a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

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

Résolu Re: Image en Fond de Catégorie

Message par *angiesworld* le Ven 20 Mai 2011 - 20:36

Pas de souci.. Razz
En espérant que tu sauras m’éclairer!
Amicalement, Angie
Code:
<center><img src="http://img822.imageshack.us/img822/7874/sanstitre2lad.png"></center><br>
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <!-- BEGIN forum_link_no -->
      <td class="row3 over" align="center" valign="middle" height="50">
            <span class="gensmall">{catrow.forumrow.TOPICS} Sujets || {catrow.forumrow.POSTS} Messages</span><br />
<br/>
    <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
          </td>
      <!-- END forum_link_no -->
      <!-- BEGIN forum_link -->
      <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
      <!-- END forum_link -->
   </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 -->

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en Fond de Catégorie

Message par Milouze14 le Sam 21 Mai 2011 - 3:29

Salut angie,
je ne comprend pas pourquoi mettre deux images comme les tiennes sur
la catégorie, elles font pratiquement la même taille Crying or Very sad .
Bref les dimensions sont bien trop grandes et il faut modifier aussi la hauteur
pour que tes images puissent être incorporées.
J'ai modifié aussi l’hébergeur de tes images car le caractère / passe pas très bien
dans les feuilles de style.
donc voici ton c.s.s:

Code:
.secondarytitle
{
background-color: #B57D55;
background-image: url("http://i23.servimg.com/u/f23/16/03/32/63/11021910.png"), 
url("http://i23.servimg.com/u/f23/16/03/32/63/40566310.png");
background-position:topleft, bottomleft;
background-repeat: no-repeat;
height:229px;
}



a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

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

Résolu Re: Image en Fond de Catégorie

Message par *angiesworld* le Sam 21 Mai 2011 - 15:27

Salut le Ptit Lu
Tout d’abord. Merci d’autant t'impliquer dans ce problème qu’est le mien..
Néanmoins je tiens à préciser que ce ne sont pas les images que j’ai l’intention de mettre sur mon forum.. Ce sont des images « Tests » que j’ai justement prit sur des forums qui eux ont réussi à faire ce que je voudrais pour mes catégories..
Si avec leurs images j’arrive a obtenir le même résultat qu’eux alors je serais que je suis en bonne voie. En revanche si ça n’est pas le cas c’est que le codage n’est pas bon.
Le forum dont j’ai prit la 1er Image (A savoir celle du titre de la catégorie) http://www.feeltherock.com/
Le forum ou j’ai prit la 2n Image ( A savoir celle du fond des sous catégories) http://goldheart.1talk.net/forum

Or, bien que ton aide m’ai été immense j’ai le regret de constater que c’est loin d’être ce que je désirais.
Voyez par vous-même :
http://becrazy.forumactif.org/

Alors que les deux forums (dont je viens de te donner les liens) ont un design tout autre. =//
Il s’agit de deux images distinct il me semble..
Une en guise de Titre de Catégorie.. Et une en image de fond des sous catégories..

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image en Fond de Catégorie

Message par Milouze14 le Dim 22 Mai 2011 - 7:57

Salut,
ok je comprend un peu mieux et désolé pour le retard ....
Affichage/Templates/Général/index_box
recherche ceci:

Code:
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">


Supprimes et remplace par ceci:

Code:
<td class="fondimgcategorie" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
Valide la modification en cliquant sur

Dans ta feuille de style:

Affichage/Images et Couleurs/Couleurs/Feuille de style CSS

colle ceci:
Code:
.fondimgcategorie
{
background-color: la couleur de ton choix;
background-image: url("http://i23.servimg.com/u/f23/16/03/32/63/40566310.png");
background-repeat:no-repeat;
height:229px;
}

modifies aussi ceci:
Code:
.secondarytitle
{
background-color: #B57D55;
background-image: url("http://i23.servimg.com/u/f23/16/03/32/63/11021910.png");
background-position:center;
background-repeat: no-repeat;
}
Enregistres ton css et dis nous ce qu'il en est stp.

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

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

Résolu Re: Image en Fond de Catégorie

Message par *angiesworld* le Dim 22 Mai 2011 - 16:19

Je ne saurais comment montrer exactement ce que cela donne donc je vous envoie le lien histoire que vous voyez de par vous-même ce qu’il en est :
http://becrazy.forumactif.org/

Je pense qu’il faut que je modifie la taille des images, non?!
Par contre j’ai vu que le titre « Dernier Message » avait aussi disparu dans l’exemple donné..
A votre avis s’agit t il d’une simple suppression de titre ou d’un remplacement par image?!


EDIT: En jetant un coup d’œil de plus prêt à l’image fourni comme « exemple » je remarque qu’il y a également une image en bas de catégorie (un peu comme celle du titre) du coup cela me fait me demander si il s’agit bien de 3 images distincte ou s’il il ne s’agit pas d’une seule et même image?!

Grrr.. Décidément je t’en donne du travail.
J’suis vraiment désolé.
Si tu venais à te décourager ne t’en fais pas je le comprendrai Wink

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image en Fond de Catégorie

Message par Milouze14 le Dim 22 Mai 2011 - 17:21

Salut,

modifies ton css pour voir,
la couleur de fond catégorie n'est pas appropriée
Code:
.secondarytitle
{
background-color: #F4F0D7;
background-image: url("http://i23.servimg.com/u/f23/16/03/32/63/11021910.png");
background-repeat: no-repeat;
background-position: center;
min-height:100px;
}
.fondimgcategorie
{
background-color: #fffbab;
background-image: url("http://i23.servimg.com/u/f23/16/03/32/63/40566310.png");
background-repeat: no-repeat;
height: 229px;
}

Pour le reste je ne pourrais pas en faire plus car le temps me manque Embarassed
a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

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

Résolu Re: Image en Fond de Catégorie

Message par *angiesworld* le Dim 22 Mai 2011 - 17:28

La couleur n’est pas approprié parce que j’ai prit la 1er qui venait.. xD
C’était juste pour voir ce que ça donnait.
Donc la couleur de fond etant changée ça fait plus « propre » en effet mais ça ne change en rien le problème rencontré.

Ceci dit. Merci!
Merci d’avoir prit de ton temps, ô combien précieux pour me venir en aide.
Infiniment ♥

Tache donc de bien prendre soin de toi & Bonne Continuation!
Amicalement, Angie

PS : Un ptit +1 de Réputation car tu as très bon fond!

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en Fond de Catégorie

Message par Milouze14 le Dim 22 Mai 2011 - 18:18

Salut,

merci c'est gentil de ta part.
Par contre une petite modif pas négligeable pour afficher complétement l'image.

Code:

.secondarytitle
{
background-color: #F4F0D7;
background-image: url("http://i23.servimg.com/u/f23/16/03/32/63/11021910.png");
background-repeat: no-repeat;
background-position: center;
height:96px;
}


a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

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

Résolu Re: Image en Fond de Catégorie

Message par *angiesworld* le Dim 22 Mai 2011 - 18:25

Merci de cette dernière petite rectif..
Et c’est sur la pointe des pieds qu’il part en beauté..

Encore Merci à toi pour tout ça. ^_^
xoXox

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image en Fond de Catégorie

Message par *angiesworld* le Sam 28 Mai 2011 - 13:34

Je ne sais pas si cela aboutira vraiment mais comme on a proposé de m’aider concernant ce sujet je vais donc fermer celui-ci ne le marquant comme étant « Résolu ».
Merci donc à tout ceux qui ont acceptés de m’aider..
Amicalement, Angie

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

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