ajouter une image dans le coin supérieur d'un message codé

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

Résolu ajouter une image dans le coin supérieur d'un message codé

Message par Lunathiel le Sam 8 Jan 2011 - 20:32

Bonsoir

Voila j'aimerais ajouter une image a un message que j'ai auparavant mis en page par des codes

Voici mon message "codé"

Code:
<center><div style="width: 75%; border: 1px solid; border-color:#053250; background-color: #1E619B; -moz-border-radius: 10px;">
Cher (Chère) {USER&amp;#8288;NAME}

[size=18][b][color=orange]Vous recevez votre paye hebdomadaire de X Galions.[/color][/b][/size]

[right]La banque d'Al'winak... Mr le maire...[/right]

[size=7]Il est inutile de donner réponse à ce message.[/size]

</div></center>

Et comme tout ceci est plus facile a comprendre en image

Voila ce que j'obtiens avec ce code


Et voila ce que je souhaiterais obtenir


Et enfin l'image avec un contour arrondis que j'aimerais ajouté au message
Code:
<div style=" width: 71px; height: 76px; border: 2px solid; border-color:#000000; -moz-border-radius: 10px; background-image:url('http://i19.servimg.com/u/f19/14/59/60/98/bourse11.jpg');"></div>

Un grand merci pour votre aide

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajouter une image dans le coin supérieur d'un message codé

Message par ge80 le Sam 8 Jan 2011 - 20:40

Bonsoir

Pourquoi ne pas mettre votre message dans un tableau à deux cellules ?
Une pour l"image et l'autre pour le texte.

image votre texte et sa mise en forme

Code:
[table][tr][td] image  [/td][td] votre texte et sa mise en forme[/td][/tr][/table]

Cordialement
ge

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajouter une image dans le coin supérieur d'un message codé

Message par Lunathiel le Sam 8 Jan 2011 - 21:26

Mais je ne veux pas afficher un cadre =/

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajouter une image dans le coin supérieur d'un message codé

Message par ge80 le Sam 8 Jan 2011 - 21:30

J'ai mis un cadre pour que vous situiez le codage.

sans cadre, voici ce que vous auriez vu (ci-dessous)

image votre texte et sa mise en forme



ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajouter une image dans le coin supérieur d'un message codé

Message par Lunathiel le Dim 9 Jan 2011 - 12:13

Oh pardon je n'avais pas vu cela comme ça...

Comment dois-je faire alors pour régler la position de l'image? Car voila ce que j'obtiens


Code:

<center><div style="width: 75%; border: 3px solid; border-color:#053250; background-color: #1E619B; -moz-border-radius: 10px;">[table][tr][td] <div style=" width: 71px; height: 76px; border: 2px solid; border-color:#053250; -moz-border-radius: 10px; background-image:url('http://i19.servimg.com/u/f19/14/59/60/98/bourse11.jpg');"></div>  [/td][td] Cher (Chère) {USER&amp;#8288;NAME}

[size=18][b][color=orange]Vous recevez votre paye hebdomadaire de X Galions.[/color][/b][/size]

[right]La banque d'Al'winak... Mr le maire...[/right]

[size=7]Il est inutile de donner réponse à ce message.[/size]

[/td][/tr][/table]</div></center>

Il faudrait que l'image soit plus vers le coin supérieur gauche...

Encore merci

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajouter une image dans le coin supérieur d'un message codé

Message par ge80 le Dim 9 Jan 2011 - 12:26

Je vous modifie le code et je vous expliquerai mais d'abord "il faut Manger !"

Code:
<center><div style="width: 75%; border: 3px solid; border-color:#053250; background-color: #1E619B; -moz-border-radius: 10px;">[table cellspacing="1"]
[tr][td valign="top"] <div style=" width: 71px; height: 76px; border: 2px solid; border-color:#053250; -moz-border-radius: 10px; background-image:url('http://i19.servimg.com/u/f19/14/59/60/98/bourse11.jpg');"></div>  [/td][td] Cher (Chère) { USERNAME}

[size=18][b][color=orange]Vous recevez votre paye hebdomadaire de X Galions.[/color][/b][/size]

[right]La banque d'Al'winak... Mr le maire...[/right]

[size=7]Il est inutile de donner réponse à ce message.[/size]

[/td][/tr]
[/table]</div></center>

J'ai ajouté :
Code:
[td valign="top"]
pour un alignement de la cellule vertical et en haut.

VerticalAlign et top pour en haut.

J'ai ajouté un espace devant le username pour éviter la modification par l'éditeur de texte ! Il faudra l'enlever Wink

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajouter une image dans le coin supérieur d'un message codé

Message par Lunathiel le Dim 9 Jan 2011 - 14:19

Je vais chipoter un peu mais il y a maintenant un grand espace à gauche de l'image... Ne peut-on pas centré l'image dans la cellule? Centré et en haut bien sur

(Et bon appétit en retard =P )


Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajouter une image dans le coin supérieur d'un message codé

Message par ge80 le Dim 9 Jan 2011 - 14:40

L'espace vient de votre DIV

Pour ajouter un centrage horizontal : align="center" dans le style de la cellule donc du TD

J'ai changé la position de la bordure pour vous faire comprendre.
La bordure encadre votre tableau et vous voyez votre image bien positionnée.
Code:
<center><div style="width: 75%; border: 0px solid; border-color:#053250; background-color: #1E619B; -moz-border-radius: 10px;">[table cellspacing="1" border="3"]
[tr][td align=center" valign="top"] <div style=" width: 71px; height: 76px; border: 2px solid; border-color:#053250; -moz-border-radius: 10px; background-image:url('http://i19.servimg.com/u/f19/14/59/60/98/bourse11.jpg');"></div>  [/td][td] Cher (Chère) { USERNAME}

[size=18][b][color=orange]Vous recevez votre paye hebdomadaire de X Galions.[/color][/b][/size]

[right]La banque d'Al'winak... Mr le maire...[/right]

[size=7]Il est inutile de donner réponse à ce message.[/size]


[/td][/tr]
[/table]</div></center>

Une solution : une marge à droite ou changer la taille de la première cellule de votre tableau en l'agrandissant.

Votre choix ?

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajouter une image dans le coin supérieur d'un message codé

Message par Lunathiel le Dim 9 Jan 2011 - 14:59

on peu essayer de changer la taille de la 1er cellule alors...

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajouter une image dans le coin supérieur d'un message codé

Message par ge80 le Dim 9 Jan 2011 - 15:01

OK, je supprime les bordures intérieures évidemment et remet les bordures extérieures Wink

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajouter une image dans le coin supérieur d'un message codé

Message par Lunathiel le Mar 11 Jan 2011 - 23:27

Ou en est tu avec ce code?

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajouter une image dans le coin supérieur d'un message codé

Message par ge80 le Mar 11 Jan 2011 - 23:32

J'attendais la réponse pour ma proposition.
C'est en "pause" Wink

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajouter une image dans le coin supérieur d'un message codé

Message par Lunathiel le Mer 12 Jan 2011 - 10:33

Tu sais quoi^^ Je viens de passer ma matinée à "chipoter" et j'y suis enfin arrivée!!!!

J'ai vu que tu participais déjà à pas mal de demande et je me suis dit "allégeons lui le travail" J'ai bidouillé comme j'ai pu =)

Et tout ceci grâce à toi je t'en remercie grandement!!! J'ai utilisé ce site =>

http://www.guide-code-html.com/les-tables-html.php

Et je me rends compte qu'avec ce tableau les possibilités sont quasiment infinie O_O

Voila le code que j'ai obtenu =>



Code:
<center><div style="width: 75%; border: 3px solid; border-color:#053250; background-color: #1E619B; -moz-border-radius: 10px;">[table cellspacing="1" border="0"]
[tr][td align=right" valign="top" width="20%"]
<div style=" width: 71px; height: 76px; border: 2px solid; border-color:#053250; -moz-border-radius: 10px; background-image:url('http://i19.servimg.com/u/f19/14/59/60/98/bourse11.jpg');"></div>  [/td]

[td]
[center]Cher (Chère) { USERNAME}

[size=18][b][color=orange]Vous recevez votre paye hebdomadaire de X Galions.[/color][/b][/size][/center]

[right]La banque d'Al'winak... Mr le maire...[/right]

[size=7]Il est inutile de donner réponse à ce message.[/size]


[/td][/tr]
[/table]</div></center>

Il doit peut-être contenir des erreurs mais il fonctionne^^

Encore un grand merci à toi et à tout ce que tu fait pour moi

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ajouter une image dans le coin supérieur d'un message codé

Message par ge80 le Mer 12 Jan 2011 - 10:43

Et ben merci, pour penser à moi Wink

Je terminé une action en cours et j'allai le faire.
La journée est longue et je ne travaille pas Wink


Très beau résultat.

Le sujet est clos je pense. Je n'oublie pas le parchemin.

victoire

ge80
+ Hyperactif +

Masculin
Messages : 16158
Inscrit(e) le : 08/10/2006

http://tsi80.pro-forums.fr/
ge80 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