Sujets similaires

Bonjour à vous Very Happy

J'aimerais savoir comment mettre une image de côté comme ceci dans les catégories sur les forums:

Spoiler:

Je vous remercie d'avance Smile

Bisouuux >3< <3

Généralement on utilise clear:both (appliqué à l'image) pour mettre des images de cette façon.

Tout d'abord merci de me répondre ^-^
Vraiment, & je le met où ce clear:both ?

Il faut qu'il soit appliqué à l'image, tu peux mettre tes images là où tu as besoin avec une classe (dans laquelle le clear:both est inscrit) et écrire directement le texte à la suite.

ah ok donc si je comprend bien je met clear:both puis l'image et mon texte bla bla ?
désolée je suis une quiche en code ;(

Code:: <img src="url" class="categoryImage" / > Blablabla mon texte

Et pour ce qui est dans la feuille css:

Code:: .categoryImage {
clear:both;
}

Merci je vais essayer tout de suite ! <3

EDIT: Aie non c'est caca.. L'image s'affiche bel et bien mais elle décale le texte et le déforme parfois, j'aimerais que l'image soit en face (à côté) du texte comme sur le modèle, et qu'il y ai une barre défilante verticale aussi

Hey.

Essaye comme-ci...

A partir de ce que t'a donné Illadon, englobe le texte dans une div, qu'on nommera "categoryText" par exemple (pour suivre la logique).

Code:: <img src="URL" class="categoryImage" /><div class="categoryText">Blablabla mon texte</div>

En CSS, tu vas appliquer un float à ton image pour qu'elle aille sur la gauche. Quant au texte, on va lui donner une hauteur fixe, et un overflow qui va lui dire de mettre une barre défilante si le contenu dépasse la hauteur.

Code:: .categoryImage {
float:left;
padding-right:5px; /* espace entre l'image et le texte */
}
.categoryText {
overflow-y:auto;
height:100px; /* à changer comme tu veux, en fonction de l'hauteur de l'image */
}

Si tu veux que la barre défilante apparaisse tout le temps, même si le texte est court, remplace "auto" par "scroll".

Merci DOARE mais ca ne marche toujours pas ;( ca me met l'image en haut du texte

Pourrait-on avoir le lien du forum où tu testes ça ? Smile

0ui assurément mais j'ai enlever le résultat :s
http://blackdeadredemption.forumgratuit.org/

Ton template Index_box pourrait être utile, question de voir de quoi ça a l'aire ?

C'est difficile de voir ce qui cloche si tu ne laisses pas un test. ^^'
D'autant que chez moi, ça marche. Donc il serait vraiment utile que tu remettes quelque part, qu'on voit ça "en live". Si ça se trouve, c'est juste une "class" oubliée ou mal écrite. Smile

Bon très bien je vous donne mon Index-box et refait le test :s

INDEX_BOX:

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
   <td valign="bottom">
      
      <span class="gensmall">{LAST_VISIT_DATE}<br />
      {CURRENT_TIME}<br />
      </span>
      
      <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
   </td>
   <td class="gensmall" align="right" valign="bottom">
      
      <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
      <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
      
      <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
   </td>
</tr>
</table>
<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>


<tr>
   
   <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
      <h{catrow.cathead.LEVEL} class="hierarchy">
         <span class="cattitle">
            <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
         </span>
      </h{catrow.cathead.LEVEL}>
   </td>
   <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>


<tr>
   
   <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
   
   <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 width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

</span>
</h{catrow.forumrow.LEVEL}></td><td style="padding-left: 40px; text-align: right;" class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</td></tr></tbody></table>
      <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
      <span class="gensmall">
         
         {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
         
         <div class="gloubiboulga">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
      </span>
   </td>
   <td class="row3 over" align="center" valign="middle" height="50">
      <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
   </td>
</tr>


<tr>
   
   <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table><img src="{SPACER}" alt="" height="5" width="1" />

Et voici pour le TEST

Ben... ça marche, non ? ^^'

Bah non y a pas le cadre sous le texte comme je voulais :s

Aaah, mais c'est autre chose ça. Ta question d'origine portait sur le placement de l'image. Elle est placée comme il faut, donc. Smile

Après, c'est juste du style. Si tu veux ajouter une bordure au texte, une couleur de fond, je ne sais quoi, il suffit d'ajouter les propriétés à "categoryText". Par exemple...

Code:: .categoryText {
border: 1px #000000 solid; /*bordure unie noire de 1px sur tous les côtés*/
background-color:#cccccc; /*fond gris*/
padding: 2px; /*espace entre le texte et la bordure*/
}

Bref, à toi de voir, après... Smile

Fwaaah merci
si je pouvais je t'embrasserais Razz

Ah pardon du DP mais j'aimerai que le cadre noir disparaisse autour comme sur ce forum-ci: http://pensionnat-yokasami.1fr1.net/

Tu n'as qu'à enlever la propriété "border". Smile

Si, au passage, tu souhaites que le cadre du texte soit collé à l'image, par rapport à ce que je t'ai donné...

Code:: .categoryImage {
float:left; /*place l'image à gauche du texte*/
padding-right:5px; /* A RETIRER ; espace entre l'image et le texte */
}
.categoryText {
overflow-y:auto; /*met une barre de défilement si le contenu dépasse la hauteur ; remplacer "auto" par "scroll" pour que la barre apparaisse tout le temps*/
height:100px; /* à changer comme tu veux, en fonction de l'hauteur de l'image */
border: 1px #000000 solid; /* A RETIRER ; bordure unie noire de 1px sur tous les côtés*/
background-color:#cccccc; /*fond gris*/
padding: 2px 2px 2px 5px; /*haut droite bas gauche ; espaces entre le texte et la bordure, ajouter de l'espace à gauche permet d'espacer le texte de l'image*/
}

Fais bien attention à toutes les explications. Elles devraient te suffire pour modifier l'apparence et atteindre ce que tu souhaites. Wink