Code pour signature

[Mel.76]

Bonjour/Bonsoir à tous  

Je trouve ce code en tant que signature vraiment somptueux  

Code:

<link href='http://fonts.googleapis.com/css?family=Great+Vibes|Rye' rel='stylesheet' type='text/css'>

<center><div style="background-image: url(http://24.media.tumblr.com/3d87c1fcf563456eeb6cd57b310d7d35/tumblr_mnihqmO9PK1r28isyo2_500.gif); width: 480px; background-position: center;  text-shadow: 1px 1px 5px #000; color: #fff; border-radius: 12px; margin-top: 6px; box-shadow: 0px 0px 7px #000;">

[center]<div style="font-family: 'Great Vibes', cursive; font-size: 18px;  text-transform: lowercase;">Love is danger, love is pleasure,Love is pure, the only treasure</div><div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;">[color=#cc3333]Make love your goal[/color]</div><div style="font-family: times new roman; font-size: 10px;  line-height: 11px; text-transform: uppercase;">The power of love, A force from above, Cleaning my soul, Flame on burn desire...</div>[/center]

<span style="letter-spacing: 3px; font-size: 8px; color: #ccc;">signature par littleharleen</span></div></center>

Mais seulement j'aimerais le modifié quelque peu.. je m'explique : Je souhaiterais qu'il apparaître entre plusieurs tables comme si-dessous, saviez-vous comment je pourrais m'y prendre ?  

[Aii-Chan~~]

Bonjour ! C'est très simple, un tableau se compose de cette façon :

Code:

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

tr correspond à la ligne ou rangée, quant à td, il s'agit des colonnes verticales.

Exemple

Code:

<table> <tr> <td> Je suis la premiere colonne </td><td> Je suis la deuxieme et tout ça sur la même ligne</td></tr><tr><td> Ici commence la nouvelle ligne, alignée sous la colonne du dessous</td><td>avec tout ça, j'ai un tableau de 4x4, avec deux rangées et deux colonnes </td></tr></table>


Bref, plutôt que de t'embrouiller, décortiquons mieux le code ! ^^ Dans ton exemple, il y a 3 colonnes, donc tu devras ouvrir 3 <td> dans ton tableau, un de plus que mon exemple.

Code:


<table><tr><td> Colonne 1</td><td> Colonne 2 </td><td> Colonne 3</td></tr></table>

Toujours refermer avec </td> les colonnes et </tr> à la fin de la ligne, si tu ne souhaites qu'une seule ligne, tu ferme le tout avec </table>
Voilà un schéma pour que tu puisses mieux comprendre, un tableau à 3 ligne et 3 colonne x)



Voilà pour l'explication des tableaux, j'espère que tu as compris mais il y a des explications bien meilleures sur le forum ou des sites expliquant en détail ce qui concerne le html ^^


Donc pour faire cette signature, tu crées un tableau et ouvre une ligne;

Code:

<table><tr>

Tu ouvres la première colonne ;

<td>
Et là commence le plus amusant, mettre les images et personnaliser tout ça !
Tu commences par créer un div et lui attribue un style comme dans la signature que tu as mis là ;

<div style=""> et entre les guillemets, tu mets ton image de fond, la taille si nécessaire, une ombre, ect. Ensuite tu ouvre une nouvelle <div> ou des <span> si tu veux juste rajouter du texte, sans fermer la première pour que ton texte puisse se "coller" dessus et que tu ne le retrouve pas en dessous ! attribue lui un style encore une fois, genre

Code:

<span style="color:#FFFFFF; font-weight:bold;font-size:9px;">Un texte blanc, en gras et large de 9 pixel</span>

Referme chaque nouvelle "span" ou "div", suivant ce que tu as utiliser.
Quand tu es satisfaite de la première colonne, tu peux refermer par </div></td> et tu ouvre une nouvelle colonne, refaire une div avec un background-image, rajouter des textes et tout refermer.
Rebelotte avec la dernière colonne, ouvrir une div, des span à l'intérieur, refermer tout et n'oublie SURTOUT pas de fermer la rangée avec </tr> ! Si tu as fini, tu peux refermer par </table> et ta signa est toute prête à l'emploi ! ^^

Si tu as des questions, n'hésite pas, j'avoue que c'est un peu anarchique x_x"

Voici un code vite fait en exemple, à toi de réduire les tailles et d'aligner comme tu veux les textes sur les images !

Code:

<table> <tr> <td> <div style="background-image: url(http://image.noelshack.com/fichiers/2013/33/1376410532-1.jpeg); height:210px; width: 210px;border-radius: 10px; box-shadow: 0px 0px 3px #000;background-position: center; "><div style="font-family:verdana; text-transform: uppercase; padding: 5px;font-size:10px;">Le texte 1</div><br /><br /><br /><div style="font-family:times new roman; padding: 5px;font-size:12px;">Le texte 2</div></div></td>
<td> <div style="background-image: url(http://image.noelshack.com/fichiers/2013/33/1376410820-2.jpeg); height:210px; width: 210px;border-radius: 10px; box-shadow: 0px 0px 3px #000;background-position: center; "><div style="font-family:verdana; text-transform: uppercase; padding: 5px;font-size:10px;">Le texte 1</div><br /><br /><br /><div style="font-family:times new roman; padding: 5px;font-size:12px;">Le texte 2</div></div></td>
<td> <div style="background-image: url(http://image.noelshack.com/fichiers/2013/33/1376410823-3.jpeg); height:210px; width: 220px;border-radius: 10px; box-shadow: 0px 0px 3px #000;background-position: center; "><div style="font-family:verdana; text-transform: uppercase; padding: 5px;font-size:10px;">Le texte 1</div><br /><br /><br /><div style="font-family:times new roman; padding: 5px;font-size:12px;">Le texte 2</div></div></td></tr></table>
 

[Mel.76]

J'avoue que c'est un peu du chinois pour moi ^^ mais merci beaucoup  
Juste j'aimerais garder le même code mais en y faisant seulement des modifications, c'est possible ? Je souhaiterais ajouté le code entre plusieurs tables dont les trois colonnes mais où doit-je le placé ?

[Aii-Chan~~]

rebonsoir :3
C'est possible de garder le même code mais se serait du plagiat, c'est pour ça que je t'ai un peu expliquer tout ! x)
Sinon tout depend où tu voudrais garder la signature... Sur la colonne 1, 2 ou 3 ?

En reprenant mon code, tu as cette partie :

Code:

<td> <div style="background-image: url(http://image.noelshack.com/fichiers/2013/33/1376410532-1.jpeg); height:210px; width: 210px;border-radius: 10px; box-shadow: 0px 0px 3px #000;background-position: center; "><div style="font-family:verdana; text-transform: uppercase; padding: 5px;font-size:10px;">Le texte 1</div><br /><br /><br /><div style="font-family:times new roman; padding: 5px;font-size:12px;">Le texte 2</div></div></td>

Qui correspond aux colonne, si tu veux placer le code de la signature là, il faut le placer entre les balises <td>Code à placer ici</td>
A toi de voir sur quelle colonne tu voudrais mettre la signature ^^ Si par exemple tu veux la signature au milieu, il faut chercher la deuxième partie <td></td> et coller le code entre et celles sur les côtés, même chose, il faut modifier la partie <td></td> comme bon te semble, par exemple ne pas mettre d'image mais juste du texte ! Ou l'inverse ^^

[Mel.76]

Non non mais la personne la partagé à tout le monde, comme quelqu'un la modifié je pense que je peux aussi. En fait, dans mon code j'aimerais la colonne 1,2 et 3 comme je l'ai précisé  

[Aii-Chan~~]

Ah d'accord, pas de problème alors ^^
Je crois avoir mal compris ce que tu voulais alors... Tu ne veux pas 3 colonnes distinctes avec des contenu différent mais 3 tableaux sur la signature?
Désolé, j'ai le cerveau en ratatouille x__x

[Mel.76]

J'aimerais exactement comme le modèle, oui voila c'est ce que je recherche à faire justement   

[Aii-Chan~~]

Ooooh d'accord, désolé, j'avais compris autre chose ! ^^

Donc voici en gros ce que ça donnerais, à toi de modifier ensuite :3
     

Code:

 <link href='http://fonts.googleapis.com/css?family=Great+Vibes|Rye' rel='stylesheet' type='text/css'>
       
       <center><div style="background-image: url(http://24.media.tumblr.com/3d87c1fcf563456eeb6cd57b310d7d35/tumblr_mnihqmO9PK1r28isyo2_500.gif); width: 480px; background-position: center;  text-shadow: 1px 1px 5px #000; color: #fff; border-radius: 12px; margin-top: 6px; box-shadow: 0px 0px 7px #000;">
<table><tr><td>Blabla</td><td>    
       
[center]<div style="font-family: 'Great Vibes', cursive; font-size: 18px;  text-transform: lowercase;">Love is danger, love is pleasure,Love is pure, the only treasure</div><div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;">[color=#cc3333]Make love your goal[/color]</div><div style="font-family: times new roman; font-size: 10px;  line-height: 11px; text-transform: uppercase;">The power of love, A force from above, Cleaning my soul, Flame on burn desire...</div>[/center]
</td><td> Blabla</td></td></tr></table>
       
       <span style="letter-spacing: 3px; font-size: 8px; color: #ccc;">signature par littleharleen</span></div></center>

Je ne sais pas si tu voulais garder le texte du milieu et le reste et pour ne pas surchargé le code, j'ai juste mis des "blabla" sur les deux autres colonnes.

[Mel.76]

Ce n'est pas encore le résultat final que je souhaite mais j'aimerais que ça soit comme ceci :

Spoiler:

J'ai juste le width à modifié les px ? Et les images je l'ai met entre les tables ? Parce que dans le texte il y a absolument tout ce qui concerne le code ^^

[Aii-Chan~~]

Re !
Si tu veux comme le modèle, c'est le premier code que je t'ai donner ^^
Pour les changement d'image c'est ici :
<table> <tr> <td> <div style="background-image: url(https://2img.net/image.noelshack.com/fichiers/2013/33/1376410532-1.jpeg); height:210px; width: 210px;border-radius: 10px; box-shadow: 0px 0px 3px #000;background-position: center; "><div style="font-family:verdana; text-transform: uppercase; padding: 5px;font-size:10px;">Le texte 1</div><br /><br /><br /><div style="font-family:times new roman; padding: 5px;font-size:12px;">Le texte 2</div></div></td>
<td> <div style="background-image: url(https://2img.net/image.noelshack.com/fichiers/2013/33/1376410820-2.jpeg); height:210px; width: 210px;border-radius: 10px; box-shadow: 0px 0px 3px #000;background-position: center; "><div style="font-family:verdana; text-transform: uppercase; padding: 5px;font-size:10px;">Le texte 1</div><br /><br /><br /><div style="font-family:times new roman; padding: 5px;font-size:12px;">Le texte 2</div></div></td>
<td> <div style="background-image: url(https://2img.net/image.noelshack.com/fichiers/2013/33/1376410823-3.jpeg); height:210px; width: 220px;border-radius: 10px; box-shadow: 0px 0px 3px #000;background-position: center; "><div style="font-family:verdana; text-transform: uppercase; padding: 5px;font-size:10px;">Le texte 1</div><br /><br /><br /><div style="font-family:times new roman; padding: 5px;font-size:12px;">Le texte 2</div></div></td></tr></table>


pour les tailles, oui, c'est en width et height pour la hauteur, tu les modifies en fonction de chacune de tes images ! Et les textes, je n'ai rien mis, tu peux copier-coller les div de ton modèle si t'aimes la même chose !

Avec ce code que je t'ai donner tu peux mettre 3 images en fond des 3 tableaux, je ne sais pas si le modèle que la personne a fait est pareil, mais si tu utilise le deuxieme que je t'ai envoyé, en effet là il te faut obligatoirement une image de fond qui ressembles à 3 blocs, avec le tableau à 3 colonnes directement dessus.

Est-ce que les images de ta signatures sont 3 ou tu as une seule et unique image? ^^

[Mel.76]

Au début j'utilisé le code avec une seule et unique image mais j'aimerais le modifié comme le modèle que j'ai donné. Seulement je suis un peu embrouillé avec ton code et le tout premier code que j'ai donné ^^ En css je m'y connais malheureusement pas du tout..   Pourrais-tu m'expliqué où doit-je mettre les <table> <tr> <td>, les background-image et le reste ? Pour me donner un résultat comme le modèle

[Aii-Chan~~]

Oui je me doutais que tu te serais embrouillée si je l'envoyais tout complet, c'est pour ça que j'ai évité de mettre trop de balise !
Donc si tu veux faire comme le modèle avec 3 images, la première chose à faire c'est ouvrir le tableau, avec <table>
Comme je t'ai expliquer, il faut ensuite ouvrir une ligne <tr> et puis la colonne <td>
A partir de là, tu crée une <div>, en lui attribuant un style, le css. Ce qui donnera <div style="toutes les valeurs en css"> .
On commencera par lui mettre une image de fond; commence par l'heberger sur le site de ton choix puis prends le lien direct, qui te ramène jusque l'image

pour moi ce sera cella : https://2img.net/image.noelshack.com/fichiers/2013/33/1376483699-1.jpeg

Reprenons avec notre div;

<div style="background-image: url(https://2img.net/image.noelshack.com/fichiers/2013/33/1376483699-1.jpeg)

Tu insère le lien entre les parenthèse, puis tu mets un ";" pour passez à la taille (moi elle fait 160 de largeur et 160 de hauteur)

<div style="background-image: url(https://2img.net/image.noelshack.com/fichiers/2013/33/1376483699-1.jpeg); width: 160px ; height : 160px ;

Tu continues avec des ";" à chaque fois que tu viens d'ajouter quelque chose. Si tu veux des bordures arrondies comme sur l'exemple;

<div style="background-image: url(https://2img.net/image.noelshack.com/fichiers/2013/33/1376483699-1.jpeg); width: 160px ;height : 160px; Border-radius: 15px;  

Ensuite, tu referme toute la balise avec ">, ce qui te donne;


<div style="background-image: url(https://2img.net/image.noelshack.com/fichiers/2013/33/1376483699-1.jpeg); width: 160px ;height : 160px; Border-radius: 15px;">.

là on va s'occuper du texte, tu ouvres une nouvelle div avec un style :

<div style="

En css pour le texte le principal a retenir c'est :

Color = couleur du texte
Font-size = taille du texte
Font-family = police d'écriture

D'autres personnalisations existent pour faire des effet plus jolis, comme ;

letter-spacing = espacement des lettres (valeur négative pour les rapprocher, positif pour les éloigner)
text-shadow = ombre du texte
ect...

Reprenons avec notre div, pour y placer l'ombre, couleur, la police d'écriture et la taille, exactement comme celle de la signature;  


<div style=" text-shadow: 1px 1px 5px #000; color: #fff; font-family: times new roman; font-size: 10px;">

Jusque là, voici ce que ça donne :


Comme tu vois, le texte n'est pas parfaitement centrer, alors tu rajoutes un text-align:center

<div style=" text-shadow: 1px 1px 5px #000; color: #fff; font-family: times new roman; font-size: 10px;  text-align:center"> et le texte sera au centre :


Ce n'est pas très visible sur mon image, mais on s'en fiche comme elle sert d'exemple, au moins comme ça tu gardera le même texte que sur la signature originale !  

On peut y rajouter un text-transform: uppercase pour que tout soit en majuscule, comme l'exemple ;

<div style=" text-shadow: 1px 1px 5px #000; color: #fff; font-family: times new roman; font-size: 10px;  text-align:center; text-transform: uppercase">

et en même temps, ajouter une marge pour que le texte ne colle pas au bord, ce qui n'est pas très joli, donc on met un padding:10px;

<div style=" text-shadow: 1px 1px 5px #000; color: #fff; font-family: times new roman; font-size: 10px;  text-align:center;text-transform: uppercase;padding:10px;">

avec les lettres en majuscule et le padding, mon div ressemble à ça :


Tu peux refermer le premier div qui contient ton texte avec un </div>

donc :
<div style=" text-shadow: 1px 1px 5px #000; color: #fff; font-family: times new roman; font-size: 10px; text-align:center;text-transform: uppercase; padding:10px; ">Blablabla</div>

Maintenant, on va passer au deuxieme texte, on commence par rajouter des espaces avec <br />, deux me suffiront !
<div style=" text-shadow: 1px 1px 5px #000; color: #fff; font-family: times new roman; font-size: 10px; text-align:center;text-transform: uppercase; padding:10px; ">Blablabla</div> <br /><br />

Tu ouvres une nouvelle div comme on a déjà fait ou tu fais copier-coller de la première en modifiant les valeurs, ou même celle de l'exemple, avec l'écriture spéciale en bas :

<div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;"> Make love your goal </div>


Si tu colle ça comme ça, tu verra que l'écriture ne sera pas la même, comme c'est une police de googlefont, il faut rajouter un bout de code au début, place le avant ton <table><tr><td>

le code à copier avant :
    <link href='http://fonts.googleapis.com/css?family=Great+Vibes|Rye' rel='stylesheet' type='text/css'>

ce qui va ressemble  à :    
<link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>
<table><tr><td><div style="........

Retourne sur la div contenant ce texte et rajoutes-y une couleur de ton choix (ici noir) et un padding pour que ça ne se colle pas aux bords ;

<div style="font-family: 'Rye', cursive; font-size: 22px; text-transform: uppercase; color:#000; padding: 5px;"> Make love your goal </div>

Voici le resultat :


Ton code devrait ressembler à ceci maintenant :

Code:


<link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>
<table><tr><td>
<div style="background-image: url(http://image.noelshack.com/fichiers/2013/33/1376483699-1.jpeg); width: 160px ;height : 160px; Border-radius: 15px;"><div style=" text-shadow: 1px 1px 5px #000; color: #fff; font-family: times new roman; font-size: 10px; text-align:center;text-transform: uppercase; padding:10px; ">Blablabla</div><br /><br />
<div style="font-family: 'Rye', cursive; font-size: 22px; text-transform: uppercase;padding: 5px"> Make love your goal </div>

Tu referme le div et la premiere colonne ;

</div></td>

Et tu ouvres une deuxieme :

<td>

Tu peux faire copier coller de la précedente colonne et changer l'image et tes textes :

<div style="background-image: url(https://2img.net/image.noelshack.com/fichiers/2013/33/1376483699-1.jpeg); width: 160px ;height : 160px; Border-radius: 15px;"><div style=" text-shadow: 1px 1px 5px #000; color: #fff; font-family: times new roman; font-size: 10px; text-align:center;text-transform: uppercase; padding:10px; ">Blablabla</div><br /><br />
<div style="font-family: 'Rye', cursive; font-size: 22px; text-transform: uppercase;padding: 5px"> Make love your goal </div>

Tu referme à nouveau ton div et la deuxieme colonne ;

</div></td>

Et tu ouvres la dernières

<td>

Tu refais un copier coller, pour changer ton background-image ainsi que tes textes ^^ :
<div style="background-image: url(https://2img.net/image.noelshack.com/fichiers/2013/33/1376483699-1.jpeg); width: 160px ;height : 160px; Border-radius: 15px;"><div style=" text-shadow: 1px 1px 5px #000; color: #fff; font-family: times new roman; font-size: 10px; text-align:center;text-transform: uppercase; padding:10px; ">Blablabla</div><br /><br />
<div style="font-family: 'Rye', cursive; font-size: 22px; text-transform: uppercase;padding: 5px"> Make love your goal </div>

Et tu refermes tout avec un </div></td></tr></table>


Ton code doit ressembler à ça maintenant :

Code:

<link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>
<table><tr><td>
<div style="background-image: url(http://image.noelshack.com/fichiers/2013/33/1376483699-1.jpeg); width: 160px ;height : 160px; Border-radius: 15px;"><div style=" text-shadow: 1px 1px 5px #000; color: #fff; font-family: times new roman; font-size: 10px; text-align:center;text-transform: uppercase; padding:10px; ">Blablabla</div><br /><br />
<div style="font-family: 'Rye', cursive; font-size: 22px; text-transform: uppercase;padding: 5px"> Make love your goal </div></div></td>
<td>
<div style="background-image: url(http://image.noelshack.com/fichiers/2013/33/1376483699-1.jpeg); width: 160px ;height : 160px; Border-radius: 15px;"><div style=" text-shadow: 1px 1px 5px #000; color: #fff; font-family: times new roman; font-size: 10px; text-align:center;text-transform: uppercase; padding:10px; ">Blablabla</div><br /><br />
<div style="font-family: 'Rye', cursive; font-size: 22px; text-transform: uppercase;padding: 5px"> Make love your goal </div></div></td>
<td>
<div style="background-image: url(http://image.noelshack.com/fichiers/2013/33/1376483699-1.jpeg); width: 160px ;height : 160px; Border-radius: 15px;"><div style=" text-shadow: 1px 1px 5px #000; color: #fff; font-family: times new roman; font-size: 10px; text-align:center;text-transform: uppercase; padding:10px; ">Blablabla</div><br /><br />
<div style="font-family: 'Rye', cursive; font-size: 22px; text-transform: uppercase;padding: 5px"> Make love your goal </div></div></td>
</tr></table>


Comme tu vois il est très long, mais c'est des répétitions donc il faut s'occuper d'une colonne à la fois pour ne pas s'embrouiller !


Et maintenant ta signa est prête ! Je te conseilles de faire une sorte de petit schéma avec les images de fond et ce que tu veux noter sur le texte, pour que tu ais déjà une vision d'ensemble de ce que tu veux, comme ça si malgré mes explications tu as du mal ou si tu ne sais pas comment donner tel style à ta signature comme tu ne t'y connais pas en css, tu pourra me montrer pour que je puisse t'aider !
Mais le css est très facile, si tu prends un peu le temps et que tu bidouilles beaucoup, il y a moyen d'apprendre des tas de choses ^^

[Aii-Chan~~]

[Beuh, je fais un appel aux modérateurs, j'ai cliqué sur cité au lieu d'éditer, si on pouvait supprimer ce message inutile x_x *boulet*]

[Mel.76]

Merci beaucoup de m'expliqué c'est adorable de ta part  
Mais je souhaiterais garder le même code que cette signature sous la force de 3 images :

[Aii-Chan~~]

Mmmmh... La solution la plus simple et se rapprochant le plus de la signa, c'est déjà créer ton image avec les 3 que tu souhaites.
Par exemple :

et le code ressemblerait à :

Code:

       <link href='http://fonts.googleapis.com/css?family=Great+Vibes|Rye' rel='stylesheet' type='text/css'>
        
       <center>
<table style="background-image: url(http://image.noelshack.com/fichiers/2013/33/1376503218-signs.png); width:550px;height:270px; background-position: center;  text-shadow: 1px 1px 5px #000; color: #FFFFFF; border-radius: 12px;  "><tr><td style="width:170px">
<div style="font-family: 'Great Vibes', cursive; font-size: 18px;  text-transform: lowercase;padding:10px;margin-top:-4px">Whatever the power of the man</div>
 <div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:10px;text-align:center"> Make love</div></td>
<td style="width:170px;"> <br /> <div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:10px;text-align:center"> your</div></td>
<td style="width:170px"> <div style="font-family: 'Great Vibes', cursive; font-size: 18px;  text-transform: lowercase;padding:10px;margin-top:-46px;">the woman will always be his weakness</div><div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:1px;text-align:center;"> Goal</div></td>

</tr></table></div>
 <span style="letter-spacing: 3px; font-size: 8px; color: #ccc;">signature par littleharleen</span></div></center>

Ce qui donne:

[Mel.76]

C'est exactement ce que je souhaitais, merci  
Juste, le "Make Love" paraît trop serrer et bien trop bas par rapport au deux autres colonnes lorsque je le met dans ma signature  Comment remédié à ça ?

J'ai un autre petit soucis, lorsque j'affiche le code dans ma signature, ça s'affiche pas du tout comme je le voudrais.. du moins pas comme le modèle que tu as mis..  

[Aii-Chan~~]

rebonsoir... C'est normal, il semble que tu ais mis plusieurs width et des <tr> en trop, je te remet tout ça en ordre et tu me dis si c'était le résultat que tu voulais  

Code:

<link href='http://fonts.googleapis.com/css?family=Great+Vibes|Rye' rel='stylesheet' type='text/css'>            <center>
<table style="background-image: url(http://img11.hostingpics.net/pics/923418tumblrmfcoyexyWo1qcoktfo1250.gif); width:500px;height:245px; background-position: center; text-shadow: 1px 1px 5px #000; color: #FFFFFF; border-radius:12px; "><tr><td style="width:110px"><div style="font-family: 'Great Vibes', cursive; font-size: 18px;  text-transform: lowercase;padding:10px;margin-top:-4px">Whatever the power of the man</div>       <div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:10px;text-align:center;line-heigt:5px;">Make  

 love</div></td>
 <td style="width:250px">       <div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:10px;text-align:center">

your</div></td> <td style="width:110px"> <div style="font-family: 'Great Vibes', cursive; font-size: 18px; text-transform: lowercase;padding:10px;margin-top:-46px;">the woman will always be his weakness</div><div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:1px;text-align:center;">
Goal</div></td>
       </tr></table></div>
       <span style="letter-spacing: 3px; font-size: 8px; color: #ccc;"><center>signature par littleharleen</span></div></center>

Voilà !

[Mel.76]

C'est presque ça.
Je trouve l'image du milieu bien trop grande que les deux autres et il y a aucun espacement entre chaque colonnes.. c'est normal ?

Et ou je peux mettre les deux autres background-image ?

Code:

<link href='http://fonts.googleapis.com/css?family=Great+Vibes|Rye' rel='stylesheet' type='text/css'>            <center>
<table style="background-image: url(http://img11.hostingpics.net/pics/816419tumblrm4vjhg2PBZ1r02w2zo1250.gif); width:500px;height:245px; background-position: center; text-shadow: 1px 1px 5px #000; color: #FFFFFF; border-radius:12px; "><tr><td style="width:110px"><div style="font-family: 'Great Vibes', cursive; font-size: 18px;  text-transform: lowercase;padding:10px;margin-top:-4px">Whatever the power of the man</div>      <div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:10px;text-align:center;line-heigt:5px;">Make
love</div></td>
<td style="width:250px">      <div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:10px;text-align:center">

your</div></td> <td style="width:110px"> <div style="font-family: 'Great Vibes', cursive; font-size: 18px; text-transform: lowercase;padding:10px;margin-top:-46px;">the woman will always be his weakness</div><div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:1px;text-align:center;">
Goal</div></td>
     </tr></table></div>
     <span style="letter-spacing: 3px; font-size: 8px; color: #ccc;"><center>signature par littleharleen</span></div></center>

[Aii-Chan~~]

Je pensais que c'était voulu l'image du milieu plus grande, désolé !
Pour les deux autres images, j'ai remis les liens, tu pourra les changer maintenant xD Pour que les colonnes ne se touche pas, j'ai rajouter un cellspacing au début de la table.

Code:

<link href='http://fonts.googleapis.com/css?family=Great+Vibes|Rye' rel='stylesheet' type='text/css'>    <center> <table cellspacing="5" style="width:555px;height:245px;  text-shadow: 1px 1px 5px #000; color: #FFFFFF;"><tr>  <td style="background-image: url(http://img11.hostingpics.net/pics/816419tumblrm4vjhg2PBZ1r02w2zo1250.gif); border-radius:12px;">    <div style="width:185px ;font-family: 'Great Vibes', cursive; font-size: 18px;  text-transform: lowercase;padding:10px;margin-top:-4px">Whatever the power of the man</div>      <div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:10px;text-align:center;line-heigt:5px;">Make

love</div></td>

  <td style="background-image: url(http://img11.hostingpics.net/pics/816419tumblrm4vjhg2PBZ1r02w2zo1250.gif); border-radius:12px;">    <div style="width:185px ;font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:10px;text-align:center">
     
      your</div></td>

 <td style="background-image: url(http://img11.hostingpics.net/pics/816419tumblrm4vjhg2PBZ1r02w2zo1250.gif); border-radius:12px;">    <div style="width:185px ;font-family: 'Great Vibes', cursive; font-size: 18px; text-transform: lowercase;padding:10px;margin-top:-46px;">the woman will always be his weakness</div><div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:1px;text-align:center;">
      Goal</div></td></tr></table></div>
          <span style="letter-spacing: 3px; font-size: 8px; color: #ccc;"><center>signature par littleharleen</span></div></center>



[Mel.76]

Je trouve les colonnes vachement gros c'est normal ?  
Et là ou c'est écrit "signature par littleharleen" comment fait-on pour la remonté un peu plus haut ?

[Aii-Chan~~]

Re ! voilà les modif ! Il suffisait d'enlever quelques espaces pour le texte du bas ^^

Code:

<link href='http://fonts.googleapis.com/css?family=Great+Vibes|Rye' rel='stylesheet' type='text/css'>    <center> <table cellspacing="5" style="width:420px;height:245px;  text-shadow: 1px 1px 5px #000; color: #FFFFFF;"><tr>  <td style="background-image: url(http://img11.hostingpics.net/pics/816419tumblrm4vjhg2PBZ1r02w2zo1250.gif); border-radius:12px;">    <div style="width:140px ;font-family: 'Great Vibes', cursive; font-size: 18px;  text-transform: lowercase;padding:10px;margin-top:-4px">Whatever the power of the man</div>      <div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:10px;text-align:center;line-heigt:5px;">Make
       
  love</div></td>
       
        <td style="background-image: url(http://img11.hostingpics.net/pics/816419tumblrm4vjhg2PBZ1r02w2zo1250.gif); border-radius:12px;">    <div style="width:140px ;font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:10px;text-align:center">
           
    your</div></td>
       
        <td style="background-image: url(http://img11.hostingpics.net/pics/816419tumblrm4vjhg2PBZ1r02w2zo1250.gif); border-radius:12px;">    <div style="width:140px ;font-family: 'Great Vibes', cursive; font-size: 18px; text-transform: lowercase;padding:10px;margin-top:-46px;">the woman will always be his weakness</div><div style="font-family: 'Rye', cursive; font-size: 26px; text-transform: uppercase;padding:1px;text-align:center;">
    Goal</div></td></tr></table></div><span style="letter-spacing: 3px; font-size: 8px; color: #ccc;"><center>signature par littleharleen</span></div></center>
       



[Mel.76]

C'est beaucoup mieux, merci pour tout vraiment

[Aii-Chan~~]

De rien !
J'espere t'avoir appris quelques notions de css ^^

[Mel.76]

Oui j'en sais un peu plus déjà ^^
Je voudrais te demandé un dernier petit truc, c'est normal que les images ne soit pas centrer ?

[Aii-Chan~~]

Euh non O_O
Chez moi c'est centré, tu peux me faire un screen du résultat ?

[Mel.76]

Et ça me dit que la signature est trop longue.. je dois changé quoi ?

[Aii-Chan~~]

Fais copier-coller sur un fichier txt, et tu enregistre en htm; comme ceci
"nomdufichier.htm"

Ensuite tu l'héberge sur un site, comme https://www.archive-host.com/ et tu crées une iframe avec ce générateur :
http://creer-un-site.fr/generateur-d-iframe-118.php

en désactivant le scolling et les bordures visible, pour la taille, tu mets 250 et 500

Tu génères le code et puis tu le colle simplement sur le forum :3

[Mel.76]

Euh.. c'est quoi un fichier txt ? *inculte*

[Aii-Chan~~]

Un fichier texte ^^ Tu fais ça avec le bloc note :3

[Mel.76]

Oui voilà je l'ai fais, mais comment enregistré en htm ?