-
Signature codée
Après une demande, voilà un tuto pour faire une signature en css et html à mettre sur les forum.
/! Vérifiez que le forum accepte que les membres utilisent le html.
C'est joli, certes, mais comment on fait ça? Pour les EklaBloger, nous avons la chance de pouvoir créer une page html et de l'héberger directement:
"Contenu => Gérer les fichier => Nouveau fichier" et nommez le "signature.html"
/! Javascript activé!
Pour les autres, sortez votre bloc note, notepad, ou un quelconque autre logiciel d'édition de texte. N'oubliez pas d'enregistrer en .html
Nous allons créer une page html de A à Z voici donc la structure de base:<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
CONTENU JS
</script>
<style type="text/css">
CONTENU CSS
</style>
</head>
<body>
CONTENU HTML
</body>
</html>
On va commencer par le javascript
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet)
.className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).
className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet)
.style.display = 'none';
document.getElementById('contenu_onglet_'+name).
style.display = 'block';
anc_onglet = name;
}
//--> </script>
<style type="text/css">
CONTENU CSS
</style>
</head>
<body>
CONTENU HTML
</body>
</html>
Et on ne touche à rien!
Ensuite, CSS:<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet)
.className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).
className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet)
.style.display = 'none';
document.getElementById('contenu_onglet_'+name).
style.display = 'block';
anc_onglet = name;
}
//-->
</script>
<style type="text/css">
.onglet,
.onglet_0 {display:inline-block;
PROPRIETE: VALEUR; }.contenu_onglet{display:none;
height : Xpx; /* HAUTEUR */
width : Xpx; /*LARGEUR*/
overflow : auto;
PROPRIETE: VALEUR;
}</style>
</head>
<body>
CONTENU HTML
</body>
</html>
Modifiez ce qui est en rouge pour personnaliser votre signature.
Enfin, le HTML:<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet)
.className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).
className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet)
.style.display = 'none';
document.getElementById('contenu_onglet_'+name).
style.display = 'block';
anc_onglet = name;
}
//-->
</script>
<style type="text/css">.onglet,
.onglet_0 {display:inline-block;
PROPRIETE: VALEUR; }.contenu_onglet{display:none;
height : Xpx; /* HAUTEUR */
width : Xpx; /*LARGEUR*/
overflow : auto;
PROPRIETE: VALEUR;}</style>
</head>
<body>
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">ONGLET 1</span>
<span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">ONGLET 2</span>
<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">ONGLET 3</span>
</div><div class="contenu_onglet" id="contenu_onglet_1er">
CONTENU DU 1ER ONGLET
</div><div class="contenu_onglet" id="contenu_onglet_2eme">
CONTENU DU 2EME ONGLET
</div><div class="contenu_onglet" id="contenu_onglet_3eme">
CONTENU DU 3EME ONGLET
</div><script type="text/javascript">
//<!--
var anc_onglet = '1er';
change_onglet(anc_onglet);
//-->
</script></body>
</html>
Modifiez "ONGLET 1" "ONGLET 2" et "ONGLET 3" par les titre de vos onglet. Si vous voulez rajouter des onglet, il suffit de rajouter cette ligne:
<span class="onglet_0 onglet" id="onglet_4eme" onmouseover="javascript:change_onglet('4eme');">ONGLET 4</span>sous
<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">ONGLET 3</span>et cette ligne
<div class="contenu_onglet" id="contenu_onglet_4eme">
CONTENU DU 4EME ONGLET
</div>sous
<div class="contenu_onglet" id="contenu_onglet_3eme">
CONTENU DU 3EME ONGLET
</div>Si c'est votre 5eme onglet, remplacez 4 par 5 etc...
Tout à la fin du code, il y a un petit passage de js en plus qui nous permet d'afficher la signature. "1er" indique que l'onglet visible par défaut est le premier. Si vous voulez qu'on voit d'abord le 2eme onglet, remplacez "1er" par "2eme"
C'est bien beau tout ça, mais comme j'y met en signature? Au moyen d'une iframe ;)
Enregister votre signature et hébergez là et récupérez l'adresse. Collez l'adresse dans ce code, puis mettez le dans votre signature:<iframe style="width: LARGEURpx; height: HAUTEURpx; display: block; margin-left: auto; margin-right: auto;" src="URL" frameborder="no" scrolling="no" width="320" height="240"></iframe>
Tags : onglet, contenu, html, text, div
-
Commentaires
:mode.incrustation.on: Moi pas aujourd'hui en tout cas, pas le temps, peut-être dans une semaine xD . :mode.incrustation.off:
C'est super *ç* Enfin ! On va savoir comment font les grands pros avec leur signature codée *s'incline* Merci Déesse du Codage %D
Nagalia, tu l'as déjà utilisé sur un forum ? Ce qui m'intrigue c'est l'intégration du javascript. Un peu dangereux pour un forum.
14Odd Dellarobia
Samedi 23 Juin 2012 à 17:23
Moi ça marche pas ! :'( J'ai mis tout ce que tu as mis en modifiants les données en rouge mais bizzarement ça me mets TON résulat !! Regarde >>
http://data0.eklablog.net/code-lyoko-blog/perso/signature.html
Tu peux m'aidez stp ?
15Odd Dellarobia
Samedi 23 Juin 2012 à 18:29
ok voilà mon (trés long) 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet)
.className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).
className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet)
.style.display = 'none';
document.getElementById('contenu_onglet_'+name).
style.display = 'block';
anc_onglet = name;
}
//--> </script>
<style type="text/css">
<style type="text/css">
.onglet,
.onglet_0 {display:inline-block;
border-radius; }
.contenu_onglet{display:none;
height : 550px; /* HAUTEUR */
width : 250px; /*LARGEUR*/
overflow : auto;
border-radius: 10px;
10px;
10px;
}
</style>
</style>
</head>
<body>
<body>
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Moi</span>
<span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Ma Signature</span>
<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">Mon Avatar</span>
</div>
<div class="contenu_onglet" id="contenu_onglet_1er">
Bonjour ! Moi c'est Tauron Adanedhel !
Je suis obligé de parcourir Alona pour trouvé l'antidote qui guérirras mon pére.
Nos guérrisseurs ne peuvent rien contre cette maladie inconnue. Je dois sauvé mon pére !
Je ne sais pas exactement où chercher mais, ce qui est sur, c'est que je trouverais
la potion, et tout rentras dans l'ordre !
Je suis un elfe de sang pure voyons ! ^^
</div>
<div class="contenu_onglet" id="contenu_onglet_2eme">
http://data0.ek.la/the-world-of-mangas-graph/perso/signature%20alona.png
</div>
<div class="contenu_onglet" id="contenu_onglet_3eme">
http://data0.ek.la/the-world-of-mangas-graph/perso/avatar%20alona%20avec%20couleur%20fond%20forum.jpg
</div>
<script type="text/javascript">
//<!--
var anc_onglet = '1er';
change_onglet(anc_onglet);
//-->
</script>
</body>
</body></html>16Odd Dellarobia
Samedi 23 Juin 2012 à 19:5217Odd Dellarobia
Dimanche 24 Juin 2012 à 10:38
j'ai changé ce que tu m'as dit pour le <img source="......"
Mais et d'une ça n'as rien changer et de deux j'ai pas compris ta phrase à propos du "fond CSS" ? ^^'
19Odd Dellarobia
Dimanche 24 Juin 2012 à 12:02
J'ai utilisé le doc text, html, de "gérer les fichiers" sur mon blog ! (eklablog quoi ^^)
Et la propriété background, euh...bah j'ai copier la partie CSS que Nagalia à mis donc je sais pas ! --"
20Odd Dellarobia
Dimanche 24 Juin 2012 à 12:24
Supprime ce que j'ai mis en rouge dans ton code:
<script type="text/javascript">
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet)
.className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).
className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet)
.style.display = 'none';
document.getElementById('contenu_onglet_'+name).
style.display = 'block';
anc_onglet = name;
}
//--> </script>
<style type="text/css">
<style type="text/css">
.onglet,
.onglet_0 {display:inline-block;
border-radius; }
.contenu_onglet{display:none;
height : 550px; /* HAUTEUR */
width : 250px; /*LARGEUR*/
overflow : auto;
border-radius: 10px;
10px;
10px;
}
</style>
</style>
22Odd Dellarobia
Dimanche 24 Juin 2012 à 12:41
Normalement, après avoir enlevé ça, le contenu aparait au survol des onglets... Enfin, c'est juste le <script type="text/javascript"> en trop qui faisait buger, mais le reste était inutile ;)
Bon, colle tout ce code a la place du tien:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet)
.className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).
className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet)
.style.display = 'none';
document.getElementById('contenu_onglet_'+name).
style.display = 'block';
anc_onglet = name;
}
//--> </script>
<style type="text/css">
.onglet,
.onglet_0 {display:inline-block;
border-radius; }
.contenu_onglet{display:none;
height : 550px; /* HAUTEUR */
width : 250px; /*LARGEUR*/
overflow : auto;
border-radius: 10px;
10px;
10px;
}
</style>
</head>
<body>
<body>
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Moi</span>
<span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Ma Signature</span>
<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">Mon Avatar</span>
</div>
<div class="contenu_onglet" id="contenu_onglet_1er">
Bonjour ! Moi c'est Tauron Adanedhel !
Je suis obligé de parcourir Alona pour trouvé l'antidote qui guérirras mon pére.
Nos guérrisseurs ne peuvent rien contre cette maladie inconnue. Je dois sauvé mon pére !
Je ne sais pas exactement où chercher mais, ce qui est sur, c'est que je trouverais
la potion, et tout rentras dans l'ordre !
Je suis un elfe de sang pure voyons ! ^^
</div>
<div class="contenu_onglet" id="contenu_onglet_2eme">
http://data0.ek.la/the-world-of-mangas-graph/perso/signature%20alona.png
</div>
<div class="contenu_onglet" id="contenu_onglet_3eme">
</div>
<script type="text/javascript">
//<!--
var anc_onglet = '1er';
change_onglet(anc_onglet);
//-->
</script>
</body>
</body></html>
24Odd Dellarobia
Dimanche 24 Juin 2012 à 13:24
Désolé, je suis bête ^^'
Il faut que le javascript sois activé sur ton blog. Fais en la demande au staff d'EklaBlog26Odd Dellarobia
Dimanche 24 Juin 2012 à 16:54
Javascript = activé sur mon compte !! Alors je suis fichu !! *pleure avec des larmes d'elfes*
Là, j'avoue que je comprend pas...
-Supprime ton code actuel
-Enregistre
-Colle le code du com's 21
-Enregistre
-Ouvre ton fichier28Odd Dellarobia
Dimanche 24 Juin 2012 à 19:05
ok je test...................................non toujours pas ! Attend je vais tester sur mon deuxiéme blog (ce serais un miracle si ça marche^^)
Si ça remarche pas, tu peux me donner la perm sur un de tes blog ? (je VEUX comprendre ce qui marche pas -.-)
30Odd Dellarobia
Dimanche 24 Juin 2012 à 19:09
ça marche presque !!! regarde ce que ça me donne et dit moi ce qu'il faut que je fasse >
http://ekladata.com/MPi-85bpmSe9sytAzOJKzFtkNI0/signature.html! Je suis à tes ordres Nagalia, elfes noirs pure souche ! X'd
31Odd Dellarobia
Dimanche 24 Juin 2012 à 19:3632MiYoi
Mardi 26 Juin 2012 à 09:23
Hello ~ ô/
Je suis totallement perdu ._. même en lisant les autres com's ou t'as aider j'ai toujours pas comprit xDD
J'ai même essayé avec ton code mais sa marche pas *-* a chaque fois sa fait " Le code CSS comporte une erreur, merci de le corriger avant d'enregistrer " '-'
J'ai peut-être pas activer Java' x']
En tout cas,merci pour le code :3 et desolée du derangement ~ \o/
33MiYoi
Mardi 26 Juin 2012 à 12:5534MiYoi
Mercredi 27 Juin 2012 à 18:47
J'ai essayé et sa me donne sa >> http://data0.eklablog.com/brookol-universe/perso/brookol%20universe.htlm c'est bon ? :P
36MiYoi
Mercredi 27 Juin 2012 à 18:5238MiYoi
Mercredi 27 Juin 2012 à 19:02
X3
heu....sa marche mais je me suis gourré complet : http://data0.eklablog.com/brookol-universe/perso/brookol%20universe.html x'DD
Voilà j'ai un probleme quand je mets un lien vers un autre site (en format target ="_blank") ca me met ca: http://data0.eklablog.com/LinkinPark.com hellllp
Merci, mais le résulats se trouve où ? Parce-que j'ai mit le code et tout, mais je sais pas où il est, eet j'aimerais bien le mettre à l'accueil pour ma présentation :/ Donc, si j'ai bien compris, il faut crée un nouveau fichier (sur le blog, comme la dit Nagalia)mais, est-ce qu'il faut mettre le code CCS DANS le CCS (Apparence>..etc) ou pas ?
Si quelqu'un pouvait m'éclairer, merci d'avance :D
Tu dois creer un fichier texte sur ton blog (Contenu>gerer les fichiers>nouveau document (txt, html...)) que tu appelle "Signature.html"
Aprés tu mets tout les codes dans le document et tu enregistre !
Ensuite tu ouvre le document et c'est faits !
OkOk, dons après, quand on l'ouvre, on récupère le lien, et on le met dans l'article, c'est ça ?
Désolée, les codes assez long, c'est pas mon fort <.<
Edit : J'ai mit le code de Nagalia (Sa signature) et sa ne marche pas, sa me met :
http://data0.eklablog.com/leslegendairesshimyjadina/perso/signature.html
C'est normal ?
Et aussi, est-ce que quelqu'un connaîtrer un hébergeur ?
Merci
Tu as pas besoin d'hébérger vu que tu l'hébérge dés le départ dans les fichiers de ton blog ! Pour ce qui est du code de Nagalia, il marche ! Je vois sa signature dans le lien que tu ma passé ! N'hésite a poser d'autres questions, même si moi, j'ai pas tout compris ! ^^
Oui j'ai encore une petite questions xD :
Tu utilise quel navigateur?
Et, après, on prend le lien, et on le met dans un article ?
Euh...pourquoi tu me demande mon navigateur ?? J'ai Google Chrome !
Aprés je crois que tu doit prendre le lien et le mettre dans "insertion/edition d'un objet multimédia" ou un truc dans le genre !
elle te demande ton navigateur car sur certains navigateurs le html ou le css ne fonctionne pas (du moins il ne se voit pas) alors si par exemple si tu es sur explorer tu ne vois ni le css ni le html
53didi130606
Dimanche 15 Juillet 2012 à 12:58
g jamais reussi a mettre un code mais bon moi quand je publie sa met le code bref... g internet explorer pourtant je les vois mes html
54Odd déconnectDimanche 15 Juillet 2012 à 13:30Internet Explorer ne reconnais pas le CSS ! Et il ne faut pas mettre ça dans un article ! Il faut que tu fasse "contenu" "Gerer les fichiers" et là tu creer un nouveau doc txt, html ! Aprés tu mets tes codes et tu clique sur enregistrer ! Tu ouvre et tu regarde si c'est bon ! (Désolé de pas mettre connecté mais j'ai la flemme ! u_u)
Tu as le javascript activé?
EDIT pour Odd: IE reconnais le CSS (encore heureux!) mais pour beaucoup de propriétés (genre les ombres, les arrondis...) ne fonctionne pas si on les écrit de la même façon que pour les autres navigateur ;)
56didi130606
Dimanche 15 Juillet 2012 à 18:1357Odd déconnectDimanche 15 Juillet 2012 à 18:55Tu peux le faire activer si tu veux ! Tu as juste a envoyer un mail à EklaBlog ! (@Nagalia: Oui heureusement que IE reconnait le css sinon ce serais vraiment galère ! XD Mais oui tu a raison, il reconnait mais n'affiche pas certains codes ! Moi j'ai pas ce problème vu que j'utilise Fiefox, Chrome et Safri ! u_u )
58didi130606
Dimanche 15 Juillet 2012 à 20:0160MiYoi
Dimanche 15 Juillet 2012 à 20:34
Traduction de son com' :
Je suis revenu désolée j'tétait parti mangé ^^ bah c'est pas grave je vais demander a quelqu'un de me le mettre ^^
....
Sur ceux a tte ! 8D
Merci Serenaetenza ! ^^ Donc maintenant que j'ai cmpris ton comm didi, je peux te dire que seule les Staffs d'eklablog peuvent te l'activer ! Personne d'autre peut le faire !
62didi130606
Dimanche 15 Juillet 2012 à 22:12
ba comme g dit je demande mais la je vais pas le mettre sa ^^' je voulais dire quand g un code en general je demande
Ah ok !! ^^" Sinon tu sais, le javascript ne sert pas qu'à faire des signatures codées ! Mais là c'est l'objet du tuto donc je vais pas m'étendre là dessus !
64didi13-06Dimanche 15 Juillet 2012 à 23:5465didi13-06Dimanche 15 Juillet 2012 à 23:5566EnkaraLundi 16 Juillet 2012 à 22:44Bonjour,
Tout d'abord, merci pour ce super tuto :) Cette signature est éxactement ce que je recherchait et tes explications m'ont permis de faire quelques progres dans le langages Htlm and co.
Je voulais juste poser une petite question :
Dans le 3eme onglet, celui intitulé "Moi", j'aimerai savoir s'il est possible de diminuer la largeur de l'encadré de droite avec tout le blabla et si oui comment ?
Encore merci :)
Enkara
67EnkaraMardi 17 Juillet 2012 à 11:53Je viens de m'y replonger ce matin et a tête reposée j'ai vite trouvé ce qu'il fallait modifier :)
Encore merci pour cette signature.
69maba
Mercredi 25 Juillet 2012 à 10:59
J'adore ce genre de signature *w*, la première fois que je l'ai vue, elle était portée par ma graphiste adorée *w*
ouais.... tant pis
en tout cas merci bc pour tes tutos GIMP ils sont géniaux!!!! grace a toi g fait ça: http://artistic.eklablog.com/-g69447
77Akiba
Dimanche 16 Décembre 2012 à 14:01tout d'abord merci Nagalia pour cette signature codée j'ai réussis parfaitement à la codé modofier et rajouté des onglets merci mais j'aimerais savoir ne sait pas comment on pourrais modifier le design comme ceci http://img15.hostingpics.net/pics/321442Signacod.jpg
78Mihoki non connectéDimanche 30 Décembre 2012 à 18:20Bonjour, je voulais savoir comment intétgrée ma signature que j'ai faite dans un forum (message d'acceuil) en sachant que c'est en .html je ne sais pas comment l'intégré :/.
Je ne sais pas si ça pourras servir mais voici le lien :
http://ekladata.com/hat2sqlmExndxNdJts3m_U4m630/acceuilforum.html
Et merci beaucoup pour le tuto' c'est la 1ère fois que je me lance dans un truc pareil :)
Merci d'avance.
PS : Le forum a été fait sur Xooit
79Mihoki non connectéDimanche 30 Décembre 2012 à 18:55Ah désolé du dérangement, je suis vraiment bête, je n'avais pas vu l'iframe !!
Argh --'
Sinon merci infiniment j'ai réussi je suis super contente :D
Et merci surtout du partage !
Désolé du dérangement, c'est encore moi...
Bref je ne sais pas pourquoi l'onglet "Customisation" ne s'affiche pas !
Att' je te passe le lien > http://ekladata.com/pullip-attitude.ek.la/perso/amypresentation.html
Je te passe aussi ma partie HTML (je pense que le problème doit être dedans)
</style>
</head>
<body>
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Photos</span>
<span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Presentation</span>
<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">Customisations</span>
</div>
<div class="contenu_onglet" id="contenu_onglet_1er">
<div style="width: 600px; height: 800px; overflow-x: auto; overflow-y: auto;"><marquee scrollamount=7 ><p> </p><p style="text-align: center;">
<img src="http://ekladata.com/UqQd9NNwazoTkEuaVST4yaVDHXI/mod-article45888902-4f8ae40cc30df.jpg"> En mode "Stock"
<img src="http://ekladata.com/pullip-attitude.ek.la/perso/8013017017_291127be86.jpg"> Avec sa premiere wig "non stock" qui est aussi sa wig actuelle.</p></marquee><br></br></div>
</div>
<div class="contenu_onglet" id="contenu_onglet_2eme">
<div style="width: 600px; height: 800px; overflow-x: auto; overflow-y: auto;"><p><p style="text-align: center;"><strong>Prénom: </strong>Amy<strong><br /></strong></p>
<p style="text-align: center;"><strong>Age: </strong>16 ans<strong></strong></p>
<p style="text-align: center;"><strong>Surnom: </strong>Amimi<strong><br /></strong></p>
<p style="text-align: center;"><strong>Model: </strong>Prunella</p>
<p style="text-align: center;"><strong>Anniversaire</strong> 10/03/2012 (Le jour où je l'ai reçus)</p>
<p style="text-align: center;"><strong>Marraîne: </strong>Alex<strong>,</strong>Milari-Pullip, Kimmie, Kiwako et Délice</p>
<p style="text-align: center;"><strong>Caractère:</strong> Souvent heureuse, gentille mais des fois elle fait la snobe et un peu coquine ;3<strong><br /></strong></p>
<p style="text-align: center;"><strong>Aime: </strong>Le shopping (Come Azu' ;)), Le style de Mélow-chan et les filles qui ont du goût (à son goût xD) <strong><br /></strong></p>
<p style="text-align: center;"><strong>Déteste: </strong>Faire de gros efforts, les gens immatures...<strong><br /></strong></p>
<p style="text-align: center;"><strong> </strong></p>
</div>
<div class="contenu_onglet" id="contenu_onglet_3eme">
<p style="text-align: center;">Les customisations d'Amy :</p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"><span style="text-decoration: underline; color: #99cc00;"><strong>En ce moment... : </strong></span></p>
<p style="text-align: center;">-Obistu SBH White 27cm S</p>
<p style="text-align: center;">--Wig de Jolie doll " Styler Pullip Aubrun "</p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"><span style="text-decoration: underline; color: #ff0000;"><strong>A venir :</strong></span></p>
<p style="text-align: center;"><span style="color: #000000;">Rien</span></p>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = '1er';
change_onglet(anc_onglet);
//-->
</script>
</body>
</html>
Je ne sais pas si quelqu'un pourras faire quelque chose mais merci d'avance :D
Moi je n'ai rien qui s'affiche.
VOici mon 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet)
.className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).
className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet)
.style.display = 'none';
document.getElementById('contenu_onglet_'+name).
style.display = 'block';
anc_onglet = name;
}
//--> </script>
<style type="text/css">
.onglet,
.onglet_0 {display:inline-block;
width: 150px;
background: #999999;
margin:auto;
margin-bottom: -1px;
padding:3px;
border:1px solid black;
border-top: 4px solid black;
border-radius: 10px 10px 0 0;
font-family : jack the ripper;
letter-spacing: 3px;
text-align: center;
-webkit-transition: 300ms;
-moz-transition: 300ms;
transition: 300ms;
}
.onglet:hover {background: #797979
}
.contenu_onglet{display:none;
height : 300px; /* HAUTEUR */
width : 500px; /*LARGEUR*/
overflow : auto;
font-size : 14px ;
background: #999999;
border-radius : 20px;
border: 1px solid #000000;
border-left: 6px solid black;
border-right: 6px solid black;
box-shadow: 0 0 10px black, inset 0 0 10px black;
padding: 10px;
display:none;
height : 200px;
width : 600px;
overflow : auto;
color: #000000;
text-shadow : 1px 1px 0px black;
}
.cadre { border-radius: 10px;
background: rgba(0, 0, 0, 0.3);
width: 400px;
height: 187px;
float: right;
text-align: left;
padding: 5px;
box-shadow: 0 0 10px #797979, inset 0 0 5px black;
overflow : auto;
}
</style>
</head>
<body>
<body>
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Jack the ripper</span>
<span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Moi</span>
<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">Kit "THE RIPPER"</span>
</div>
<div class="contenu_onglet" id="contenu_onglet_1er">
Littéralement "Jack l'éventreur" est un tueur en série de Londres au XIXème siècle.
On n'a jamais connu ça réelle identité.Il tua cinq prostitués du quartier de
Whitechapel en 1888.
Il commis trois meurtres dans des lieux publics,un dans une rue et le dernier
dans un immeuble.
Ses victimes étaient d'abord égorgés ,puis il leur ouvra le ventre et en extraiya
certains de leur organes(en l'ocurance intestins, reins, utérus et parfois les seins).
Bref il est pas très connu mais il était super dangereux
</div>
<div class="contenu_onglet" id="contenu_onglet_2eme">
Je suis une fille qui est polyglotte(mais ça tout le monde s'en fout).
J'aidore écrire ,lire ,grapher...Bref j'ai beaucoup de passion mais tout
le monde s'en fout aussi.Sinon je suis nulle en français ,pas très fortiche
en maths mais qui adore tout ce qui est science.Bon assez parler de moi.
Bonne visite de mon blog.
</div>
<div class="contenu_onglet" id="contenu_onglet_3eme">
<iframe style="width: 150px; height: 200px; display: block; margin-left: auto; margin-right: auto;" src="http://www.4shared.com/photo/vdDYcfZF/avatar.html" frameborder="no" scrolling="no" width="320" height="240"></iframe>
<iframe style="width: 450px; height:150px; display: block; margin-left: auto; margin-right: auto;" src="http://dc615.4shared.com/img/Xd8L08FC/s7/0.6060967056747929/signa.jpg" frameborder="no" scrolling="no" width="320" height="240"></iframe>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = '1er';
change_onglet(anc_onglet);
//-->
</script>
</body>
</body></html>
82InvitéeVendredi 25 Janvier 2013 à 21:12Bonjour,
ESt ce que je peux utiliser la version déjà prête mais je l'a modifie juste s'il vous plait ?
Je ne code pas donc je sais pas faire...
Bonjour! J'aimerais savoir comment héberger mon fichier .html pour le mettre sur mon forum. Je ne trouve pas de site. Merci d'avance =)
89tipo12
Samedi 9 Mars 2013 à 14:14Bonjour/Bonsoir!
Je suis un peu nulle, du coup je n'ai pas compris comment faire après avoir enregistré le document en .html Les hébergeurs d'images n'acceptent pas ce format. Vu que j'ai un compte eklablog, j'ai essayé de télécharger le fichier avec les documents mais ça ne marche pas non plus. je voudrais mettre la signature sur mon forum.
90tipo12
Samedi 9 Mars 2013 à 14:1991KikzouMardi 2 Avril 2013 à 20:48Je sais que c'est une question idiote mais je ne comprends pas trop comment on met dans sa signature dans un foruù
92KikzouMardi 2 Avril 2013 à 20:51
Bah c'est simple, tu mets en signature avec le code de Nagalia ;)
<iframe style="width: LARGEUR DE TA SIGNATUREpx; height: HAUTEUR DE TA SIGNATUREpx; display: block; margin-left: auto; margin-right: auto;" src="URL DE TON FICHIER .HTML" frameborder="no" scrolling="no" width="320" height="240"></iframe>94Etoile du Léopard
Mercredi 5 Juin 2013 à 14:1195Iku-
Lundi 1er Juillet 2013 à 14:26
Bonjour pour commencer merci pour ton aide Nagalia , et aussi serait-tu comment faire pour enlever le petite espace qu'il y'a entre les onglets ? ^^
96maba
Lundi 1er Juillet 2013 à 14:30
@Misa: dans le css de l'onglet:
.onglet,
.onglet_0 {display:inline-block;
margin-left: Xpx;
margin-right: Xpx;
PROPRIETE: VALEUR; }Modifie les marges à gauche et à droite pour modifier l'écartement des onglets. Tu peux mettre des nombres négatifs.
@maba: Ça va venir ;)
98maba
Lundi 1er Juillet 2013 à 18:08
Ben je ne saurais pas trop quoi apprendre ^^'
Il vaut mieux que tu ai une idée de ce que tu veux faire, d'essayer, et si ça ne marche pas, poser des questions ;)
100Iku-
Lundi 1er Juillet 2013 à 19:52102Mizuru
Dimanche 7 Juillet 2013 à 23:27
Un truc que j'arriverai jamais à faire quoi xDD
Moi grande flemmarde à apprendre des trucs, nouvelles et paumée sur Ekla... Celle qui ne comprend plus rien...
Pourquoi je suis Mizuru ? J'aurais dut me surnommer " LA paumée " XDXD
103Mizuru
Dimanche 7 Juillet 2013 à 23:30
Je vais tout de même tenter même si je ne comprend rien, que je sais que ça va tout de suite ne pas marcher...
Et que je sais que...
Je vais très VITE abandonner 8D8D xD
105GarsJeudi 1er Août 2013 à 22:35106Etoile du Léopard
Samedi 3 Août 2013 à 12:54J'ai un problème, 'jai vraiment du mal pour la personnalisation ! Il me reste lus qu'a faire la "forme de ma signature", mettre les couleurs ect... mais franchement je galère, quelqu'un pourrait m'aider ?
107Etoile du Léopard
Samedi 3 Août 2013 à 17:33
- J'ai fais "un croquis" de ce que j'aimerai faire, je ne sais pas si c'est possible...
- Si c'est pas possible, tout simplement ça :
Je sais déjà ce que je vais metre dedans, (le contenue est sur le premier article/Rubrique de mon blog)
Sinon voici ce que j'ai fais :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet)
.className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).
className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet)
.style.display = 'none';
document.getElementById('contenu_onglet_'+name).
style.display = 'block';
anc_onglet = name;
}
//-->
</script>
<style type="text/css">
.onglet,
.onglet_0 {display:inline-block;
PROPRIETE: VALEUR; }
.contenu_onglet{display:none;
height : 35px; /* HAUTEUR */
width : 50px; /*LARGEUR*/
overflow : auto;
PROPRIETE: VALEUR;
}
</style>
</head>
<body>
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Welcome</span>
<span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Partenaria</span>
<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">ONGLET 3</span>
</div>
<div class="contenu_onglet" id="contenu_onglet_1er">
CONTENU DU 1ER ONGLET BLABLABLABLABLABLABLABKA
</div>
<div class="contenu_onglet" id="contenu_onglet_2eme">
CONTENU DU 2EME ONGLET CACACA PROUT PIPI
</div>
<div class="contenu_onglet" id="contenu_onglet_3eme">
<iframe style="width: LARGEURpx; height: HAUTEURpx; display: block; margin-left: auto; margin-right: auto;" src="http://image.noelshack.com/fichiers/2013/31/1375526491-tatata.png" frameborder="no" scrolling="no" width="320" height="240"></iframe>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = '1er';
change_onglet(anc_onglet);
//-->
</script>
</body>
</html>108Etoile du Léopard
Samedi 3 Août 2013 à 19:52
Pour les CSS j'avoue que je galère, pour les HTML je me débrouille mais bon... ça m'énnerve rapidement.
Ouai mais j'aurai aimé le faire moi même ! ^^
Bonsoir ,ça ne fonctionne pas pour moi D:
Voici mon code :
<iframe style="width: 600px; height: 200px; display: block; margin-left: auto; margin-right: auto;" src="http://ekladata.com/jewelnana.ek.la/perso/Sans-nom-1.html" frameborder="no" scrolling="no" width="320" height="240"></iframe>
Aurait-tu une solution pliz T.T
Du moment que tu peux utiliser le javascript, c'est bon ;) Tu peux réutiliser cette technique pour faire une fiche de présentation sur ton blog par exemple.
Bonjour ^^
J'ai fait un blog sur elkablog mais je ne trouve pas l'adresse après l'avoir hébergé :s
Merci ^^ Mais maintenant j'ai un autre problème xD Le code ne marche pas et le HTML, javascript et le reste est ativé :
- <iframe style="width: 500px; height: 200px; display: block; margin-left:auto; margin-right: auto;" src="http://ekladata.com/hDbB0__tYNaxMmfYoPa4kEBn3LM/signature.html" frameborder="no" scrolling="no" width="320" height="240"></iframe>
Lorsque je clique pour accéder à ta signature, je ne vois que ceci :
<script type="text/javascript"> <script type="text/javascript"> // </script> <script type="text/javascript"> // </script>Signature ♥ Cadeau ♥ Autre ♥<script type="text/javascript"> // </script>
Je pense que tu n'as pas bien suivi le tuto' pour créer cette signature ! As-tu bien rempli le sections ? Je veux dire, les parties "HTML", "CSS", et "Javascript" ? Envoie-moi le code de ta signature par MP :)126Lisy NilaVendredi 21 Novembre 2014 à 09:52Il y a quelqu'un?
Je voudrais savoir si c'est possible d'utiliser ce code dans une signature de "forumactif"... Et si oui, comment fait-on?
Help please.128P'tite AbyLundi 19 Octobre 2015 à 16:53Merci pour ce tuto, il est super bien fait *-*
par contre, comme le demande Lisy Nila, j'aurais aimé savoir si ça marchait sur un forum du groupe forumactif ^^
et, si on peut héberger la page en html, est-ce qu'il faut héberger la partie en JavaScript autre part ou ça marche en la laissant dans le doc html?
Merci d'avance ^^
~Une Serdaigle~
Pour l'utiliser sur forumactif, il faut que l'administrateur autorise ses membres à mettre du html dans les articles / signatures. Je ne sais pas comment ça fonctionne sur les autres plateforme, donc renseigne toi auprès de l'admin.
Tel que le tuto est écrit, le JS et le CSS se trouvent dans la page HTML, tu n'as donc qu'un seul fichier à enregistrer.
Coucou ! ^^
J'ai essayé une signature codée avec ton tuto (j'ai même réussi, c'était plutôt pas mal #fierté) et j'ai deux question :
1- Comment faire pour passer d'un contenu à un autre en cliquant sur l'onglet au lieu de le survoler ? (j'espère que je suis assez claire, en gros, Je suis sur la signature et je veux passer aux kits en cliquant sur l'onglet "kits" et pas en le survolant)
2- Quand je suis sur un contenu (prenons par exemple celui de la signature) comment faire pour que l'onglet concerné (donc celui ou il y a marqué "signature") soit d'une couleur plus, par exemple? (Mais il reste clair tant que je suis sur le contenu de la signature, et par exemple, si je vais sur le contenu des anciens kits, l'onglet "signature" redeviens foncé et l'onglet "anciens kit" devient clair).
Merci d'avance ! :)
EDIT : J'ai trouvé pour ma première question, mais je reste toujours bloquée pour la 2e :)
Merci pour ce tuto très clair et bien expliqué ! :)
Je suis plutôt contente de mon résultat:
Suivre le flux RSS des commentaires
Ajouter un commentaire
-
Graphisme
Codage
Communauté
Libre Service
Aide
-
Créer mon blog 
My Gosh . *0* Super ce tuto' & en plus j'avais besoin d'une signature codée :D . [[ Nagalia serait un ange tombée du Ciel ? :0 ]]
Merci en tout cas !! ^-^ . #LullaBby