Sujets similaires

Dernière édition par claaire le Mer 12 Sep 2012, 07:39, édité 1 fois

Bonjour à tous! Image mouvante à gauche de la description des catégories. [RESOLU] 1001172573

J'ai récemment vu sur un forum une image à gauche, qui au passage de la souris tournait sur elle même puis se "rangeait" à moitié sous la description. J'ai trouvé cela... fantastique! Donc, j'ai essaye de refaire ça à ma façon mais je rencontre quelques problèmes! Dans mon ancien forum j'avais déjà fait ça, au passsage de la souris l'image s'opacisait (euh vous comprenez hein) bon, devenait opaque. Seulement c'était facile, c'était dans le "cadre" de la description donc il me suffisait de placer l'image accompagné de la div dans mes descriptions.

Seulement là, j'aimerais que l'image soit en dehors de la div. Mais si je met dans la description ca va se mettre dedans. Je pensais donc faire un jeu de margin à donf à droite ou à gauche mais ca me parait compliquer et ça risque de décaler les descriptions en elle même non ?

Si quelqu'un aurait la solution, ca m'aiderait énormément Image mouvante à gauche de la description des catégories. [RESOLU] 3451650135

Image mouvante à gauche de la description des catégories. [RESOLU] 3451650135

ps: voilà "l'effet" que j'aimerais "reproduire": http://www.the-island.org/ . Passez votre souris sur l'image à gauche. Sympa non ? Very Happy

Je suppose que c'est un jeu de rotation dans le css ca je peux encore bidouiller, mais c'est vraiment la position du truc qui m'ennuie, parceque j'aimerais que l'image soit à chaques fois différente selon la catégorie, je ne peux donc pas mettre dans mon template, non ? (mes notions en css/template sont cependant restreinte donc je me trompe peut-être)

Après ce long roman pour un petit problème, je me tais et merci d'avance à ceux qui m'aideront!

Déjà, il te faut rajouter un class dans le template index_box, à l'image, là... Enfin, si tu as besoin d'aide, mets ton template, je te montrerai l'endroit. ^^ Donc, suite à ça, tu fais tes modifications dans le CSS...

Code:: .image_new_no-new {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

Voilà voilà ! ~ Si tu as besoin d'informations sur les transition, transformations ou autres, n'hésite pas à demander plus de détails. :3

Bon pour tout avouer j'étais en train d'essayer de bidouiller un truc mais moi et la template index_box on est pas amie et c'est le foutoir, j'ai des div/span/table qui clignote rouge partout et quand j'en ferme une c'est une autre qui s'allume c'est la guerre et voilà à quoi je suis arrivée au final, à faire encore pire qu'avant:

http://forumtestvogue.forumgratuit.be/?tt=1

Et voilà ma template qui a pas bonne mine:

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">

<span class="gensmall">{LAST_VISIT_DATE}

{CURRENT_TIME}

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

<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>


<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>




<div style="width: 760px; height: 220px; background-image: url('http://img15.hostingpics.net/pics/571773enttehautvogue.png');" class="titrecat">
<div style="padding-right:130px; padding-top:80px;">{catrow.tablehead.L_FORUM}</div></div><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<table class="modifcat" width="100%" border="0" cellspacing="0" cellpadding="0">





<tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td></tr><tr>

<td class="row1 over" colspan="3" valign="middle" width="100%" height="10">

</td></tr>
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" style="padding-left: 6px; padding-bottom: 3px;">

</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" height="50" style="padding-right: 3px; padding-left: 3px;">

<h{catrow.forumrow.LEVEL} class="hierarchy" style="margin-bottom: 0px;">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</div></a>
</span>
</h{catrow.forumrow.LEVEL}>

<table class="forumlastpost" border="0" cellspacing="0" cellpadding="0" style="margin-right: 5px;" ><tr>
<td>

<span class="genmed"><div class="descriptions-categories">{catrow.forumrow.FORUM_DESC}</div></span>
<br /> <center> <span class="gensmall">

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}


<span class="gensmall"><span id="sublink" class="subforumlink"> {catrow.forumrow.LINKS}</span><script type="text/javascript">document.getElementById('sublink').innerHTML=document.getElementById('sublink').innerHTML.replace(/,/,"<br />");
</script>
</center>
</td>
<td valign="middle" align="center">
<div class=img><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<span class="genmed"><div class="forumdesc1">
<div class="statfofo">
<div class="statdescrip"><br>
{catrow.forumrow.TOPICS} sujets ϟ {catrow.forumrow.POSTS} messages
<br>
<img src="http://i40.servimg.com/u/f40/16/70/76/63/points10.gif">
<br>
{catrow.forumrow.LAST_POST}
</div>
</div>
</div>
</td></tr></table>
<br />

</span>
</span>

</td>





<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</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="http://img15.hostingpics.net/pics/605654enttebasvogue.png" alt="" height="220px" width="760px" /><br><br>

Tout ça pour dire, euh je la met où la div? lalala Image mouvante à gauche de la description des catégories. [RESOLU] 577704309

EDIT: ca va un peu mieux voilà mon template réédité

Hello,

Je viens de jeter un coup d'oeil à ton template (celui que tu as posté) et c'est une véritable horreur Wink

Il y a des balises croisées, des balises qui ne sont jamais fermées, et ainsi de suite.

Ce n'est cependant pas le travail des codeurs ni des codeurs en stage de CSSActif que de nettoyer ton code, aussi toutes les modifs qu'on va te proposer seront l'équivalent de rajouter des bugs dans une structure mangée par les vers ^^' A titre personnel je te conseillerais de repartir d'une structure propre et de faire des modifications un peu plus propres. Presque toute la section Pas à Pas » Structures de forum de CSSActif a été corrigée (titres des sujets en vert), du coup il n'y a pas de raisons que ça soit à ce point mauvais.

Pour commencer, dans ton template, l'affichage de l'image des catégories est géré par cette ligne :

Code:: <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

Juste avant tu as mis un <div class=img> qui constitue à lui tout seul trois erreurs de code puisque :
• la valeur de l'attribut class (c'est à dire la classe img) n'est pas entre guillemets
• Il est déconseillé d'utiliser le nom d'une balise pour une classe (donc la classe .img c'est une très mauvaise idée)
• Il n'y a pas de </div> fermant associé.

Juste en dessous, on voit un span, suivi d'un div. Or, en HTML, il ne faut jamais placer d'élément bloc (div) dans un élément en ligne (span). (Y'en a plein dans ton code d'erreurs de ce genre)

Si tu as des trucs comme ça :

Code:: <span class="genmed"><div class="MaClasse"> ... </div></span>

Tu peux fusionner les classes et virer le span :

Code:: <div class="genmed MaClasse"> ... </div>

C'est pareil d'ailleurs si tu as deux span ou deux div imbriqués si ya pas de raison pour le faire.

De même, plutôt qu'un <center> (balise obsolète à ne pas utiliser), arrange toi simplement pour que ton contenu soit dans un bloc (un div) doté d'une classe contenant la propriété text-align:center;

Enfin, comme je me tue à le répéter aux gens évitez d'abuser de ces [censuré] de marges, le positionnement relatif/absolu est justement fait pour positionner, les marges ne sont pas faites pour ça.

En tout cas pour ta mise en page tu as grosso modo besoin de faire ça :

Code:: <div class="UnConteneur">
<div class="DescForum">Texte description</div>
<img class="ImgForum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>

Code:: .UnConteneur {
width:LARGEURpx;
height:HAUTEURpx;
position:relative; /* bloc de référence */
margin:auto; /*on centre le bloc par rapport à son propre conteneur */
}

.DescForum {
width:100%;
height:100%;
position:absolute; /* on le positionne en absolu pour pouvoir jouer sur la profondeur */
z-index:10; /* on le place au niveau "10" */
}

.ImgForum {
width:LARGEURpx;
height:HAUTEURpx;
position:absolute;
z-index:11; /* au dessus du bloc de description */
top:XXpx; /* position par rapport au haut du bloc de description */
left:XXpx; /* position par rapport à la gauche du bloc de description */
/*On prévoit la transition au survol */
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

/* au survol de l'image... */
.ImgForum:hover {
z-index:9; /* on passe le bloc sous la description */
/* on tourne le bloc */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

Bonjour! Merci beaucoup pour ta réponse Smile

Pour tout ça je ne savais pas et je vais revoir mon code pour corriger les erreurs (me dire quoi faire me suffit, pas besoin de me le faire, c'est comme à l'école j'apprends tout doucement Ange

)

Alors je corrige tout avant de bouger quoi que ce soit. Mais petite question, là le code va s'appliquer sur l'image new/no new non ? (si je me trompe dites le moi) Parce que moi j'aimerais que ça s'appliquer sur une image que j'ajouterais (et qui sera différente pour chaque forum) a coté de chaque description Smile

Comme j'ai dit, c'est grosso modo. Je t'ai donné une piste mais c'est à toi d'adapter à tes besoins. En l'occurence si j'en crois tes propos ce code devra être inscrit directement dans la description des forums (et certainement pas dans le template) pour pouvoir avoir une image différente à chaque forum.

Ok, je vais tester alors, je laisse tout de même le sujet ouvert au cas où je rencontrerais encore d'autres problèmes Smile

merci!

EDIT: premier problème rencontré, l'image se cache a moitié sous le cadre. (j'ai fait un système de margin pour la mettre à gauche) je suppose qu'il faut mettre dans le css un code pour qu'elle soit mise au dessus du fond description mais je ne trouve pas :/
Mon forum test si tu veux voir: http://forumtestvogue.forumgratuit.be/

Salut. x)

Premièrement, tu devrais mettre l'effet de rotation sur l'image elle même, et non sur un conteneur...
Ou encore, faire bouger l'image au survol du conteneur pour éviter que la souris se retrouve en dehors de l'image pendant une transition, ce qui provoque des petits mouvements saccadés... Enfin, je ne suis pas très clair, donc je vais t'expliquer ça avec un cas concret...

Mmh... Pour mettre l'image sur le div conteneur... Tu peux changer l'overflow, pour rendre ce qui dépasse visible... QUitte à, par la suite, mettre tes descriptions dans un nouveau div, placé à l'intérieur du premier, dans lequel tu appliquerai un overflow: auto; ... Une fois de plus, je ne sais pas si je suis assez clair. ^^

Pour ce qui est de mon exemple plus haut, voilà comment j'ai codé tout ça :

Code:: .conteneur_exemple {
width: 80%; /**Largeur **/
margin-left: auto; /** Pour le centrage **/
margin-right: auto; /** Seconde partie pour le centrage **/
background-color: rgba(0,0,0,0.3); /** Couleur de fond **/
height: 100px; /** Hauteur **/
padding: 15px; /** Marge intérieur du div **/
-webkit-border-radius: 5px; /** Arrondissement **/
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 1px #222; /** Ombrage **/
-moz-box-shadow: 0px 0px 1px #222;
-o-box-shadow: 0px 0px 1px #222;
box-shadow: 0px 0px 1px #222;
}

.conteneur_exemple img {
margin-left: -50px; /** Marge à gauche négative pour décaler l'élément ( vers la gauche, logique ) **/
position: absolute; /** Positionner l'élément sans décaler le reste du contenu ( je crois ) **/
-webkit-transition: all 0.5s; /** Transitions **/
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.conteneur_exemple:hover img {
-webkit-transform: rotate(90deg); /** Rotation **/
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

La technique consiste à placer la transition en :hover sur le conteneur de l'élément, de cette manière :

Code:: .conteneu:hover élément {
/** Ensemble des modifications à apporter **/
}

Voilà voilà. (:

Hello claaire !
Ton sujet est-il toujours d'actualité ? La réponse de Damudo t'a-t-elle aidée ?
Si nous n'avons pas de réponse dans 3 jours, le problème sera considéré comme résolu et archivé.
Merci de ta compréhension. Smile

Oui j'ai oublié de répondre. Merci pour ta réponse Damudo No Kyoku ! Ca marche NICKEL, rien à redire! Seulement l'image ne se met pas sous la catégorie après la rotation Smile

EDIT: je ne sais pas à quoi j'ai touché, mais l'image new/no new est en fond de mon block de statistique, je n'arrive plus à la faire bouger DU TOUT! Qu'est-ce que j'ai encore fait comme bêtise? Voilà mon css/template:

Code:: /*CATE*/

.UnConteneur img {
margin-left: -80px; /** Marge à gauche négative pour décaler l'élément ( vers la gauche, logique ) **/
position: absolute; /** Positionner l'élément sans décaler le reste du contenu ( je crois ) **/
-webkit-transition: all 0.5s; /** Transitions **/
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
border-radius: 20px 20px 20px 20px;
background-color: rgb(252, 252, 253);
box-shadow: 0px 1px 2px;
opacity: 0.6;
}

.UnConteneur:hover img {
-webkit-transform: rotate(90deg); /** Rotation **/
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
z-index:9;
}

/*IMAGE QUI TOURNE SUR LE PROFIL*/
.star {margin-top: -95px;
margin-left:90px;
position:absolute;
z-index:11;
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
}

.star:hover {
z-index:9;
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}

/* CATEGORIE REFAITES*/

.photoforum img{ position:absolute;
z-index:11; /* au dessus du bloc de description */
top:0px; /* position par rapport au haut du bloc de description */
left:0px; /* position par rapport à la gauche du bloc de description */
/*On prévoit la transition au survol */
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;}

.descriptions-categories {
background-color:#ffffff;
padding:5px;
-moz-border-radius-topleft: 18px;
-moz-border-radius-topright: 18px;
-moz-border-radius-bottomleft: 18px;
-moz-border-radius-bottomright: 18px;
border-radius: 18px;
-webkit-border-radius: 18px;
margin-left:95px;
margin-top: 15px;
margin-right:2px;
margin-bottom: 2px;
font-family:Arial;
width: 400px;
font-size: 11px;
line-height: normal;
height:100px;
overflow:auto; }

.forumlink a:link, .forumlink a:visited {
text-decoration: none;
color:#F4EF29;
text-shadow: 2px 2px 4px #ffffff;
letter-spacing: -5px;
font-size: 40px;
margin-left:130px;
font-family: 'Handlee', cursive;

}

.forumlink a:hover, .forumlink a:active {
color:#CAC60B;
-o-transition-property: letter-spacing, color;
-webkit-transition-property: letter-spacing, color;
-moz-transition-property: letter-spacing, color;
transition-property: letter-spacing, color;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-duration: 1s;
letter-spacing:5px;
}

.statfofo {
background-color: #FFFFFF !important;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px ;
width: 160px;
height: 110px;
margin-right:20px;
margin-top:-90px;}

.categories {
background-color:#613630;
padding:20px;
margin:10px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
-moz-border-radius-bottomleft: 30px;
-moz-border-radius-bottomright: 30px;
border-radius: 30px;
-webkit-border-radius: 30px;
}

.forumlastpost {
background-color:#563C36;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
-moz-border-radius-bottomleft: 30px;
-moz-border-radius-bottomright: 30px;
border-radius: 30px;
-webkit-border-radius: 30px;
width:95%;
padding:5px;
margin:5px;
margin-top:-26px;}

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr><td class="gensmall" align="center" valign="bottom">
<span class="lientop1"><a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></span> <span class="lientop2"><a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span> <span class="lientop3"><a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></span>
</td>
</tr>
</table>




<div style="width: 760px; height: 220px; background-image: url('http://img15.hostingpics.net/pics/571773enttehautvogue.png');" class="titrecat">
<div style="padding-right:130px; padding-top:80px;">{catrow.tablehead.L_FORUM}</div></div><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<table class="modifcat" width="100%" border="0" cellspacing="0" cellpadding="0">





<tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td></tr><tr>

<td class="row1 over" colspan="3" valign="middle" width="100%" height="10">

</td></tr>
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" style="padding-left: 6px; padding-bottom: 3px;">

</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" height="50" style="padding-right: 3px; padding-left: 3px;">

<h{catrow.forumrow.LEVEL} class="hierarchy" style="margin-bottom: 0px;">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>
</h{catrow.forumrow.LEVEL}>

<table class="forumlastpost" border="0" cellspacing="0" cellpadding="0" style="margin-right: 5px;" ><tr>
<td>

<span class="genmed"><div class="descriptions-categories">{catrow.forumrow.FORUM_DESC}</div></span>
<br /> <center> <span class="gensmall">

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}


<span class="gensmall"><span id="sublink" class="subforumlink"> {catrow.forumrow.LINKS}</span><script type="text/javascript">document.getElementById('sublink').innerHTML=document.getElementById('sublink').innerHTML.replace(/,/,"<br />");
</script>
<td valign="middle" align="center">
<img class="photoforum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<div class="genmed forumdesc1">
<div class="statfofo">
<br>
{catrow.forumrow.TOPICS} sujets ϟ {catrow.forumrow.POSTS} messages
<br>
<img src="http://i40.servimg.com/u/f40/16/70/76/63/points10.gif">
<br>
{catrow.forumrow.LAST_POST}
</div>

</div>
</td></tr></table>
<br />
<span class="gensmall" id="subforums">

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span><script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ● ')).removeAttr('id');
</script>





<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</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="http://img15.hostingpics.net/pics/605654enttebasvogue.png" alt="" height="220px" width="760px" /><br><br>

Bonjour,

D'après le code, je crois que des <tr>, </tr> et <td> ont été omis entre deux bidouillages. Je te laisse relire ton code et fermer/ouvrir tout ce qu'il y a à fermer et ouvrir (je te conseille de potasser les règles de structure d'un tableau Wink

)

J'en ai en effet trouvé qui n'étaient pas fermé, mais mon image persiste derrière alors que j'ai "l'impression" que tout est ok maintenant ...

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr><td class="gensmall" align="center" valign="bottom">
<span class="lientop1"><a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></span> <span class="lientop2"><a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span> <span class="lientop3"><a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></span>
</td>
</tr>
</table>



<div style="width: 760px; height: 220px; background-image: url('http://img15.hostingpics.net/pics/571773enttehautvogue.png');" class="titrecat">
<div style="padding-right:130px; padding-top:80px;">{catrow.tablehead.L_FORUM}</div></div>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">


<tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td></tr><tr>

<td class="row1 over" colspan="3" valign="middle" width="100%" height="10">

</td></tr>
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" style="padding-left: 6px; padding-bottom: 3px;">

</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" height="50" style="padding-right: 3px; padding-left: 3px;">

<h{catrow.forumrow.LEVEL} class="hierarchy" style="margin-bottom: 0px;">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>
</h{catrow.forumrow.LEVEL}>

<table class="forumlastpost" border="0" cellspacing="0" cellpadding="0" style="margin-right: 5px;" ><tr>
<td>

<span class="genmed"><div class="descriptions-categories">{catrow.forumrow.FORUM_DESC}</div></span>
<center>
<span class="liensousfofo" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span><script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ● ')).removeAttr('id');
</script></center>
<td valign="middle" align="center">
<img class="photoforum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<div class="genmed forumdesc1">
<div class="statfofo">
<br />
{catrow.forumrow.TOPICS} sujets ϟ {catrow.forumrow.POSTS} messages
<br />
<img src="http://i40.servimg.com/u/f40/16/70/76/63/points10.gif" />
<br />
{catrow.forumrow.LAST_POST}
</div>

</div>
</td></td></tr></table>


<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>



<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="http://img15.hostingpics.net/pics/605654enttebasvogue.png" alt="" height="220px" width="760px" /><br><br>

Malheureusement, je ne vois pas grand chose d'arrangé ^^'

Une des parties "cassées" est la suivante :

Code:: <table class="forumlastpost" border="0" cellspacing="0" cellpadding="0" style="margin-right: 5px;" ><tr>
<td>

<span class="genmed"><div class="descriptions-categories">{catrow.forumrow.FORUM_DESC}</div></span>
<center>
<span class="liensousfofo" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span><script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ● ')).removeAttr('id');
</script></center>
<td valign="middle" align="center">
<img class="photoforum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<div class="genmed forumdesc1">
<div class="statfofo">
<br />
{catrow.forumrow.TOPICS} sujets ϟ {catrow.forumrow.POSTS} messages
<br />
<img src="http://i40.servimg.com/u/f40/16/70/76/63/points10.gif" />
<br />
{catrow.forumrow.LAST_POST}
</div>

</div>
</td></td></tr></table>

Avec des sauts de ligne et indentations, ça devient très vite évident... Regarde :

Code:: <table class="forumlastpost" border="0" cellspacing="0" cellpadding="0" style="margin-right: 5px;" >
<tr>
   <td>
      <span class="genmed">
         <div class="descriptions-categories">{catrow.forumrow.FORUM_DESC}</div>
      </span>
      <center>
         <span class="liensousfofo" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
         <script type="text/javascript">
            jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ● ')).removeAttr('id');
         </script>
      </center>
   
   <td valign="middle" align="center">
      <img class="photoforum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<div class="genmed forumdesc1">
<div class="statfofo">
<br />
{catrow.forumrow.TOPICS} sujets ϟ {catrow.forumrow.POSTS} messages
<br />
<img src="http://i40.servimg.com/u/f40/16/70/76/63/points10.gif" />
<br />
{catrow.forumrow.LAST_POST}
</div>
</div>
   </td>
   </td>
</tr>
</table>

Maintenant, essaie de suivre le même raisonnement pour corriger cette partie, mais aussi le reste du code (par exemple cette table est incluse dans une cellule qui n'a pas été fermée...).

J'en profite pour te signaler qu'on ne met jamais de div dans un span, donc cette erreur là :

Code:: <span class="genmed">
<div class="descriptions-categories">{catrow.forumrow.FORUM_DESC}</div>
</span>

Gagnerait à être corrigée de cette façon :

Code:: <div class="genmed descriptions-categories">{catrow.forumrow.FORUM_DESC}</div>

Une fois que ton code sera bien propre (et maîtrisé Wink

) on pourra voir plus facilement ce qui pourrait clocher.

Ok c'est vrai qu'en séparant c'est déjà plus clair!
Je crois que j'ai avancé, mais il me reste le début du code où je bug, je n'arrive pas à fermer cette partie à vrai dire:

Code:: <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" height="50" style="padding-right: 3px; padding-left: 3px;">

Voilà donc où j'en suis:

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td class="gensmall" align="center" valign="bottom">
<span class="lientop1"><a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> ● <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> ● <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></span>
</td>
</tr>
</table>



<div style="width: 760px; height: 220px; background-image: url('http://img15.hostingpics.net/pics/571773enttehautvogue.png');" class="titrecat">
<div style="padding-right:130px; padding-top:80px;">{catrow.tablehead.L_FORUM}</div></div>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">


<tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="46">
<img src="{SPACER}" height="0" width="46" alt="." />
</td>
</tr>


<tr>
<td class="row1 over" colspan="3" valign="middle" width="100%" height="10">
</td>
</tr>

<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" style="padding-left: 6px; padding-bottom: 3px;">
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" height="50" style="padding-right: 3px; padding-left: 3px;">

<h{catrow.forumrow.LEVEL} class="hierarchy" style="margin-bottom: 0px;">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>
</h{catrow.forumrow.LEVEL}>

<table class="forumlastpost" border="0" cellspacing="0" cellpadding="0" style="margin-right: 5px;" >
<tr>
<td>
<span class="genmed descriptions-categories">{catrow.forumrow.FORUM_DESC}</span>
<center>
<span class="liensousfofo" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
<script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ● ')).removeAttr('id');</script>
</center>
</td>
<td valign="middle" align="center">
<img class="photoforum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<div class="genmed forumdesc1">
<div class="statfofo">
<br />
{catrow.forumrow.TOPICS} sujets ϟ {catrow.forumrow.POSTS} messages
<br />
<img src="http://i40.servimg.com/u/f40/16/70/76/63/points10.gif" />
<br />
{catrow.forumrow.LAST_POST}
</div>

</div>
</td>
</tr>
</table>


<table>

<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="http://img15.hostingpics.net/pics/605654enttebasvogue.png" alt="" height="220px" width="760px" /><br><br>

Merci pour ton aide et tes conseils Smile

Alors, il te manque un <tr> juste au dessus de cette partie :

Code:: <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" style="padding-left: 6px; padding-bottom: 3px;">
</td>

Il y a un  à supprimer (je comprends même pas ce qu'il fait là en fait), de même que le <table> qui le suit, et qui n'a lui non plus rien à faire là.

Juste au dessus de ce commentaire parasite, tu as fermé ta table, et comme je l'avais dit dans mon précédent message, il te faut aussi fermer la cellule, donc tu dois rajouter (après le </table>) un </td>... et un </tr> évidemment (cf ma remarque plus haut)

Juste pour voir si tu sais ce que tu fais, je te suggère de rajouter ces deux commentaires [u]au début et à la fin de la partie de code qui gère l'affichage d'un forum (icone, titre, description, sous forums, statistiques...) :

Code:: 

et

Après ça, on saura où il faut intervenir @_@

J'ai fait tout ce que tu m'as dit mais ca m'affiche un message d'erreur me disant qu'une balise n'a soit pas été fermée ou pas été ouverte. et je ne peux pas enregistrer mon template. Pourtant je n'ai plus aucune balise qui s'affiche en rouge ...

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr><td class="gensmall" align="center" valign="bottom">
<div class="lesliens"><span id="lientop1"><a class="gensmall" href="{U_SEARCH_NEW}">NOUVEAUX MESSAGES</a></span> ● <span id="lientop2"><a class="gensmall" href="{U_SEARCH_SELF}">MES MESSAGES</a></span> ● <span id="lientop3"><a class="gensmall" href="{U_SEARCH_UNANSWERED}">MESSAGES SANS REPONSES</a></span>
</div>
</td>
</tr>
</table>



<div style="width: 760px; height: 220px; background-image: url('http://img15.hostingpics.net/pics/571773enttehautvogue.png');" class="titrecat">
<div style="padding-right:130px; padding-top:80px;">{catrow.tablehead.L_FORUM}</div></div>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">





<tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="46">
<img src="{SPACER}" height="0" width="46" alt="." />
</td>
</tr>


<tr>
<td class="row1 over" colspan="3" valign="middle" width="100%" height="10">
</td>
</tr>
<tr>
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" style="padding-left: 6px; padding-bottom: 3px;">
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" height="50" style="padding-right: 3px; padding-left: 3px;">

<h{catrow.forumrow.LEVEL} class="hierarchy" style="margin-bottom: 0px;">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>
</h{catrow.forumrow.LEVEL}>

<table class="forumlastpost" border="0" cellspacing="0" cellpadding="0" style="margin-right: 5px;" >
<tr>
<td>
<span class="genmed descriptions-categories">{catrow.forumrow.FORUM_DESC}</span>
<center>
<span class="liensousfofo" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
<script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ● ')).removeAttr('id');</script>
</center>
</td>
<td valign="middle" align="center">
<img class="photoforum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<div class="genmed forumdesc1">
<div class="statfofo">
<br />
{catrow.forumrow.TOPICS} sujets ϟ {catrow.forumrow.POSTS} messages
<br />
<img src="http://i40.servimg.com/u/f40/16/70/76/63/points10.gif" />
<br />
{catrow.forumrow.LAST_POST}
</div>

</div>
</td>
</tr>
</table></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="http://img15.hostingpics.net/pics/605654enttebasvogue.png" alt="" height="220px" width="760px" /><br><br>

Aloooors, il restait quelques erreurs mais fondamentalement tu ne pouvais pas vraiment le savoir, donc voilà déjà ton template corrigé (j'ai juste déplacé le commentaire de repère et remis les "INC" à la bonne place) Tu as fait du bon boulot Wink

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr><td class="gensmall" align="center" valign="bottom">
<div class="lesliens"><span id="lientop1"><a class="gensmall" href="{U_SEARCH_NEW}">NOUVEAUX MESSAGES</a></span> ● <span id="lientop2"><a class="gensmall" href="{U_SEARCH_SELF}">MES MESSAGES</a></span> ● <span id="lientop3"><a class="gensmall" href="{U_SEARCH_UNANSWERED}">MESSAGES SANS REPONSES</a></span>
</div>
</td>
</tr>
</table>



<div style="width: 760px; height: 220px; background-image: url('http://img15.hostingpics.net/pics/571773enttehautvogue.png');" class="titrecat">
<div style="padding-right:130px; padding-top:80px;">{catrow.tablehead.L_FORUM}</div>
</div>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">





<tr>
   <td class="row1 over" colspan="3" valign="middle" width="100%" height="10">
      
   </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" style="padding-left: 6px; padding-bottom: 3px;">
      
   </td>

   <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" height="50" style="padding-right: 3px; padding-left: 3px;">

      <h{catrow.forumrow.LEVEL} class="hierarchy" style="margin-bottom: 0px;">
         <span class="forumlink">
            <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
         </span>
      </h{catrow.forumrow.LEVEL}>

      <table class="forumlastpost" border="0" cellspacing="0" cellpadding="0" style="margin-right: 5px;" >
         <tr>
            <td>
               <span class="genmed descriptions-categories">{catrow.forumrow.FORUM_DESC}</span>
               <center>
                  <span class="liensousfofo" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                  <script type="text/javascript">
                     jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ● ')).removeAttr('id');
                  </script>
               </center>
            </td>
            <td valign="middle" align="center">
               <img class="photoforum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
               <div class="genmed forumdesc1">
                  <div class="statfofo">
                     <br />
                     {catrow.forumrow.TOPICS} sujets ϟ {catrow.forumrow.POSTS} messages
                     <br />
                     <img src="http://i40.servimg.com/u/f40/16/70/76/63/points10.gif" />
                     <br />
                     {catrow.forumrow.LAST_POST}
                  </div>
               </div>
            </td>
         </tr>
      </table>

   </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="http://img15.hostingpics.net/pics/605654enttebasvogue.png" alt="" height="220px" width="760px" /><br><br>

Maintenant, revenons à ton problème, tu souhaiterais avoir une image qui tourne au niveau de tes descriptions ? Ailleurs ? Si elle est différente pour chaque forum, elle devra être placée dans les descriptions, donc c'est important à savoir pour ajuster ton template. Apparemment ça a l'air de marcher à peu près bien déjà ?

(Soit dit en passant, tu gagnerais à retirer tout le CSS de ton template et à remplacer par des classes (c'est à dire qu'au lieu d'avoir des style="plein de propriétés CSS", tu auras des class="UneClasse" et dans ton CSS tu mettras .UneClasse { plein de propriétés CSS } Ceci t'aidera beaucoup vu qu'une fois que tu auras mis des classes partout, il ne te restera qu'à éditer ton CSS pour les modifications sans avoir tout le temps à mettre le nez dans les templates)

Ok merci! J'ai copié/collé le code mais il m'affiche toujours le message d'erreur ...

La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte.

Alors oui, je souhaitais mettre une image qui tourne au niveau des catégories. Ca marche déjà plus ou moins (voilà le lien de mon forumtest si tu veux jeter un coup d'oeil : http://forumtestvogue.forumgratuit.be/ ) La dernière chose que je voudrais faire à ce niveau là c'est qu'elle se replace sous la description quand elle a fait le tour sur elle même (pour ne pas qu'elle gêne la lecture de la description) Smile

Ensuite je rencontre un autre problème que tu pourras voir sur le forum test. L'image new/no new/lock est calée dans le fond de mon cadre où j'ai mis les statistiques, je ne sais pas pourquoi ...

EDIT: j'ai supprimé le template pour coller le code corrigé et vu que j'ai un message d'erreur mes catégories ne ressemblent plus à rien! Heureusement j'avais fait un screenshot:

Image mouvante à gauche de la description des catégories. [RESOLU] Screen21

Image mouvante à gauche de la description des catégories. [RESOLU] Screen21

Ah mais oui... il manque la fermeture de boucle de forumrow (les BEGIN/END fonctionnent comme des balises HTML, faut penser à les fermer). Normalement ça devrait marcher avec celui là :

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr><td class="gensmall" align="center" valign="bottom">
<div class="lesliens"><span id="lientop1"><a class="gensmall" href="{U_SEARCH_NEW}">NOUVEAUX MESSAGES</a></span> ● <span id="lientop2"><a class="gensmall" href="{U_SEARCH_SELF}">MES MESSAGES</a></span> ● <span id="lientop3"><a class="gensmall" href="{U_SEARCH_UNANSWERED}">MESSAGES SANS REPONSES</a></span>
</div>
</td>
</tr>
</table>



<div style="width: 760px; height: 220px; background-image: url('http://img15.hostingpics.net/pics/571773enttehautvogue.png');" class="titrecat">
<div style="padding-right:130px; padding-top:80px;">{catrow.tablehead.L_FORUM}</div>
</div>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">



<tr>
<td class="row1 over" colspan="3" valign="middle" width="100%" height="10">

</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" style="padding-left: 6px; padding-bottom: 3px;">

</td>

<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" height="50" style="padding-right: 3px; padding-left: 3px;">

<h{catrow.forumrow.LEVEL} class="hierarchy" style="margin-bottom: 0px;">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>
</h{catrow.forumrow.LEVEL}>

<table class="forumlastpost" border="0" cellspacing="0" cellpadding="0" style="margin-right: 5px;" >
<tr>
<td>
<div class="genmed descriptions-categories">{catrow.forumrow.FORUM_DESC}</div>
<center>
<span class="liensousfofo" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
<script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ● ')).removeAttr('id');
</script>
</center>
</td>
<td valign="middle" align="center">
<img class="photoforum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<div class="genmed forumdesc1">
<div class="statfofo">
<br />
{catrow.forumrow.TOPICS} sujets ϟ {catrow.forumrow.POSTS} messages
<br />
<img src="http://i40.servimg.com/u/f40/16/70/76/63/points10.gif" />
<br />
{catrow.forumrow.LAST_POST}
</div>
</div>
</td>
</tr>
</table>

</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="http://img15.hostingpics.net/pics/605654enttebasvogue.png" alt="" height="220px" width="760px" /><br><br>

Pour ton image j'imagine que tu as mis le code directement dans les descriptions ?

Alors essaie avec ça :
• D'abord définis la classe .UnConteneur que tu as utilisée, et positionne la en relatif (position:relative;)

• Tu dois placer ton texte de description à l'intérieur du bloc <div class="UnConteneur">, à la suite de l'image. Et lui même doit être entouré par exemple de balises de paragraphe (ce sera plus simple), c'est à dire <p> et </p>, donc comme ça :

Code:: <div class="UnConteneur">
<img src="ton image" atl="" />
<p>Description</p>
</div>

C'est important car il faut que le texte soit dans son propre bloc, pour que l'image passe sous le bloc en question quand elle tourne.

• Tu dois légèrement rectifier le code associé au sélecteur .UnConteneur img en changeant margin-left par left et en rajoutant un top:0; et z-index:0;. Le z-index est là pour le mettre au niveau "le plus bas possible" pour ainsi dire. Pour le reste c'est juste une correction dans la mesure où on n'utilise pas de marges quand on fait un positionnement relatif et absolu, nom d'un hachis parmentier ! è_é

• Du coup le z-index:9 que tu avais éhontément repris de mon exemple ne sert plus à rien x)

• Et tu n'as plus qu'à rajouter un CSS de ce genre : .UnConteneur p { position:relative;z-index:50;} On met le paragraphe en positionnement relatif (sinon le z-index ne marche pas) et on lui applique un z-index élevé pour qu'il soit "au dessus" de l'image. Tu peux aussi rajouter une couleur de fond.

Donc voilà pour l'image j'ai suivis tes instructions mais le résultat n'est pas du tout celui attendu !
http://forumtestvogue.forumgratuit.be/

Voilà ma page css corrigée

Code:: .UnConteneur img {
left: -80px;
position: relative;
-webkit-transition: all 0.5s
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
border-radius: 20px 20px 20px 20px;
background-color: rgb(252, 252, 253);
box-shadow: 0px 1px 2px;
opacity: 0.6;
top:0;
z-index:0;
}

.UnConteneur:hover img {
-webkit-transform: rotate(90deg); /** Rotation **/
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

.UnConteneur p {
position:relative;
z-index:50;}

Il manque le .UnConteneur { position:relative ;}

Mais il y a un souci que je ne comprends pas, quand j'ai testé tout à l'heure avec firebug ça marchait, qu'est-ce que c'est que ce binz ><

Edit : AH ! Trouvé !

Retire l'overflow dans .description_categories et applique le au paragraphe .UnConteneur p (n'oublie pas de fixer une hauteur maximale aussi)

Ah oui juste! J'obtiens donc ceci comme css:

Code:: .UnConteneur img {
left: -80px; /** Marge à gauche négative pour décaler l'élément ( vers la gauche, logique ) **/
position: relative; /** Positionner l'élément sans décaler le reste du contenu ( je crois ) **/
-webkit-transition: all 0.5s; /** Transitions **/
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
border-radius: 20px 20px 20px 20px;
background-color: rgb(252, 252, 253);
box-shadow: 0px 1px 2px;
opacity: 0.6;
top:0;
z-index:0;
}

.UnConteneur { position:relative ;}

.UnConteneur:hover img {
-webkit-transform: rotate(90deg); /** Rotation **/
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

.UnConteneur p { position:relative;
z-index:50;
height:100px;
overflow:auto; }

Mais mon texte est en dehors de mon cadre et mon image ne se faufile toujours pas sous la description :/ ( http://forumtestvogue.forumgratuit.be/ )

Alors j'avais oublié, l'image doit être en position absolue (dans .UnConteneur img, tu remplaces relative par absolute)

Et sinon, si, si, l'image passe SOUS le texte. Par contre le bloc qui contient un fond blanc, c'est description-categories, du coup elle ne peut pas passer en dessous. C'est pour ça que je te disais de rajouter un fond (blanc) au paragraphe Wink

Pour les icones de catégories qui sont sous les statistiques des forums, c'est parce qu'il y a des marges dans la div .statsfofo (on devrait pendre les gens qui écrivent "fofo" grml *ronchonne* *ronchonne*...). Du coup, ça déplace le bloc blanc qui contient les statistiques, mais ça le place aussi sur l'image (même si je ne comprends pas pourquoi elle est quand même visible...)

Ahhh ok! Merci, ca marche parfaitement bien maintenant!

Et j'ai enfin réussi à mettre en page tout ça correctement! Un grand merci à toi en tout cas Smile

Salut,
Ton problème est donc résolu ?

Merci de ta réponse. Image mouvante à gauche de la description des catégories. [RESOLU] 90719

Bonne journée,

Image mouvante à gauche de la description des catégories. [RESOLU]

Image mouvante à gauche de la description des catégories. [RESOLU]

Sujets similaires

Sujets similaires

Partenaires Or