Code pour signature

Page 1 sur 3 1, 2, 3  Suivant

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

Résolu Code pour signature

Message par Mel.76 le Mar 13 Aoû 2013 - 15:38

Bonjour/Bonsoir à tous Cool 

Je trouve ce code en tant que signature vraiment somptueux I love you 
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 ? Siffleur 



Dernière édition par Mel.76 le Jeu 15 Aoû 2013 - 13:26, édité 1 fois

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Mar 13 Aoû 2013 - 18:25

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>
 

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Mel.76 le Mar 13 Aoû 2013 - 19:42

J'avoue que c'est un peu du chinois pour moi ^^ mais merci beaucoup I love you 
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é ? Siffleur

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Mar 13 Aoû 2013 - 21:03

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 ^^

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Mel.76 le Mar 13 Aoû 2013 - 21:43

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é Wink 

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Mar 13 Aoû 2013 - 22:07

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

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Mel.76 le Mar 13 Aoû 2013 - 22:18

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

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Mar 13 Aoû 2013 - 22:34

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.

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Mel.76 le Mar 13 Aoû 2013 - 23:50

Ce n'est pas encore le résultat final que je souhaite mais j'aimerais que ça soit comme ceci :
Spoiler:
http://img4.hostingpics.net/pics/650614478956423.png

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 ^^

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Mar 13 Aoû 2013 - 23:59

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(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>


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? ^^

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Mel.76 le Mer 14 Aoû 2013 - 11:50

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.. Arrow  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 Wink

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Mer 14 Aoû 2013 - 15:55

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 : http://image.noelshack.com/fichiers/2013/33/1376483699-1.jpeg

Reprenons avec notre div;

<div style="background-image: url(http://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(http://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(http://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(http://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(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 à 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(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>


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 ^^


Dernière édition par Aii-Chan~~ le Mer 14 Aoû 2013 - 16:09, édité 1 fois

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Mer 14 Aoû 2013 - 16:06

[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*]

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Mel.76 le Mer 14 Aoû 2013 - 19:25

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



Dernière édition par Mel.76 le Jeu 15 Aoû 2013 - 13:27, édité 1 fois

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Mer 14 Aoû 2013 - 20:17

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:


Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Mel.76 le Mer 14 Aoû 2013 - 20:40

C'est exactement ce que je souhaitais, merci I love you 
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 Siffleur 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.. Arrow 



Dernière édition par Mel.76 le Jeu 15 Aoû 2013 - 13:28, édité 1 fois

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Mer 14 Aoû 2013 - 21:37

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 Very Happy 

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à !

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Mel.76 le Mer 14 Aoû 2013 - 21:50

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 ? Siffleur

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>

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Mer 14 Aoû 2013 - 22:05

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>


Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Mel.76 le Mer 14 Aoû 2013 - 22:52

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

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Mer 14 Aoû 2013 - 23:02

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>
       


Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Mel.76 le Mer 14 Aoû 2013 - 23:09

C'est beaucoup mieux, merci pour tout vraiment Clin d\'oeil

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Mer 14 Aoû 2013 - 23:11

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

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Mel.76 le Mer 14 Aoû 2013 - 23:19

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 ?

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Mer 14 Aoû 2013 - 23:35

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

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Mel.76 le Mer 14 Aoû 2013 - 23:54



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



Dernière édition par Mel.76 le Jeu 15 Aoû 2013 - 13:29, édité 1 fois

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Jeu 15 Aoû 2013 - 0:04

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 http://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

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Mel.76 le Jeu 15 Aoû 2013 - 0:10

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

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Aii-Chan~~ le Jeu 15 Aoû 2013 - 0:15

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

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour signature

Message par Mel.76 le Jeu 15 Aoû 2013 - 0:24

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

Mel.76
*

Messages : 48
Inscrit(e) le : 30/07/2013

Mel.76 a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 3 1, 2, 3  Suivant

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