Placer mes images au bonne endroit!

[aurélie62]

Bon voilà je me bas avec ça et là je vois plus d'autre solution que de venir vers vous je voudrais mettre mon gif à la place de l'étoile blanche que j'ai faîte pour que vous comprenez! car là ça fait trop l'un après l'autre et ça ne me plait pas il y a trop d'espace vite a gauche et à droite comment faire? Car j'ai essayé de modifié ma page d'accueil en vain! Aussi je voudrais que ma bulle concours soit cliquable au sujet approprié, comment faire, merci d'avance!

[ge80]

Bonjour

Est-il possible d'avoir votre codage afin de le compléter ?

Bonnes fêtes

ge et

[Père Noël]

Ho Ho Ho,

Pour placer votre gif là où vous le voulez, vous devez remplacer :

Code:

<img src="http://www.heberger-image.fr/data/images/50312_Sans_titre_6.gif">

Par :

Code:

<img style="position: relative; bottom: 150px; left: 338px;" src="http://www.heberger-image.fr/data/images/50312_Sans_titre_6.gif">

Quant au lien du concours, il faut mettre :

Code:

<a href="LIEN VERS LE CONCOURS"><img src="URL IMAGE" /></a>

Joyeux Noël !

[aurélie62]

Ouh là c'est très compliqué! Puis-je vous donner mon code de janvier et me le modifié?

Code:

http://i63.servimg.com/u/f63/13/73/74/55/fond_p10.png
<div><object width="240" height="180"><param name="movie" value="http://pf.kizoa.com/i-Contact/sflite.swf?did=1361385&k=S46821479&hk=1&ns=1&ob=1&origin=share"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://pf.kizoa.com/i-Contact/sflite.swf?did=1361385&k=S46821479&hk=1&ns=1&ob=1&origin=share" type="application/x-shockwave-flash" wmode="transparent" width="240" height="180" allowFullScreen="true"></embed></object>
<b>Diaporama : Jackson Rathbone</b> - <i><a href="http://www.kizoa.com">Diaporama</a></i></div><img src="http://www.heberger-image.fr/data/images/50312_Sans_titre_6.gif">

Voilà mon code que je voudrais faire pour janvier mais tous se suit je voudrais placer le diaporama sur la gauche et le gif sur la droite
Sinon, tes codes marchent j'ai essayé sur celui que j'ai déjà! Pour le gif c'est impeccable mais pour le lien c'est toutes l'image qui est cliquable alors que je voudrais juste le rond du concours!
Comment mettre mon diaporama sur l'image comme le gif? Je vais vous donner mon image de janvier pour que vous comprenez mieux



Tous les codes sont au dessus mais mal placé bien sûr

[ge80]

Bonjour

Comme père Noël n'est plus présent, je vais modifier votre code si je peux

Par contre le code fourni ne correspond pas à la trame de l'image ci-dessus.
Est-ce le même problème ?

Ge

[aurélie62]

Je viens de réedité mon problème au dessus de votre messaga

[ge80]

OK, c'est clair.

Je regarderai après le repas... et je vous ferai une proposition (honnête bien entendu )

[aurélie62]

Merci géo toujours là

[ge80]

oui,

une dernière question ?

Pourquoi une image de fond au lieu de construire votre message et de le disposer à votre convenance en utilisant un tableau et des cellules. ?
La réalisation serait plus belle et surtout moins complexe à modifier.

[aurélie62]

Tous simplement car je ne sais pas le faire mais je ne demande pas mieux de savoir le faire

[ge80]

OK

Le plus simple est le tableau car votre image proposée n'est pas capable de recevoir l'ensemble de ce que vous voulez mettre à l'intérieur.

Pouvez-vous me donner le source du texte et les liens des différentes images et je vous réalise ceci tout de suite ?

Code:

<table width="800px" height="314px" style="background-image:url(http://i63.servimg.com/u/f63/13/73/74/55/fond_p10.png);"><tr><td><div style="position: relative; top: 80px; left: 490px;"><img src="http://www.heberger-image.fr/data/images/50312_Sans_titre_6.gif"></div></td></tr></table>

[aurélie62]

Oui ok mais bon j'ai travaillé sur paint et j'ai tous collé sur le fond je vais devoir tous décomposé non?

C'est quoi le code que tu vient de me donner?

[aurélie62]

+ le gif et le diaporama dont tu as déjà les codes

Voilà mes images découpées mais je voudrais quand meme que ça donne comme l'image que je t'ai envoyé au final!

[ge80]

Code à coller dans un message pour voir l'effet du déplacement de votre image dans l'autre.

NOEL n'était pas en forme (la fatigue sans doute )

le positionnement avec les

Code:

style="position: relative; top: 80px; left: 490px;"

Mettre 0px pour les deux pour voir la position de départ.

N'avez-vous pas le texte de départ (même non mis en forme) et les liens des différentes images qui sont sur votre image de démonstration ?


EDIT : ok je vais me débrouiller avec vos images découpées

[aurélie62]

Ben le texte je l'ai tapé à la main lol

[ge80]

Deux versions à coller dans un message pour vos tests.
Le premier avec un fond jaune pour voir le positionnement et avec les bordures délimitant les cellules et le centrage.
Le deuxième pour voir le rendu final avec un fond noir.

Code:



[table bgcolor="yellow" border="1" cellspacing="1"][tr][td rowspan="1" valign="top"][center][img]http://i63.servimg.com/u/f63/13/73/74/55/image_10.gif[/img] [/center][/td][td colspan="4" valign="top"] [img]http://i63.servimg.com/u/f63/13/73/74/55/image_11.gif[/img][right][img]http://i63.servimg.com/u/f63/13/73/74/55/image_11.jpg[/img] [/right][/td][td align="center" valign="top"][img]http://i63.servimg.com/u/f63/13/73/74/55/image_12.gif[/img] 
[center][img]http://i63.servimg.com/u/f63/13/73/74/55/image_10.jpg[/img][/center]
[/td][/tr][tr][td] . [/td][td colspan="2"] [center]<div><object width="240" height="180"><param name="movie" value="http://pf.kizoa.com/i-Contact/sflite.swf?did=1361385&k=S46821479&hk=1&ns=1&ob=1&origin=share"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://pf.kizoa.com/i-Contact/sflite.swf?did=1361385&k=S46821479&hk=1&ns=1&ob=1&origin=share" type="application/x-shockwave-flash" wmode="transparent" width="240" height="180" allowFullScreen="true"></embed></object>
[color=white]<b>Diaporama : Jackson Rathbone</b> - <i><a href="http://www.kizoa.com">Diaporama</a></i>[/color]</div> [/center] [/td][td align="center" valign="middle" colspan="2"] [img]http://www.heberger-image.fr/data/images/50312_Sans_titre_6.gif[/img][/td][td].[/td][/tr][/table]





[table bgcolor="black" border="0" cellspacing="0"][tr][td rowspan="1" valign="top"][center][img]http://i63.servimg.com/u/f63/13/73/74/55/image_10.gif[/img] [/center][/td][td colspan="4" valign="top"] [img]http://i63.servimg.com/u/f63/13/73/74/55/image_11.gif[/img][right][img]http://i63.servimg.com/u/f63/13/73/74/55/image_11.jpg[/img] [/right][/td][td align="center" valign="top"][img]http://i63.servimg.com/u/f63/13/73/74/55/image_12.gif[/img] 
[center][img]http://i63.servimg.com/u/f63/13/73/74/55/image_10.jpg[/img][/center]
[/td][/tr][tr][td] . [/td][td colspan="2"] [center]<div><object width="240" height="180"><param name="movie" value="http://pf.kizoa.com/i-Contact/sflite.swf?did=1361385&k=S46821479&hk=1&ns=1&ob=1&origin=share"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://pf.kizoa.com/i-Contact/sflite.swf?did=1361385&k=S46821479&hk=1&ns=1&ob=1&origin=share" type="application/x-shockwave-flash" wmode="transparent" width="240" height="180" allowFullScreen="true"></embed></object>
[color=white]<b>Diaporama : Jackson Rathbone</b> - <i><a href="http://www.kizoa.com">Diaporama</a></i>[/color]</div> [/center] [/td][td align="center" valign="middle" colspan="2"] [img]http://www.heberger-image.fr/data/images/50312_Sans_titre_6.gif[/img][/td][td].[/td][/tr][/table]



Les propriétés des tableaux : -> Les tableaux
( au lieu de [ et ) au lieu de ] pour les explications
(table) pour le table et avec la barre pour la fermeture (/table)
(tr) pour une ligne et avec la barre pour la fermeture (/tr)
(td) pour une cellule et avec la barre pour la fermeture (/td)
La fusion de cellules par colspan="2" et rowspan="1"
Les alignements dans les cellules par align="center" et valign="top"
voir le tutoriel -> alignement dans un tableau



Est-ce que cela vous convient ?

[aurélie62]

C'est génial ça marche sauf que le rendu est moche les images sont pas belles mais j'adore le principe du tableau! J'espère savoir le faire! Comme ça je mets mes photos directement, je voudrais modifié cela



Au pire est-ce-que je peux vous donner les 3 images et l'image ou il est en double car elles sont vraiment pas belle et avec la modification ce seras parfait!

Il faudrais vraiment que je comprenne comment vous avez fait pour mes prochains design

Je viens d'aller sur votre tuto mon dieu mon dieu je ne pourrais jamais faire ça!

[ge80]

Au pire est-ce-que je peux vous donner les 3 images et l'image ou il est en double car elles sont vraiment pas belle et avec la modification ce seras parfait!

C'est ce que je vous avez demandé dès le début donc cela sera avec plaisir.

Il faudrais vraiment que je comprenne comment vous avez fait pour mes prochains design

demain je vous ferai une explication sur le principe de ce tableau (sans rien dedans)...

[aurélie62]

Ah merci donc pourriez-vous me modifié ceci avec les images à part? Je vous les donne tous de suite et merci d'avance











Voilà les images que j'aimerais remplacé qui ne rendent pas bien au final merci

[ge80]

Entendu : de bien belles images.

Je ferai ceci demain car je termine une autre aide.

[aurélie62]

Oui pas de soucis

[ge80]

Je travaille pour vous.
Cela va arriver...

Voici le code

Code:

[table bgcolor="black" border="0" cellspacing="0"][tr][td rowspan="1" valign="top"][center][img]http://i63.servimg.com/u/f63/13/73/74/55/40336_11.jpg[/img]
[img]http://i63.servimg.com/u/f63/13/73/74/55/jackso10.png[/img]
[img]http://i63.servimg.com/u/f63/13/73/74/55/jackso11.png[/img] [/center][/td][td colspan="4" valign="top"] [img]http://i63.servimg.com/u/f63/13/73/74/55/image_11.gif[/img][right][img]http://i63.servimg.com/u/f63/13/73/74/55/bannie12.jpg[/img] [/right][/td][td align="center" valign="top"][img]http://i63.servimg.com/u/f63/13/73/74/55/image_12.gif[/img] 
[center][img]http://i63.servimg.com/u/f63/13/73/74/55/bannie11.jpg[/img][/center]
[/td][/tr][tr][td] . [/td][td colspan="2"] [center]<div><object width="240" height="180"><param name="movie" value="http://pf.kizoa.com/i-Contact/sflite.swf?did=1361385&k=S46821479&hk=1&ns=1&ob=1&origin=share"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://pf.kizoa.com/i-Contact/sflite.swf?did=1361385&k=S46821479&hk=1&ns=1&ob=1&origin=share" type="application/x-shockwave-flash" wmode="transparent" width="240" height="180" allowFullScreen="true"></embed></object>
[color=white]<b>Diaporama : Jackson Rathbone</b> - <i><a href="http://www.kizoa.com">Diaporama</a></i>[/color]</div> [/center] [/td][td align="center" valign="middle" colspan="2"] [img]http://www.heberger-image.fr/data/images/50312_Sans_titre_6.gif[/img][/td][td].[/td][/tr][/table]

et l'organisation

A	B				C
D	E		F		G

Code:

[table bgcolor="yellow" border="1" cellspacing="0"][tr][td rowspan="1" valign="top"] A
[/td][td colspan="4" valign="top"] [right] B [/right]
[/td][td valign="top"] C
[/td][/tr][tr][td] D [/td][td colspan="2"] E
 [/td][td colspan="2" valign="middle"] F
[/td][td]G [/td][/tr][/table]

[aurélie62]

Merci ça marche mais je n'arrive pas à séparer mes 3 images! Et j'aurais aimé mon diaporama plus haut

[ge80]

J'ai supprimé la case D (tableau en jaune plus haut)

Code:

[table bgcolor="black" border="0" cellspacing="0"][tr][td rowspan="2" valign="top"][center]
[img]http://i63.servimg.com/u/f63/13/73/74/55/40336_11.jpg[/img]





[img]http://i63.servimg.com/u/f63/13/73/74/55/jackso10.png[/img]





[img]http://i63.servimg.com/u/f63/13/73/74/55/jackso11.png[/img]
 [/center]
[/td][td colspan="4" valign="top"]
[img]http://i63.servimg.com/u/f63/13/73/74/55/image_11.gif[/img][right][img]http://i63.servimg.com/u/f63/13/73/74/55/bannie12.jpg[/img]
 [/right]
[/td][td valign="top"][img]http://i63.servimg.com/u/f63/13/73/74/55/image_12.gif[/img]
[center][img]http://i63.servimg.com/u/f63/13/73/74/55/bannie11.jpg[/img][/center][/td][/tr][tr][td colspan="2"] [center] <div><object width="240" height="180"><param name="movie" value="http://pf.kizoa.com/i-Contact/sflite.swf?did=1361385&k=S46821479&hk=1&ns=1&ob=1&origin=share"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://pf.kizoa.com/i-Contact/sflite.swf?did=1361385&k=S46821479&hk=1&ns=1&ob=1&origin=share" type="application/x-shockwave-flash" wmode="transparent" width="240" height="180" allowFullScreen="true"></embed></object>
[color=white]<b>Diaporama : Jackson Rathbone</b> - <i><a href="http://www.kizoa.com">Diaporama</a></i>[/color]</div>
 [/center]
 [/td][td colspan="2" valign="middle"][img]http://www.heberger-image.fr/data/images/50312_Sans_titre_6.gif[/img][/td][td].[/td][/tr][/table]

Soit en mettant des < br /> ou en mettant des passages à la ligne.

[aurélie62]

Attend parce que j'ai modifié aussi entre 2 voilà mon code maintenant

Code:

<table bgcolor="black" border="0" cellspacing="0"><tbody><tr><td rowspan="1" align="left" valign="top"><div style="margin: auto; text-align: center; width: 100%;"><img src="http://i63.servimg.com/u/f63/13/73/74/55/40336_11.jpg" alt="" border="0">
<img src="http://i63.servimg.com/u/f63/13/73/74/55/jackso10.png" alt="" border="0">
<img src="http://i63.servimg.com/u/f63/13/73/74/55/jackso11.png" alt="" border="0"> </div></td><td colspan="4" align="left" valign="top"> <img src="http://i63.servimg.com/u/f63/15/33/59/84/image_13.gif" alt="" border="0"><div align="right"><img src="http://i63.servimg.com/u/f63/15/33/59/84/bannie12.jpg" alt="" border="0"> </div></td><td align="left" valign="top"><a href="http://jacksonrathbone.forumsactifs.com/t286-concours-pour-gagner-un-calendrier-2011"><img src="http://i63.servimg.com/u/f63/13/73/74/55/image_13.gif"></a> <div style="margin: auto; text-align: center; width: 100%;"><img src="http://i63.servimg.com/u/f63/15/33/59/84/bannie11.jpg" alt="" border="0"></div>
</td></tr><tr><td align="left"> . </td><td colspan="2" align="left"> <div style="margin: auto; text-align: center; width: 100%;"><div><object height="180" width="240"><param name="movie" value="http://pf.kizoa.com/i-Contact/sflite.swf?did=1361385&amp;k=S46821479&amp;hk=1&amp;ns=1&amp;ob=1&amp;origin=share"><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed src="http://pf.kizoa.com/i-Contact/sflite.swf?did=1361385&amp;k=S46821479&amp;hk=1&amp;ns=1&amp;ob=1&amp;origin=share" type="application/x-shockwave-flash" wmode="transparent" allowfullscreen="true" height="180" width="240"></object>
<font color="white"><b></b> <i><a href="http://www.kizoa.com"></a></i></font></div> </div> </td><td colspan="2" align="left" valign="middle"> <img src="http://www.heberger-image.fr/data/images/50312_Sans_titre_6.gif" alt="" border="0"></td><td align="left">.</td></tr></tbody></table>


Mais je viens d'essayer ton code sur un forum d'essai et ça fait le meme

[ge80]

Code en html donc changement de ligne par des

Code:

<br/>.

J'en ai ajouté quelqu'uns

Code:

<table bgcolor="black" border="0" cellspacing="0"><tbody><tr><td rowspan="1" align="left" valign="top"><div style="margin: auto; text-align: center; width: 100%;"><br/><img src="http://i63.servimg.com/u/f63/13/73/74/55/40336_11.jpg" alt="" border="0"><br/>
<img src="http://i63.servimg.com/u/f63/13/73/74/55/jackso10.png" alt="" border="0"><br/>
<img src="http://i63.servimg.com/u/f63/13/73/74/55/jackso11.png" alt="" border="0"> </div></td><td colspan="4" align="left" valign="top"> <img src="http://i63.servimg.com/u/f63/15/33/59/84/image_13.gif" alt="" border="0"><div align="right"><img src="http://i63.servimg.com/u/f63/15/33/59/84/bannie12.jpg" alt="" border="0"> </div></td><td align="left" valign="top"><a href="http://jacksonrathbone.forumsactifs.com/t286-concours-pour-gagner-un-calendrier-2011"><img src="http://i63.servimg.com/u/f63/13/73/74/55/image_13.gif"></a> <div style="margin: auto; text-align: center; width: 100%;"><img src="http://i63.servimg.com/u/f63/15/33/59/84/bannie11.jpg" alt="" border="0"></div>
</td></tr><tr><td align="left"> . </td><td colspan="2" align="left"> <div style="margin: auto; text-align: center; width: 100%;"><div><object height="180" width="240"><param name="movie" value="http://pf.kizoa.com/i-Contact/sflite.swf?did=1361385&amp;k=S46821479&amp;hk=1&amp;ns=1&amp;ob=1&amp;origin=share"><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed src="http://pf.kizoa.com/i-Contact/sflite.swf?did=1361385&amp;k=S46821479&amp;hk=1&amp;ns=1&amp;ob=1&amp;origin=share" type="application/x-shockwave-flash" wmode="transparent" allowfullscreen="true" height="180" width="240"></object>
<font color="white"><b></b> <i><a href="http://www.kizoa.com"></a></i></font></div> </div> </td><td colspan="2" align="left" valign="middle"> <img src="http://www.heberger-image.fr/data/images/50312_Sans_titre_6.gif" alt="" border="0"></td><td align="left">.</td></tr></tbody></table>

Le diaporama est indisponible.

[aurélie62]

le diaporama si regarde sur mon forum

[aurélie62]

ca marche tjs pas

[ge80]

Ok cela re-fonctionne : il y a eu une interruption lors de mon test de votre code.

Est-ce pour le positionnement des images ?

[aurélie62]

non snif tu peux le voir je t'ai donné le lien de mon forum plus haut et je copie a chaque fois les nouveau code que tu me donne