Code de signature trop long

[Fuuz]

Je voulais savoir si il était possible de réduire un code HTML. C'est pour changer ma signature il se trouve que le code est trop long. Etant une extrêmement nulle dans les codes je viens chercher de l'aide !

Code:

<ul><p><table align="center" cellspacing="05"><tr><td><img src="http://urlz.fr/7f3" width="150px"; img style="border-radius: 100px 0px 0px 0px;">
<img src="http://urlz.fr/7f4" width="150px";">
<img src="http://urlz.fr/7f5" width="150px"; img style="border-radius: 0px 0px 0px 100px;"></div></div></td><td><div style="font-size: 35px; margin-top: 1px; margin-left: -10px; font-family: Vivaldi; letter-spacing: -1px; width: 200px; text-transform: lowercase; color:salmon; line-height: 30px; text-align: center;">" Friendship lasts longer between equals "</div><div style="text-align: justify; margin-left : 1px; margin-top: 10px; width: 180px; font-size: 10px; line-height: 10px; text-align: justify">« Habituellement, les gens ont tendance à dire que l'amitié garçon-fille est impossible, car souvent ambigüe. Pour moi, c'est l'amitié garçon-garçon qui m'a toujours paru délicate, beaucoup trop intéressée pour émettre des gestes désintéressés constituant, avec la confiance, une des bases de l'amitié. » Mavis Aylesbury & C. Sixtine Haddkins</div></div></SPAN></td></tr></table></div>

[Lixyr]

Re

Oula, oui, en effet.

Comme ça, c'est mieux ?

Code:

<div style="width:350px;margin:auto;"><div style="float:left;"><img src="http://urlz.fr/7f3" style="width:150px;border-radius: 100px 0px 0px 0px;"><br /><img src="http://urlz.fr/7f4" width="150px";"><br /><img src="http://urlz.fr/7f5" style="width:150px; border-radius: 0px 0px 0px 100px;"></div><div style="float:right;margin-top:45px;"><p style="font-size: 35px;margin-top: 1px;margin-left: -10px; font-family: Vivaldi; letter-spacing: -1px; width: 200px;text-transform: lowercase; color:salmon; line-height: 30px; text-align: center;">" Friendship lasts longer between equals "</p><p style="font-size: 10px;margin-top:10px;text-align: justify; margin-left:1px;width: 180px; line-height: 10px;">« Habituellement, les gens ont tendance à dire que l'amitié garçon-fille est impossible, car souvent ambigüe. Pour moi, c'est l'amitié garçon-garçon qui m'a toujours paru délicate, beaucoup trop intéressée pour émettre des gestes désintéressés constituant, avec la confiance, une des bases de l'amitié. » Mavis Aylesbury & C. Sixtine Haddkins</p></div><hr style="clear:both;" /></div>

Je peux encore réduire un peu plus en optimisant le css :

Code:

<div style="width:350px;margin:auto;"><div style="float:left;"><img src="http://urlz.fr/7f3" style="width:150px;border-radius: 100px 0px 0px 0px;"><br /><img src="http://urlz.fr/7f4" width="150px"><br /><img src="http://urlz.fr/7f5" style="width:150px; border-radius: 0px 0px 0px 100px;"></div><div style="float:right;margin-top:45px;"><p style="font:35px Vivaldi; margin:1px 0px 0px -10px; letter-spacing:-1px; width:200px; text-align:center; text-transform:lowercase; color:salmon; line-height: 30px;">" Friendship lasts longer between equals "</p><p style="font-size:10px;margin-top:10px;text-align:justify; margin-left:1px;width: 180px; line-height:10px;">« Habituellement, les gens ont tendance à dire que l'amitié garçon-fille est impossible, car souvent ambigüe. Pour moi, c'est l'amitié garçon-garçon qui m'a toujours paru délicate, beaucoup trop intéressée pour émettre des gestes désintéressés constituant, avec la confiance, une des bases de l'amitié. » Mavis Aylesbury & C. Sixtine Haddkins</p></div><hr style="clear:both;" /></div>

[Fuuz]

Non c'est toujours trop long

[Lixyr]

Et ainsi ?

Code:

<div style="width:350px;margin:auto;"><div style="float:left;"><img src="http://urlz.fr/7f3" style="width:150px;border-radius:100px 0px 0px 0px;"><br /><img src="http://urlz.fr/7f4" width="150px"><br /><img src="http://urlz.fr/7f5" style="width:150px;border-radius: 0px 0px 0px 100px;"></div><div style="float:right;margin-top:45px;"><p style="font:35px Vivaldi;margin:1px 0px 0px -10px;letter-spacing:-1px;width:200px;text-align:center;color:salmon;line-height:30px;">" friendship lasts longer between equals "</p><p style="font-size:10px;margin-top:10px;text-align:justify;width:180px;line-height:10px;">« Habituellement, les gens ont tendance à dire que l'amitié garçon-fille est impossible, car souvent ambigüe. Pour moi, c'est l'amitié garçon-garçon qui m'a toujours paru délicate, beaucoup trop intéressée pour émettre des gestes désintéressés constituant, avec la confiance, une des bases de l'amitié. » Mavis Aylesbury & C. Sixtine Haddkins</p></div><hr style="clear:both;" /></div>

Autrement, il faudra fusionner les images gif entre elle via un logiciel (gimp, photoshop) pour qu'on n'affiche au final qu'une seule image, parce que je ne peux pas optimiser plus. A moins d'insérer ce code dans une page html et d'ensuite l'afficher en iframe...

[Tech]

Bonjour,

Ou si vous êtes le fondateur (ce qui n'est pas le cas on dirait), utilisez la feuille de style CSS pour faire des classes

Cordialement.

EDIT : Ou même, même si c'est un peu "barbare", utilisez la balise link pour insérer dans la signature une feuille de style externe. Faudra juste que ça ne crée pas un conflit avec les codes du forum, j'ai pas testé.

[Fuuz]

Oui c'est encore trop long..

[Lixyr]

EDIT : Ou même, même si c'est un peu "barbare", utilisez la balise link pour insérer dans la signature une feuille de style externe. Faudra juste que ça ne crée pas un conflit avec les codes du forum, j'ai pas testé.

Bah ça au pire je peux m'en charger. Avec des classes bizarres ça ne devrait pas poser de problèmes.  

[Fuuz]

Je me sens tellement nulle  

[Lixyr]

Boooon, j'ai testé et ça marche très bien, alors voilà, tu vas faire exactement ce que je vais te dire, sans omettre le moindre détail. ^^

1- le code html de ta signature
Dans ton profil >> signature, mets ce code :

Code:

<link rel="stylesheet" type="text/css" href="URL_PROCHAINE_DU_FICHIER_CSS" /><div class="blok_Fuuz"><div class="floatL"><img src="http://urlz.fr/7f3" id="haut"><br /><img src="http://urlz.fr/7f4"><br /><img src="http://urlz.fr/7f5" id="bas"></div><div class="floatR"><p id="title_Fuuz">" friendship lasts longer between equals "</p><p id="para_Fuuz">« Habituellement, les gens ont tendance à dire que l'amitié garçon-fille est impossible, car souvent ambigüe. Pour moi, c'est l'amitié garçon-garçon qui m'a toujours paru délicate, beaucoup trop intéressée pour émettre des gestes désintéressés constituant, avec la confiance, une des bases de l'amitié. » Mavis Aylesbury & C. Sixtine Haddkins</p></div></div>

C'est tout de suite plus petit. On y reviendra après.
Enregistre ton html. Pour l'instant, il ne ressemble à rien, c'est normal.
Garde ta page ouverte, on y reviendra plus tard.

Ensuite :

2- enregistrer le code css

 Tu vas ouvrir notpad++. Si tu ne l'as pas, télécharge-le, c'est gratuit, et c'est le top du top.
 une fois fais, dans l'onglet vide qui est ouvert, tu vas mettre ce code :

Code:

.blok_Fuuz {width:350px;margin:auto;clear:both;}
.blok_Fuuz .floatL {float:left;}
.blok_Fuuz .floatL img {width:150px;}
.blok_Fuuz .floatL img#haut {border-radius: 100px 0px 0px 0px;}
.blok_Fuuz .floatL img#bas {border-radius: 0px 0px 0px 100px;}
.blok_Fuuz .floatR {float:right;margin-top:45px;}
.blok_Fuuz .floatR p#title_Fuuz {font:35px Vivaldi;margin:1px 0px 0px -10px; letter-spacing:-1px;width:200px;text-align:center;color:salmon;line-height:30px;}
.blok_Fuuz .floatR p#para_Fuuz {font-size:10px;margin-top:10px;text-align:justify;width:180px;line-height:10px;}

C'est le CSS que j'ai créé spécialement pour toi.  
 tu vas enregistrer ce fichier en suivant ces étapes :
fichier >> enregistrer sous >>
• nom du fichier : css_signature_fuuz
• Type : Cascade Style Sheets File (.css)
tu enregistres.


3- héberger le code css

Ensuite, tu vas aller sur Archive-Host (c'est pas forcé, mais c'est celui que j'utilise pour ma part, alors je pense que c'est bien pour toi).
  tu te créé un compte dessus.
 tu ouvres ta session (côté panel, pas côté sites web)
 Normalement, tu as écrit, en gras "Vous êtes dans : Mes Fichiers". Sinon, tu vas dans tes fichiers.
 tu cliques sur "ajouter des fichiers"
 soit tu glisses ton document, enregistré quelque part sur ton ordinateur, dans le champ fait pour, soit tu vas le chercher manuellement via la dite fonction.
 tu démarres l'envoie des fichiers.
 lorsque c'est bon, tu verras dans ton panel, un fichier rose-violet, avec en dessous son titre : "css signature fuuz.css". Si c'est le cas, c'est que tu as bien fait ton travail. Sinon, recommence.
 passe la souris sur ce dossier violet : une petite flèche pointant vers le bas apparait : clique dessus.
 clique sur "informations et codes"
 récupère le lien Principal en le copiant (ctrl+C).

4- poster la signature

ensuite, tu retournes sur le forum sur lequel tu veux afficher ta signature.
Dans le code, tu vas trouver ça, tout au début :

<link rel="stylesheet" type="text/css" href="URL_PROCHAINE_DU_FICHIER_CSS" />

remplace URL_PROCHAINE_DU_FICHIER_CSS par le lien Principal que tu viens de copier.
Enregistre.
Et voilà, une jolie signature.

[Fuuz]

Oh! merci! Ca à du te prendre un temps fou! *-*

[Lixyr]

Cinq minutes ?

[Fuuz]

Faut connaitre les codes CSS parcoeur x)!

[Lixyr]

J'ai repris les tiens, j'ai juste rajouté des classes...
Est-ce que ça fonctionne ?

[Fuuz]

Parfaitement oui!

[Lixyr]

Super  
N'oublie pas de mettre ton sujet en