Problème code PA

[Ϟ Haruka]

Coucou  
J'ai un problème de codage sur une PA, j'ai voulu mettre une image dans le contexte et ça m'a décalé mon texte, comment je peux faire pour l'avoir à côté et pour avoir le même cadre que celui sur les gifs autour de l'image en question sur le contexte ?
https://i.servimg.com/u/f58/18/87/53/91/sans_t10.jpg
Et je voulais savoir aussi ce qu'il fallait que j'ajoute là-dedans :

pour avoir un lien sur l'image ?
J'aurais voulu également savoir comment je peux mettre une image derrière au lieu du bloc beige ?
Voici à la suite le code CSS de la PA :

Merci beaucoup  

[Scoubifitz]

bonsoir,

• pour l'image à coté du texte , il faut la faire flotter à gauche (float:left;) ...
  
• pour que toutes les images aient le même contour , autant définir ce contour dans du CSS , avant le code HTML ...
  
• pour avoir un lien sur une image , entourez le code de l'image par le code du lien ...
  
  exemple :
  

  Code:

  <a href="adresse_du_lien"><img src="adresse_de_l_image" alt="description" /></a>

  
  
• pour une image de fond il faut entourer le code HTML par une div stylée d'un fond :
  
  

  Code:

  <div style="background:url(adresse_de_l_image)">
contenu HTML
</div>

  
  

le code retravaillé :

Code:

<link href="http://fonts.googleapis.com/css?family=The+Girl+Next+Door" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Rouge+Script|Crushed" rel="stylesheet" type="text/css" />
<style type="text/css">
.crasylove{
margin:auto;
}
.crasylovetitle {
letter-spacing: -2px;
font-family : 'Satisfy';
text-align: center;
margin : -10px;
font-size : 23px;
color: #909090;
text-shadow : 1px 0px 1px white;
}
.crasylove img{
padding : 3px ;
border : 1px solid #FBDDA3 ;
margin : 2px;
}
.crasylovecontent{
background-color: white;
  padding: 10px;
 border: 2px #FBDDA3 solid;
  margin-top: -10px;
  text-align:center;
}
</style>
<div style="background:url(http://i.imgbox.com/WrEYB50y.png) no-repeat center">
<div style="font-size:450%;text-align:center;letter-spacing:-2px;font-family: 'The Girl Next Door', cursive;color:#FFBD4F;">Crazylove</div>
<table class="crasylove">
<tr>
<td>
<div class="crasylovetitle">
Staff de Crazy
</div>

<div style="width:230px;height:180px;" class="crasylovecontent">

<a href="/u1"><img src="http://media.tumblr.com/1dc2425e8a971af9bc7bbcbb7102e154/tumblr_meywxcGsWF1qdwyffo5_250.gif" style="width:100px;height:100px;" /></a> <a href="/u2"><img src="http://24.media.tumblr.com/tumblr_m4ndoeS3xC1qm7q95o1_250.gif" style="width:100px;height:100px;" /></a>


<div style="margin-top:-3px; font-family: 'Crushed', cursive; font-size:13px; width:200px;line-height:10px; color: #4C1B1B;text-align:justify;">
Blabla sur le staff
</div>

</div>

</td>

<td>

<div class="crasylovetitle">Contexte</div>

<div style="width:360px;height:180px;" class="crasylovecontent">

<div style=" font-family: 'Crushed', cursive; font-size:13px; width:360px;line-height:12px; color: #4C1B1B;text-align:justify;">
<img src="http://i58.servimg.com/u/f58/18/87/53/91/chem3y10.jpg" alt="" border="0" style="float:left; margin :0 5px 5px 0;" />« Heaven on tourne dans deux minutes ! » La journaliste se tourna vers le cameraman. Ce reportage était très important pour elle et cela allait surement changer radicalement sa carrière, elle le savait très bien et c'est pour cela qu'elle avait pris tous les soins nécessaires pour être parfaite. On lui avait dit qu'elle devait faire un reportage en plein air à Hawaï. Qui ne rêvait pas d'aller là-bas ? Le sujet du reportage était en plus très important et dur, la capital qui est Honolulu avait subi une catastrophe naturelle du nom de Tsunami. La ville était donc maintenant ravagée et on lui avait dit qu'il allait lui falloir du courage pour aboutir ce reportage. Elle s'était documentée sur cette ville et cette capital dont beaucoup rêvait.
</div>

</div>

</td>
</tr>
</table>
<table class="crasylove">
<tr>
<td>

<div class="crasylovetitle">Informations</div>

<div style="width:180px;height:120px;" class="crasylovecontent">

<div style="margin-top: -3px; font-family: 'Crushed', cursive; font-size:13px;line-height:10px; color: #4C1B1B;">

<div align="justify">
 ♕ Le forum a été crée par X le X♕ Le codage il a été fait par X, pour le design c'est ... sur .. ♕ Tout le forum appartient à ses admins
</div>

<div align="center">
  <br />
<strong>VOTEZ POUR NOUS</strong>
  <br />
  <br />
<a href="http://www.root-top.com/topsite/loveharvard/in.php?ID=95">♕</a> <a href="http://www.root-top.com/topsite/filetdudiable/in.php?ID=514">♕</a> <a href="http://www.root-top.com/topsite/galaad/in.php?ID=249">♕</a> <a href="http://www.root-top.com/topsite/titop/in.php?ID=1958">♕</a> <a href="http://en.root-top.com/toplist/obsession27/in.php?ID=20730">♕</a>
</div>
</div>

</div>

</td>

<td>

<div class="crasylovetitle">Scénarios attendus</div>
  
<div style="width: 210px; height: 120px;" class="crasylovecontent">

<img src="http://media.tumblr.com/1dc2425e8a971af9bc7bbcbb7102e154/tumblr_meywxcGsWF1qdwyffo5_250.gif" style="width:40px;height:40px;" /> <img src="http://media.tumblr.com/1dc2425e8a971af9bc7bbcbb7102e154/tumblr_meywxcGsWF1qdwyffo5_250.gif" style="width:40px;height:40px;" /> <img src="http://media.tumblr.com/1dc2425e8a971af9bc7bbcbb7102e154/tumblr_meywxcGsWF1qdwyffo5_250.gif" style="width:40px;height:40px;" /> <img src="http://media.tumblr.com/1dc2425e8a971af9bc7bbcbb7102e154/tumblr_meywxcGsWF1qdwyffo5_250.gif" style="width:40px;height:40px;" /> <img src="http://media.tumblr.com/1dc2425e8a971af9bc7bbcbb7102e154/tumblr_meywxcGsWF1qdwyffo5_250.gif" style="width:40px;height:40px;" /> <img src="http://media.tumblr.com/1dc2425e8a971af9bc7bbcbb7102e154/tumblr_meywxcGsWF1qdwyffo5_250.gif" style="width:40px;height:40px;" />

</div>
</td>

<td>

<div class="crasylovetitle">Liens importants</div>

<div style="width:170px;height:120px;" class="crasylovecontent">

<form>
<select style="width: 160px" onchange="location = this.options
[this.selectedIndex].value">
  <option selected="selected">Navigation rapide </option>
  <option value="url1-de-renvoi">choix 1 </option>
  <option value="url2-de-renvoi">choix 2 </option>
  <option value="url3-de-renvoi">choix 3 </option>
  <option value="url4-de-renvoi">choix 4 </option>
  </select>
</form>

</div>

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

[Ϟ Haruka]

Merci beaucoup c'est parfait