Problème code PA

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

Résolu Problème code PA

Message par Ϟ Haruka le Dim 25 Mai 2014 - 19:58

Coucou Very Happy 
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 ?
http://i58.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  I love you


Dernière édition par Ϟ Haruka le Lun 26 Mai 2014 - 11:55, édité 1 fois

Ϟ Haruka
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 23/06/2013

http://h-p-u.forumgratuit.org/
Ϟ Haruka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code PA

Message par Scoubifitz le Dim 25 Mai 2014 - 23:18

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>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code PA

Message par Ϟ Haruka le Lun 26 Mai 2014 - 11:54

Merci beaucoup c'est parfait  Very Happy 

Ϟ Haruka
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 23/06/2013

http://h-p-u.forumgratuit.org/
Ϟ Haruka 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