Une signature défilante? C'est possible!

Faire une signature défilante

Bonjour Bonsoir! Aujourd'hui, je vais décortiquer avec vous le code permettant de réaliser ce genre de signature:

Alors tout d'abord, le code de la page en elle même:

Code:: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sign Tamashii</title>
<style type="text/css">


</style></head>

<body>

<center><div style="border-top: 1px dotted ;border-bottom: 1px dotted;border-left: 3px double ;border-right: 3px double ; border-color: black; padding: 7px;-moz-border-radius:10px; -webkit-border-radius:10px; -border-radius:10px;"><marquee><img src="http://img37.imagefra.me/img/img37/7/9/23/khrackers/f_uunk1luwoy1m_778dd2c.png"/> <img src="http://i29.servimg.com/u/f29/13/19/76/69/tamash11.png"/> <img src="http://i65.servimg.com/u/f65/15/15/25/88/kdo_ta11.png"> <img src="http://img137.imageshack.us/img137/7786/tamashii.png"> <img src="http://img4.hostingpics.net/pics/385546Tamashii.png"> <img src="http://img13.imageshack.us/img13/6827/tamac.png"></marquee></div></center>
</body>
</html>

Dans la page, on voit bien le center et le div, qui servent à centrer la boite. Les options de celles-ci ayant été développées dans ce tuto (Merci Waya), je n'y reviendrais que sommairement:

border(-left,-right,-top,-bottom): Servent à définir le style de chacune des bordures (ainsi que la taille dans le cas présent). Dans l'ordre: à gauche, à droite, en haut, en bas.
border-color: Sert à définir la couleur des bordures.

/!\REMARQUE: Il est possible de regrouper toutes les informations concernant les border en une seule : border(-left,-right,-top,-bottom): taille style color.

Les différents styles de border que je connais: traits = solid, pointillées: dotted, tirets: dashed, doublée: double;
padding: Sert à faire que l'intérieur ne colle pas sur les bords (très utile lorsque l'on met des arrondis.

/!\REMARQUE: Il est possible de ne pas mettre le même padding partout en se servant des suffixe -left, -right, -top, -bottom.
(-moz,-webkit)-border-radius: Sert comme expliqué dans le tutoriel de notre cher Waya à ajouter des arrondis aux angles. Respectivement, compatibilité sur mozilla firefox (-moz), sur chrome (-webkit) et sur... sur... Je sais plus quel navigateur le dernier :s
Ce dernier s'utilise de la façon suivante: -moz-border-radius: (angle supérieur gauche) (angle supérieur droit) (angle inférieur droit) (angle inférieur gauche).

Les parenthèses sont là pour bien montrer les espaces entre les différentes valeurs.

/!\REMARQUE: Si les valeurs des angles sont identiques, on peut ne mettre qu'une seule valeur.

Pour ceux qui le désirerait, il est possible d'ajouter une image de fond (voir le tutoriel de Waya) ou une couleur avec background-color: #VALEURHEXADECIMALE;

Il reste la balise < marquee> que je n'ai pas expliquée. Elle sert à faire défiler les différentes images. Étant une balise double, elle marche de pair avec < /marquee>

Exemple:

Le texte à faire défiler

/!\REMARQUE: Il est possible de changer le sens de défilement avec l'option direction dans la balise marquee

Exemple:

Ce texte va défiler vers le haut

Code:: <marquee direction="up" height="60">Ce texte va défiler vers le haut</marquee>

Celui ci vers le bas

Code:: <marquee direction="down" height="60">Celui ci vers le bas</marquee>

Celi-ci vers la droite

Code:: <marquee direction="right">Celi-ci vers la droite</marquee>

/!\REMARQUE: Il est bien entendu possible de changer la vitesse de défilement mais là n'est pas le but propre du tutoriel.

Enfin, notre page html est créée. Il ne reste plus qu'à la mettre en place sur le forum où dans notre signature. Pour celà, on utilise la balise iframe

Voici le code de l'exemple du début:

Code:: <center><iframe src="http://testblake.forumactif.com/h3-sign-tama" noresize frameborder="0" width="500px" scrolling="0" height="200"></iframe></center>

Analysons à nouveau les composantes de la balise ensemble:

src: L'adresse où a été hébergée la page. Forumactif fournit celà donc si votre adminette préférée est gentille, demandez lui :p
noresize: Pour ne pas déformer votre page lorsqu'elle sera intégrée.
frameborder: Pour intégré votre page sans lui ajouter un cadre hideux :s en ="0" en ="1" elle sera là
widht: Largeur dans laquelle on intégrera la page.
height: Cette fois-ci c'est la hauteur
scrolling="0": En théorie, c'est pour que l'on ne puisse pas scroll à l'intérieur mais j'ai jamais vu si ça fonctionnait ou pas xD

Voilà, vous savez comment faire cette jolie petite signature codée. J'espère vous avoir aider!
A bientôt pour un nouveau tutoriel!

Pour toutes question ou remarque, postez juste après Very Happy

Je tenterais de répondre à votre demande.

Ce tutoriel étant ma propriété, il est interdit de le copier ou le poster autre part sans mon accord.

Super

40 points chaton