Sujets similaires

Bonjour,

je me suis concocté une petite mise en page mais, j'ai un petit soucis que je n'arrive pas à régler au niveau de l'image qui se répète alors que j'aimerais en coller plusieurs les unes à côté des autres.

Pour le moment ça donne ça :

Spoiler:

Code:: <br/><center><link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'><div style="width: 480px; background-color:#ECE4E5; font-family: Graduate; font-size: 25px; color: #ECE4E5; line-height: 100%; letter-spacing: 1px;-moz-border-radius:20px 20px 0px 0px;">Pseudo</div><div style="width: 480px; height: 119px; background-image: url(http://25.media.tumblr.com/tumblr_lx5vxthhUc1qzwoilo1_250.gif);url(http://25.media.tumblr.com/tumblr_lx5vxthhUc1qzwoilo9_250.gif);url(http://25.media.tumblr.com/tumblr_lx5vxthhUc1qzwoilo1_250.gif);"><div style="padding-top: 210px; padding-left:110px;"></div></div><div style="width: 480px; border-bottom: 2px dotted #ECE4E5;background-color: #E4D4B6; border-top: 2px dotted #ECE4E5;">[font=arial][size=13][color=#C7A692] [b]LE CONTEXTE[/b][/color][/size][/font]</div><div style="width: 480px; background-color: #E8C8BE;"><br /><div style="width: 420px; height:350px; background: url(http://www.e-loader.net/scripts/EimgMP.php?img=9JcPCViFAD.png&local=d29); color: #3D2727; "><div style="background-color: #7f5e3f; font-family: 'Graduate', cursive; font-size: 20px; color: #e4e9f4; text-align:center; width:180px;vertical-align:top; -moz-border-radius: 0px 0px 20px 20px;"></div>

Texte texte texte
</div><br /></div> <div style="width: 480px; background-color:#ECE4E5; font-family: Graduate; font-size: 20px; color: #ECE4E5; line-height: 100%; letter-spacing: 1px;-moz-border-radius:0px 0px 20px 20px;">Crédits : ©</div></div>
</center><br/>

J'aimerais garder le gif de base à gauche, mettre ce gif au milieu et celui là à droite.

Salut !

En fait, je ne comprends pourquoi tu as mis ton image en background-image.

Pourquoi ne pas simplement mettre une image?

Code:: <img src="http://25.media.tumblr.com/tumblr_lx5vxthhUc1qzwoilo9_250.gif">
<img src="http://25.media.tumblr.com/tumblr_lx5vxthhUc1qzwoilo4_250.gif">

Parce que c'est normal quand on y pense qu'elle se répète, tu dis à une image de, par exemple, 200px de large, de rentrer dans 600px, alors, elle, elle se répète. Pour contrer ça généralement, on met

Code:: background: url(' XXX') no-repeat;

mais dans ton cas, tu ne pourras pas mettre d'autres images à côté.

Donc dans ton bloc, tu enlèves l'arrière plan et ne fait que mettre les images entre les DIV.

ÉDIT: D'ailleurs, on ne peut pas faire ça en CSS:

Code:: background-image: url(http://25.media.tumblr.com/tumblr_lx5vxthhUc1qzwoilo1_250.gif);url(http://25.media.tumblr.com/tumblr_lx5vxthhUc1qzwoilo9_250.gif);url(http://25.media.tumblr.com/tumblr_lx5vxthhUc1qzwoilo1_250.gif);

Parce que ça revient à dire:

Code:: background-image: url(http://25.media.tumblr.com/tumblr_lx5vxthhUc1qzwoilo1_250.gif);
url(http://25.media.tumblr.com/tumblr_lx5vxthhUc1qzwoilo9_250.gif);
url(http://25.media.tumblr.com/tumblr_lx5vxthhUc1qzwoilo1_250.gif);

Tu mets des valeurs URL sans même avoir mis de proriété, car les ; les délimite...

En image ça me décolle les gifs du reste de la mise en page, je m'embrouille assez vite avec ces trucs là vu que je suis pas très expérimentée...

Spoiler:

Code:: <br/><center><link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'><div style="width: 480px; background-color:#ECE4E5; font-family: Graduate; font-size: 25px; color: #ECE4E5; line-height: 100%; letter-spacing: 1px;-moz-border-radius:20px 20px 0px 0px;">Pseudo</div><div style=
<img src="http://25.media.tumblr.com/tumblr_lx5vxthhUc1qzwoilo1_250.gif"><img src="http://25.media.tumblr.com/tumblr_lx5vxthhUc1qzwoilo9_250.gif"><img src="http://25.media.tumblr.com/tumblr_lx5vxthhUc1qzwoilo4_250.gif"><div style="padding-top: 210px; padding-left:110px;"></div><div style="width: 480px; border-bottom: 2px dotted #ECE4E5;background-color: #E4D4B6; border-top: 2px dotted #ECE4E5;">[font=arial][size=13][color=#C7A692] [b]LE CONTEXTE[/b][/color][/size][/font]</div><div style="width: 480px; background-color: #E8C8BE;"><br /><div style="width: 420px; height:350px; background: url(http://www.e-loader.net/scripts/EimgMP.php?img=9JcPCViFAD.png&local=d29); color: #3D2727; "><div style="background-color: #7f5e3f; font-family: 'Graduate', cursive; font-size: 20px; color: #e4e9f4; text-align:center; width:180px;vertical-align:top; -moz-border-radius: 0px 0px 20px 20px;"></div>

Texte texte texte
</div><br /></div> <div style="width: 480px; background-color:#ECE4E5; font-family: Graduate; font-size: 20px; color: #ECE4E5; line-height: 100%; letter-spacing: 1px;-moz-border-radius:0px 0px 20px 20px;">Crédits : ©</div></div>
</center><br/>

J'ai enlevé certains