Problème d'allignement d'image et texte

[Oz-Chan]

Bonjour,
j'ai un petit problème concernant l'alignement d'un texte autour d'une image.
J'aimerai que le texte passe en dessous de l'image mais impossible de trouver comment... Voilà l'image

mon HTML d'une catégorie :

Code:

<table class="desc" border="0">
   <tr>
      <td>
           <div class="txtdesc"> Résidence principale des Bezarius. Excentré, loin de la foule qui grouille en pleine journée dans les rues de la capitale, le Manoir dégage un air familier lorsque l'on s'en approche. Étrangement, ses visiteurs s'y sentent chez eux. Serait-ce le cadre idyllique qui l'entoure, les quelques arbres que l'on peut apercevoir depuis les fenêtres, ou alors les papiers peints qui rappellent les nombreuses années déjà écoulées ? Oz et Ada y ont passé leur enfance, rejoints ensuite par le jeune Gilbert. Peut-être trouverez-vous quelques traces de leurs jeux d'antan.</div>
      <td>
         <img class="pix" src="http://i62.servimg.com/u/f62/13/82/15/09/vessal10.jpg"/>
      </td>
   </tr>
   </table>
         <a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f35-le-hall-les-couloirs">Le hall & les couloirs</a>
         <a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f133-les-chambres">Les chambres.</a>
         <a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f36-les-autres-salles">Les autres salles</a>
         <a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f34-la-chapelle">La chapelle</a>
         <a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f134-l-exterieur">L'extérieur</a>

Et mon CSS concernant cette partie :

Code:

* --- DESCRIPTIONS DES FORUMS --- */

.phalink {
  padding: 1px 5px 1px 5px;
  border: 1px solid #870000;
  background-color: #870000;
  border-radius: 5px;
  border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  letter-spacing: 0px;
  -moz-transition: all 1s;
}

a.phalink {
  color: #FFDF40;
}

a.phalink:hover {
  color: #FF733B;
  letter-spacing: 0.5px;
}

.desc {
  height: 120px;
  margin-top: 12px;
  margin-bottom: 0px;
  padding: 5px;
  /*overflow: hidden;*/
  padding-right: 0px;
  text-align: justify;
  border: 2px solid #870000;
  border-top: 6px solid #870000;
  border-radius: 20px 0px 0px 0px;
  -webkit-border-radius: 20px 0px 0px 0px;
  background-image: url("http://i42.servimg.com/u/f42/13/82/15/09/kyu112.jpg");
  box-shadow: 0px 0px 2px #c16a6a;
  -moz-box-shadow: 0px 0px 2px #c16a6a;
  -webkit-box-shadow: 0px 0px 2px #c16a6a;
}

.txtdesc {
  height: 100px;
}

.pix {
  float: left;
  margin-top: -30px;
  margin-right: 3px;
  opacity: 0.5;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  -ms-transition: opacity 1s;   
  transition: opacity 1s;
}

.pix:hover {
  opacity: 1;
}



/* --- FONDS DES FORUMS ---*/

.row1 {  }
.row2 {  }
.row3 {  }


/* --- COLONNE DE DROITE --- */

.lastie {
  width: 160px;
  height: 71px;
  padding: 10px;
  padding-top: 31px;
  margin-top: 27px;
  margin-bottom: 30px;
  vertical-align: middle;
  border: 2px solid #870000;
  border-top: 6px solid #870000;
  /*border-bottom: 3px solid #870000;*/
    border-radius: 0px 20px 0px 0px;
  -webkit-border-radius: 0px 20px 0px 0px;
  -moz-border-radius: 0px 20px 0px 0px;
  background-image: url("http://i42.servimg.com/u/f42/13/82/15/09/kyu112.jpg");
  box-shadow: 0px 0px 2px #c16a6a;
  -moz-box-shadow: 0px 0px 2px #c16a6a;
  -webkit-box-shadow: 0px 0px 2px #c16a6a;
}


Merci de votre aide ! Il me manque que ce petit problème pour pouvoir changer la version de mon forum qui doit se faire demain.. éè

[Invité]

Bonjour,

A mon avis, le soucis se situe dans le template index_box, et non dans le CSS.
Cependant, vous pouvez essayer de modifier le nombre de px dans:

Code:

.desc {
  height: 120px;
  margin-top: 12px;

pour faire légèrement descendre la description.

Bien sincèrement.

[Oz-Chan]

Rebonjour,
Non ça ne marche pas. Ce que j'aimerai, c'est que les dernières phrases qu'on ne voit pas, passe sous l'image de droite. En gros, ça donnerait ceci:
Vous voyez ce que je veux dire? ^^
Encore merci de toute l'aide que vous m'apporter ! Si ce problème est résolu, on va pouvoir maintenir le changement de version pour demain. TwT

[Invité]

J'avais pas compris ^^".
Alors ... il va falloir modifier le code:

<table class="desc" border="0">
<tr>
<td><div style="float: right;">
<img class="pix" src="https://i.servimg.com/u/f62/13/82/15/09/vessal10.jpg"/>
</div>
<div class="txtdesc"> Résidence principale des Bezarius. Excentré, loin de la foule qui grouille en pleine journée dans les rues de la capitale, le Manoir dégage un air familier lorsque l'on s'en approche. Étrangement, ses visiteurs s'y sentent chez eux. Serait-ce le cadre idyllique qui l'entoure, les quelques arbres que l'on peut apercevoir depuis les fenêtres, ou alors les papiers peints qui rappellent les nombreuses années déjà écoulées ? Oz et Ada y ont passé leur enfance, rejoints ensuite par le jeune Gilbert. Peut-être trouverez-vous quelques traces de leurs jeux d'antan. </div>
</td>
</tr>
</table>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f35-le-hall-les-couloirs">Le hall & les couloirs</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f133-les-chambres">Les chambres.</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f36-les-autres-salles">Les autres salles</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f34-la-chapelle">La chapelle</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f134-l-exterieur">L'extérieur</a>

La deuxième cellule du tableau devient une div que l'on place avant le texte, et que l'on décale à droite (float: right). Dans le CSS, remplacez :

Code:

.pix {
  float: left;
  margin-top: -30px;
  margin-right: 3px;
  opacity: 0.5;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  -ms-transition: opacity 1s; 
  transition: opacity 1s;
}

par :

Code:

.pix {
  margin-top: 0px;
  margin-right: 3px;
  opacity: 0.5;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  -ms-transition: opacity 1s; 
  transition: opacity 1s;
}

Bien sincèrement.

[Oz-Chan]

Ne t'en fait pas. Ça peut arriver de mal comprendre. -.^
Super c'est presque bon ! J'ai juste encore deux petites chose à te demander. ^^
Voilà l'image.
La première, est-ce que tu aurais un moyen pour que le texte soit totalement au milieu? Car là, c'est totalement décalé..><
Point 2.
C'est aussi un problème d'espacement. Est-ce que tu saurais comment réduire un petit peu l'espace entre les deux catégories pour rétrécir un peu le forum?
Je te remercie encore pour ta grande aide !

[Invité]

Pour le point un ce doit être une question de marge intérieure, mais pas sûr:

.lastie {
width: 160px;
height: 71px;
padding: 10px;
padding-top: 31px;
margin-top: 27px;
margin-bottom: 30px;
vertical-align: middle;
border: 2px solid #870000;
border-top: 6px solid #870000;

Le point 2 par contre ne me semble pas réalisable, je ne trouve pas comment réduire cet espace, désolée .

Bien sincèrement.

[Oz-Chan]

Effectivement pour le point un, c'était en faite un trafic entre tous les codes ! Il est un peu plus au milieu maintenant. >w< Bon pas tout à fait mais vu que c'est au pixel près, je ne préfère pas toucher. XD

Pour le deuxième point, ce n'est pas grave ! Ce n'était qui si tu y arrivais. ^^ En tout cas, je te dis encore un grand merci pour toute l'aide que tu m'as apportée ! =D