Commande signature codée

Coucou, je viens faire une demande de signature codée, en effet, ma sign de vient vachement vachement longue --"

* Nature de la création*
dimensions : Hum, aucune idée, disons, que je n'ai pas envie qu'on doive scroler pour la voir en entier.
couleurs : Les couleurs du forum, j'aimerais qu'elle soit accordée au forum temps qu'à faire ;)
images :
Signature :

Spoiler:

Dernière :

Spoiler:

Favorite :

Spoiler:

Cadeau (là, par contre, il faut un scroll ^^) :

Spoiler:

Autre :

Spoiler:

texte :
Donc, d'abord, chacun des texte du dessus changerait l'image de la signature. Un peu comme une nouvelle page mais dans la signature. C'est un peu difficile à expliquer... Si c'est pas compréhensible, il faut le dire --"
Ensuite, le texte du bas, mènerait simplement à la partie cours. Voilà :)
Par contre, j'ai oublié sur le schéma une partie. Sur le dessus, encore une nouvelle page "autre"

* Précisions diverses*
Haha, c'est maintenant qu'on rigole.

Voici un schéma de ma signature :

Spoiler:

Merci d'avance à celui qui essaiera :)

*et si c'est pas possible de faire ce genre de commande, dites-le tout de suite ^^*

Héhé ah c'est faisable oui ;)

ça risque d'être un peu long si c'est moi qui le fait, mais je vais voir avec Thal' :)

Voilà ce que ça donnerait :

Spoiler:

Sachant que je me heurte à un souci d'affichage du défilement sur Firefox (normalement sur IE tout déroule bien) pour les cadeaux : j'ai été demander un coup de main sur SoP, j'espère qu'ils sauront m'aider.

Cela correspond à peu près à ce que tu espérait?

C'est exactement ce que je voulais!
C'est fantastique *.*
A part à un micro détail, est-ce que ce serait possible de remonter un tout petit peu le "prendre des cours". Parce qu'il est vraiment au bord ^^
Si ce n'est pas possible, ce n'est rien, c'est vraiment chouette *.*
Je suis super contente *.*
Merci beaucoup Ameya!

C'est modifié :)

Voilà le code à mettre dans le champs signature :

Code:: <iframe name="sign hanako" src="http://graph-labyrinthe.forumgratuit.org/h7-signature-hanako" scrolling="no" height="270px" width="570px" align="center" frameborder="0" ></iframe>

Je pourrais aussi avoir le code complet, pour pouvoir modifier les images ? :)

Oui c'est mieux hein ^^

le voilà :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/js_onglet.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Signature hanako</title>

<style>
/**** Structure de l'en-tête ****/

#body{
background-image:url('http://img843.imageshack.us/img843/1903/basefond.jpg');
width:550px;
height:250px;
}

#en_tete{
background-image:url('http://img843.imageshack.us/img843/1903/basefond.jpg');
width:550px;
height:250px;
color:#5C4F32;
font-size:12 px;
font-family: Verdana;
font-variant: small-caps;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}
margin:auto;
}

#en_tete tr{
vertical-align:top;
}

#en_tete img{
border:0;
}

span.onglet{
float:left;
}

span.onglet:hover{
cursor:pointer;
text-shadow: #423118 1px 1px 1px;
}

#en_tete .bloc_texte{
position:absolute;
background-color:none; !important;
margin-top:5px;
width:520px;
margin-left:10px;
left:10px;
}

/** Onglet 1 **/

#en_tete #onglet1{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet1 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

/** Onglet 2 **/

#en_tete #onglet2{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet2 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

/** Onglet 3 **/

#en_tete #onglet3{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet3 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

/** Onglet 4 **/

#en_tete #onglet4{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet4 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

/** Onglet 5 **/

#en_tete #onglet5{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet5 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

table#sign{
width:550px;
margin:auto;
}

table#sign td#case_haut{
height:10px;
padding:4px;
text-align:center;
color:#5C4F32;
}

table#sign td#case_milieu{
height:185px;
width:500px;
background-position:top center;
}

table#sign td#case_bas{
height:25px;
padding:4px;
text-align:center;
color:#5C4F32;
}

table#sign td#case_haut a, table#sign td#case_bas a{
text-decoration:none;
color:#5C4F32;
font-size:14px;
font-family: Verdana;
font-variant:small-caps;
font-weight:bold;
}

table#sign td#case_haut a:hover, table#sign td#case_bas a:hover{
cursor:pointer;
text-shadow: #423118 1px 1px 1px;
}

</style>
</head>

<body><div id="en_tete">

<span class="onglet"></span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 50px;">Signature</div></div>
<div class="bloc_texte" id="onglet1">
<div class="contenu">
<p><img src="http://i40.servimg.com/u/f40/16/20/07/39/light310.png"></p>
</div>
</div>
</span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 30px;">Cadeaux</div></div>
<div class="bloc_texte" id="onglet2">
<div class="contenu">
   <p><marquee direction="up" scrollamount="2" loop="infinite" style="text-align:center; height:150px; padding: 5px;" behavior="scroll"><img src="http://img4.hostingpics.net/pics/530384hanako10.jpg"><br> <img src="http://img205.imageshack.us/img205/2060/cadeauanako.png"><br> <img src="http://img4.hostingpics.net/pics/401233hanako11.png"><br> <img src="http://img4.hostingpics.net/pics/343457754128BanYesJoyeuxNoel.jpg"><br></marquee></p>
   </div>
</div>
</span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 30px;">Favorite</div></div>
<div class="bloc_texte" id="onglet3">
<div class="contenu">
<p><img src="http://img4.hostingpics.net/pics/348401dont10.png"></p>
</div>
</div>
</span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 30px;">Derniere</div></div>
<div class="bloc_texte" id="onglet4">
<div class="contenu">
<p><img src="http://i40.servimg.com/u/f40/16/20/07/39/light310.png"></p>
</div>
</div>
</span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 30px;">Autre</div></div>
<div class="bloc_texte" id="onglet5">
<div class="contenu">
<img src="http://img15.hostingpics.net/pics/271621hanako.png">
   <p><img src="http://i44.servimg.com/u/f44/16/14/35/37/userba11.jpg">
   <img src="http://img11.hostingpics.net/pics/221548userbarguidetoshop.jpg"></p>
</div>
</div>
</span>

<table id="sign" cellpadding="0" cellspacing="0">
<tr>
<td id="case_haut"></td>
</tr>
<tr>
<td id="case_milieu"></td>
</tr>
<tr>
<td id="case_bas"><a href="http://graph-labyrinthe.forumgratuit.org/f51-les-ateliers-de-l-initiation" target="_blank">Prendre des Cours</a>
</td>
</tr>
</table>

</div>

</body>

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/js_onglet.js"></script>
</head>
</html>

Tu penses t'en sortir tel quel pour le modifier à souhait, ou tu as besoin de précisions pour savoir quoi changer?

Pour info, j'ai à chaque fois redimensionné à 180 de haut max et 470 de large max...

Merci, c'est parfait :)
Pour modifier, je n'ai pas de problèmes, vu que c'est juste les images :p
Par contre... pour le mettre en lien comme tu as fait ...? Ça je sais pas désolé --"

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/js_onglet.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Signature hanako</title>

<style>
/**** Structure de l'en-tête ****/

#body{
background-image:url('http://img843.imageshack.us/img843/1903/basefond.jpg');
width:550px;
height:250px;
}

#en_tete{
background-image:url('http://img843.imageshack.us/img843/1903/basefond.jpg');
width:550px;
height:250px;
color:#5C4F32;
font-size:12 px;
font-family: Verdana;
font-variant: small-caps;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}
margin:auto;
}

#en_tete tr{
vertical-align:top;
}

#en_tete img{
border:0;
}

span.onglet{
float:left;
}

span.onglet:hover{
cursor:pointer;
text-shadow: #423118 1px 1px 1px;
}

#en_tete .bloc_texte{
position:absolute;
background-color:none; !important;
margin-top:5px;
width:520px;
margin-left:10px;
left:10px;
}

/** Onglet 1 **/

#en_tete #onglet1{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet1 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

/** Onglet 2 **/

#en_tete #onglet2{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet2 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

/** Onglet 3 **/

#en_tete #onglet3{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet3 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

/** Onglet 4 **/

#en_tete #onglet4{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet4 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

/** Onglet 5 **/

#en_tete #onglet5{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet5 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

table#sign{
width:550px;
margin:auto;
}

table#sign td#case_haut{
height:10px;
padding:4px;
text-align:center;
color:#5C4F32;
}

table#sign td#case_milieu{
height:185px;
width:500px;
background-position:top center;
}

table#sign td#case_bas{
height:25px;
padding:4px;
text-align:center;
color:#5C4F32;
}

table#sign td#case_haut a, table#sign td#case_bas a{
text-decoration:none;
color:#5C4F32;
font-size:14px;
font-family: Verdana;
font-variant:small-caps;
font-weight:bold;
}

table#sign td#case_haut a:hover, table#sign td#case_bas a:hover{
cursor:pointer;
text-shadow: #423118 1px 1px 1px;
}

</style>
</head>

<body><div id="en_tete">

<span class="onglet"></span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 50px;">Signature</div></div>
<div class="bloc_texte" id="onglet1">
<div class="contenu">
<p><img src="http://i40.servimg.com/u/f40/16/20/07/39/angel10.png"></p>
</div>
</div>
</span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 30px;">Cadeaux</div></div>
<div class="bloc_texte" id="onglet2">
<div class="contenu">
<p><marquee direction="up" scrollamount="2" loop="infinite" style="text-align:center; height:150px; padding: 5px;" behavior="scroll"><img src="http://img4.hostingpics.net/pics/530384hanako10.jpg"><br> <img src="http://img205.imageshack.us/img205/2060/cadeauanako.png"><br> <img src="http://img4.hostingpics.net/pics/401233hanako11.png"><br> <img src="http://img4.hostingpics.net/pics/343457754128BanYesJoyeuxNoel.jpg"><br></marquee></p>
</div>
</div>
</span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 30px;">Favorite</div></div>
<div class="bloc_texte" id="onglet3">
<div class="contenu">
<p><img src="http://img4.hostingpics.net/pics/348401dont10.png"></p>
</div>
</div>
</span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 30px;">Derniere</div></div>
<div class="bloc_texte" id="onglet4">
<div class="contenu">
<p><img src="http://i40.servimg.com/u/f40/16/20/07/39/shinob10.png"></p>
</div>
</div>
</span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 30px;">Autre</div></div>
<div class="bloc_texte" id="onglet5">
<div class="contenu">
<img src="http://img15.hostingpics.net/pics/271621hanako.png">
<p><img src="http://i44.servimg.com/u/f44/16/14/35/37/userba11.jpg">
<img src="http://img11.hostingpics.net/pics/221548userbarguidetoshop.jpg"></p>
</div>
</div>
</span>

<table id="sign" cellpadding="0" cellspacing="0">
<tr>
<td id="case_haut"></td>
</tr>
<tr>
<td id="case_milieu"></td>
</tr>
<tr>
<td id="case_bas"><a href="http://graph-labyrinthe.forumgratuit.org/f51-les-ateliers-de-l-initiation" target="_blank">Prendre des Cours</a>
</td>
</tr>
</table>

</div>

</body>

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/js_onglet.js"></script>
</head>
</html>

Pour le moment j'ai hébergé le code complet sur le forum (direct dans mes pages html du panneau d'admin) parce que c'est le plus simple. J'ai donc une page html qui est réservée pour ta sign, dont le lien est le suivant : https://graph-labyrinthe.forumgratuit.org/h7-signature-hanako . C'est ce lien que j'ai placé dans une iframe.

Donc, une fois ta sign modifiée, soit tu me passe le code et je change dans mon panneau d'admin, soit tu l'héberge toi même, et dans ce cas tu rempli ton iframe ainsi :

Code:: <iframe name="sign hanako" src="lien_de_ta_page_html" scrolling="no" height="270px" width="570px" align="center" frameborder="0" ></iframe>

Est-ce plus clair? (c'est pas ce que je gère le mieux, l'hébergement, hein^^)

Impec, merci, j'ai réussi à l'herber moi-même :)
(C'est mieux, pour pouvoir modifier la "dernière" plus souvent ^^)

Merci beaucoup pour ce travail

Cool, je suis contente d'avoir réussi (c'était mode challenge, j'avais jamais fait si complexe^^)

Contente que ça te plaise :)

» Commande de logo
» SIGNATURE
» [Mort Sûre] Commande de bannière blog
» Commande de thème pour Bite Me If You Can
» Demande de signature

Commande signature codée

Commande signature codée

Sujets similaires

Sujets similaires