Flash il te dit qu'il était parti dormir parce qu'il doit se lever tôt demain, alors pour une fois que j'étais fatigué j'me suis dit "Ca peut attendre que j'ai une réponse, demain personne ne l'aura pris je pense) et en fait si... Cela dit, au survol ça peut se faire qu'avec du CSS c'est moins intéressant, au pire je posterais une autre version en LS au clic en JS :'3

Et Flash il te dit aussi que tu aurais pu mettre ton nom + l'icône en cours dans le titre du topic Miss Onyx histoire que personne ne vienne voir en espérant que ce soit libre alors que non :3 <3

Mmhh...

Comme ça? : http://forum-test-onyx3.forum-canada.com/h1-signature-de-maddi

Alzu: T'as raison, j'oublie toujours de le mettre dans le titre, sorry >< Et en fait, je me sentais lâche aujourd'hui alors j'ai tout fait en JS même si c'est au survol

Ouii merci beaucoup ! Bien que j'aurais préféré la police de départ qui donne quand même mieux, mais, mercii !

Ahah bah c'est pas grave, le principal c'est que ce soit fait, t'inquiète moi aussi j'oubliais des trucs au début, genre les "up" quand je faisais des relances XD Tu t'y habitueras avec le temps, on m'a aussi reprocher l'icône "en cours" donc bon voilà

Et sinon pour le JS je vois ça, mais du coup ça permet de faire que même si on est pu sur l'onglet survolé il soit encore actif, c'est bien mieux je trouve pour ça :)

Question esthétique, tu aurais aussi pu mettre un truc qui indiqué une suite (genre faire dépasser un bout de sign' et de texte) et permettre le scrolling qu'avec la molette sous Chrome, la scrollbar je la trouve pas belle là XD Enfin c'est que mon avis... *A un soucis avec les scrollbars en ce moment* XD

Tu penseras à mettre l'icône terminé (le crochet vert) quand la demande sera fini Madii et que tu auras le LS (Oui, je le dis à chaque fois maintenant au cas où, y'a tellement d'oublies )

Rebonsoir!

Voilà le LS : https://www.never-utopia.com/t51249-ls-signature-a-onglets

Question esthétique, tu aurais aussi pu mettre un truc qui indiqué une suite (genre faire dépasser un bout de sign' et de texte) et permettre le scrolling qu'avec la molette sous Chrome, la scrollbar je la trouve pas belle là XD Enfin c'est que mon avis... *A un soucis avec les scrollbars en ce moment* XD

Ça me dit rien Comment tu fais ça? Remarque, les mac n'ont pas de roulettes, alors ce serait pas super pour pour eux

Bah tu peux aussi changer son apparence, c'est la mode en ce moment

Et pour faire ça il faut utiliser le pseudo-élement scrollbar qui ne marche pour le moment qu'avec le préfixe -webkit- donc :

::-webkit-scrollbar ^^

Et pour l'enlever bah tu mets le nom de la class où y'a la scrollbar tu ajoutes ça puis "display:none" remarque, tu peux aussi la faire apparaître au survol, ça doit être jouable ^^

M'enfin, c'est ton LS, là je ne fais que t'apprendre un truc, c'est très bien comme ça et c'est Madii qui a commandé pas moi X'D

Donc on fait quoi pour la scrollbar ? Et il y a un petit soucis, dans la partie "MOI" c'est site qui doit apparaître et non NU puisque ce sera un lien vers mon site

Pour la scrollbar, tu peux aussi personnaliser de toi-même avec le LS, j'ai expliqué les bases, le reste ne doit pas être trop trop dur, et au pire n'hésite pas à poster dans les problèmes si tu y arrives pas

Pour le NU, je suppose que ça sers de crédit au forum, tu peux très bien le remplacer par "Site" et changer l'url si tu comptes mettre le crédit ailleurs ou ajouter "Site" à côté

Oui mais je sais vraiment rien faire en codage, est-ce que le code de l'url est déjà mis ? Et pour le crédit, je ne sais pas où ni comment le mettre, mais en tout cas faut pas qu'il soit à cette emplacement, faut que ce soit bien distinguer des autres trucs x)

Salut,

Ok, donc pour le crédit, tu as ceci dans le code :

Code:

<a href="LIEN VERS LE PROFIL" target="_blank">Profil</a>
            <a href="LIEN VERS LES MP" target="_blank">MP</a>
            <a href="http://www.never-utopia.com/" target="_blank">N-U</a>

La dernière ligne, c'est le crédit. Tu as juste à l'enlever. Ensuite, entre le profil et le mp, tu rajoutes le lien pour ton site:

Code:

<a href="LIEN VERS LE SITE" target="_blank">Site</a>

Là où mettre le lien de ton forum est en majuscules, donc j'imagine que tu le retrouveras facilement comme ça ^^

Ok merci je vais essayer, est-ce que je peux avoir le code entier ? xD Et si un jour je veux modifier la police, ça se trouve où ? x)

Bah, le code est dans le LS .-.

Tiens, je te le recopie ici, j'ai même changé déjà le crédit pour être ton site :

LS - Signature à onglets

Voici un petit LS de signature à onglets j'ai fait pour la demande de Madii-x.

Pour voir l'aperçu de l'onglet "Signature" : cliquez ici.
Pour voir l'aperçu de l'onglet "Cadeaux" : cliquez ici.
Pour voir l'aperçu de l'onglet "Moi" : cliquez ici.

Ce LS est en deux parties.

• Tout d'abord, nous allons créer notre signature dans une page html.
  
• Puis, nous allons mettre l'iframe qui contient la page html dans notre signature.

• Puisqu'on se sert d'une page html, il que vous ayez votre propre forum pour héberger la page html ou que votre administrateur accepte de le faire sur son propre forum.
  
  
• Il ne faudrait pas que l'image de l'onglet "signature" dépasse 500x200 pixels.
  
  
• L'image dans l'onglet "moi" a une hauteur de 180 pixels.

Merci de ne pas enlever le crédit vers Never-Utopia.

Pour voir le reste, il va falloir un petit merci ^^

Pour ce qui est de la police, il y a deux manipulations.

1. Dans la partie CSS, il faut trouver partout où il y a la police abel (c'est écrit "font-family: abel") et remplacer le abel par ta nouvelle police.

2. Au tout début du code, tu vas trouver :

Code:

<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />

C'est le lien que j'ai pris de google font et qui met la police Abel sur ta signature. Si tu choisis une autre police de google font, tu n'as qu'à modifier ce lien avec le lien de la nouvelle police ^^

Voilà ~

merci

OK merci, désolée il n'y avait pas tout ça dans le LS ^^' Je viens de faire tout ça, seulement je ne sais pas où il faut mettre l'url de mes images xD Je sais que c'est dans contenu de l'onglet signature, mais où ? =x

Premièrement, il faut trouver le contenu de l'onglet. Dans le premier onglet, c'est là où c'est écrit :

Code:

Contenu de l'onglet "Signature"

J'imagine que tu ne veux pas garder la phrase, donc il suffit de la remplacer par ton image. Pour ce qui est de l'image, il faut la mettre comme ceci :

Code:

<img src="URL DE TON IMAGE" alt=" " />

Edit: Comme la plupart des LS, les codes étaient sous hide, d'où la phrase où je demande un merci pour voir la suite

Je viens de le faire mais rien ne se passe ...

C'est bien ici ? :

Code:

/*Contenu onglet SIGNATURE*/
.inside_1 {
  height: 200px;
}

Je dois mettre le code de l'image où exactement là dedans ? >_<

Erm... Pas du tout XD

Ok, on va décortiquer un peu le code, d'accord?

Premièrement, tout ce qu'il y a entre les balises "head" n'est pas à modifier. C'est ce qui met en forme la signature. Bref, cette partie ne doit pas être modifiée :

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Signature</title>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />
<script type="text/javascript">
        //<!--
                function change_ongletii(name)
                {
document.getElementById('ongletii_'+anc_ongletii)
.className = 'ongletii_0 ongletii';
document.getElementById('ongletii_'+name).
className = 'ongletii_1 ongletii';
document.getElementById('contenu_ongletii_'+anc_ongletii)
.style.display = 'none';
document.getElementById('contenu_ongletii_'+name).
style.display = 'block';
                        anc_ongletii = name;
                }
        //-->
</script>
<style type="text/css">
/*Fond par HTML*/
body {
  margin: 0px;
}

/*Tableau qui entoure la sign*/
.signii {
  border: 1px solid #fe285a;
  width: 502px;
  height: 218px;
}
 
/*Onglets*/
.ongletii {
  background: #fe285a;
  height: 20px;
  font-size: 16px;
  color: white;
  font-family: abel;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid #fe285a;
}
/*Onglet au survol*/
.ongletii_0:hover {
  cursor: pointer;
}
/*Onglet actif*/
.ongletii_1 {
  background: #c8254b;
}
 
/*Contenu des onglets*/
.contenu_ongletii {
  background: url('http://i39.servimg.com/u/f39/18/85/39/07/transi10.jpg');
  display: none;
  font-family: abel;
  color: #fe285a;
  font-size: 14px;
}
 
/*Contenu onglet SIGNATURE*/
.inside_1 {
  height: 200px;
}

/*Contenu onglet CADEAUX*/
.inside_2 {
  overflow: auto;
  height: 200px;
}

/*Contenu onglet MOI*/
.inside_3 {
  padding: 9px;
  padding-right: 0px;
  height: 182px;
}

/*Image dans contenu onglet MOI*/
.imgii {
  float: left;
  height: 180px;
  border: 1px solid #fe285a;
  margin-right: 10px;
}
 
/*Texte dans contenu onglet MOI*/
.textii {
  height: 172px;
  padding-right: 10px;
  text-align: justify;
  overflow: auto;
}

/*Liens dans contenu onglet MOI en bas*/
.linksii a {
  display: inline-block;
  color: #fe285a;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none!important;
  margin-right: 20px;
  margin-bottom: -8px;
}
/*Liens au survol dans contenu onglet MOI en bas*/
.linksii a:hover {
  color: #7a162d;
  font-size: 14px;
}
</style>
</head>

Ensuite, on a la partie entre les balises "body". Ça, c'est le vrai contenu. Cela correspond à ceci:

Code:

<body>
  <table align="center" border="0" cellpadding="0" cellspacing="0" class="signii"><tr>
    <td width="33%">
      <div onmouseover="javascript:change_ongletii('1er');" id="ongletii_1er" class="ongletii_1 ongletii">
        Signature
      </div>
    </td>
    <td width="34%">
      <div onmouseover="javascript:change_ongletii('2eme');" id="ongletii_2eme" class="ongletii_0 ongletii">
        Cadeaux
      </div>
    </td>
    <td width="33%">
      <div onmouseover="javascript:change_ongletii('3eme');" id="ongletii_3eme" class="ongletii_0 ongletii">
        Moi
      </div>
    </td></tr><tr>
    <td colspan="3">
      <div id="contenu_ongletii_1er" class="contenu_ongletii">
        <div align="center" class="inside_1">
          Contenu de l'onglet "Signature"
        </div>
      </div>
      <div id="contenu_ongletii_2eme" class="contenu_ongletii">
        <div align="center" class="inside_2">
          Contenu de l'onglet "Cadeaux"
        </div>
      </div>
      <div id="contenu_ongletii_3eme" class="contenu_ongletii">
        <div class="inside_3">
          <img src="URL DE L'IMAGE DE L'ONGLET MOI" alt=" " class="imgii" />
          <div class="textii">
            Texte de l'onglet moi.
          </div>
          <div align="right" class="linksii">
            <a href="LIEN VERS LE PROFIL" target="_blank">Profil</a>
            <a href="LIEN VERS LE SITE" target="_blank">Site</a>
            <a href="LIEN VERS LES MP" target="_blank">MP</a>
          </div>
        </div>
      </div>
    </td></tr>
  </table>
<script type="text/javascript">
        //<!--
                var anc_ongletii = '1er';
                change_ongletii(anc_ongletii);
        //-->
</script>
</body>
</html>

Dans cette partie là, le début correspond aux onglets en haut qui changent le contenu lorsque tu passes dessus. On y touche pas non plus :

Code:

<td width="33%">
      <div onmouseover="javascript:change_ongletii('1er');" id="ongletii_1er" class="ongletii_1 ongletii">
        Signature
      </div>
    </td>
    <td width="34%">
      <div onmouseover="javascript:change_ongletii('2eme');" id="ongletii_2eme" class="ongletii_0 ongletii">
        Cadeaux
      </div>
    </td>
    <td width="33%">
      <div onmouseover="javascript:change_ongletii('3eme');" id="ongletii_3eme" class="ongletii_0 ongletii">
        Moi
      </div>
    </td></tr>

Ensuite, on a les trois contenu des onglets. Là on va pouvoir faire des modifications :

Code:

<tr>
    <td colspan="3">
      <div id="contenu_ongletii_1er" class="contenu_ongletii">
        <div align="center" class="inside_1">
          CONTENU DE L'ONGLET SIGNATURE
        </div>
      </div>
      <div id="contenu_ongletii_2eme" class="contenu_ongletii">
        <div align="center" class="inside_2">
          CONTENU DE L'ONGLET CADEAU
        </div>
      </div>
      <div id="contenu_ongletii_3eme" class="contenu_ongletii">
        <div class="inside_3">
          <img src="URL DE L'IMAGE DE L'ONGLET MOI" alt=" " class="imgii" />
          <div class="textii">
            TEXTE DE L'ONGLET MOI.
          </div>
          <div align="right" class="linksii">
            <a href="LIEN VERS LE PROFIL" target="_blank">Profil</a>
            <a href="LIEN VERS LE SITE" target="_blank">Site</a>
            <a href="LIEN VERS LES MP" target="_blank">MP</a>
          </div>
        </div>
      </div>
    </td></tr>

Si cela peut t'aider, j'ai mis en majuscules les endroits où tu peux modifier des choses.

Aah merci j'ai trouvé !! =) Par contre ma signa est collée aux titres du haut, y'a t-il moyen de la faire descendre un peu pour qu'elle soit bien centrée ?

Mmhh...

Tu sais, toute la partie "head" dont on a parlé tout à l'heure? On va le remplacer pour ceci:

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Signature</title>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />
<script type="text/javascript">
        //<!--
                function change_ongletii(name)
                {
document.getElementById('ongletii_'+anc_ongletii)
.className = 'ongletii_0 ongletii';
document.getElementById('ongletii_'+name).
className = 'ongletii_1 ongletii';
document.getElementById('contenu_ongletii_'+anc_ongletii)
.style.display = 'none';
document.getElementById('contenu_ongletii_'+name).
style.display = 'block';
                        anc_ongletii = name;
                }
        //-->
</script>
<style type="text/css">
/*Fond par HTML*/
body {
  margin: 0px;
}

/*Tableau qui entoure la sign*/
.signii {
  border: 1px solid #fe285a;
  width: 522px;
  height: 218px;
}
 
/*Onglets*/
.ongletii {
  background: #fe285a;
  height: 20px;
  font-size: 16px;
  color: white;
  font-family: abel;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid #fe285a;
}
/*Onglet au survol*/
.ongletii_0:hover {
  cursor: pointer;
}
/*Onglet actif*/
.ongletii_1 {
  background: #c8254b;
}
 
/*Contenu des onglets*/
.contenu_ongletii {
  background: url('http://i39.servimg.com/u/f39/18/85/39/07/transi10.jpg');
  display: none;
  font-family: abel;
  color: #fe285a;
  font-size: 14px;
  padding: 10px;
}
 
/*Contenu onglet SIGNATURE*/
.inside_1 {
  height: 200px;
}

/*Contenu onglet CADEAUX*/
.inside_2 {
  overflow: auto;
  height: 200px;
}

/*Contenu onglet MOI*/
.inside_3 {
  height: 200px;
}

/*Image dans contenu onglet MOI*/
.imgii {
  float: left;
  height: 198px;
  border: 1px solid #fe285a;
  margin-right: 10px;
}
 
/*Texte dans contenu onglet MOI*/
.textii {
  height: 188px;
  padding-right: 10px;
  text-align: justify;
  overflow: auto;
}

/*Liens dans contenu onglet MOI en bas*/
.linksii a {
  display: inline-block;
  color: #fe285a;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none!important;
  margin-right: 20px;
  margin-bottom: -8px;
}
/*Liens au survol dans contenu onglet MOI en bas*/
.linksii a:hover {
  color: #7a162d;
  font-size: 14px;
}
</style>
</head>

Mais après ça, l'iframe serait peut-être trop petit, alors il faudra peut-être modifier la largeur ou la hauteur de l'iframe ^^

Ca ne va pas car le bloc devient alors plus grand >_< Je voudrais juste centrer la signature. *désolée je suis une chieuse perfectionniste *

Pour l'instant j'ai ceci :


faudrait absolument que ce soit centré, et si possible le texte au milieu au dessus à chaque fois :/

EDIT: c'est bon je crois avoir réussi xD

J'interviens à la place d'Onyx pour lui faire un peu moins de boulot, vu qu'elle a un décalage horaire avec nous et que c'est un truc assez simple, je me permet de le faire à ça place

Il te suffit d'ajouter un margin-top à ta signature, mais il faudra peut-être l'adapter à la taille si tu en as une plus grande à l'avenir ou un texte plus grand ^^
Pour ton image il te suffit d'ajouter

Code:

style="margin-top: 20px";

Entre le "/" et le dernier guillemet (en ajoutant un espace après le guillemet et avant le slash)

Pour le texte, il faut générer des sauts de lignes manuellement vu que contrairement à sur FA on a pas le script qui le fais automatiquement, donc ajoute simplement

Code:

<br />

Après ton texte pour revenir à la ligne ^^

Ah mercii ça marche !! =D Sauf la toute dernière je sais pas pourquoi elle ne veut pas se centrer xD



c'est la seule qui veut pas se mettre correctement, ni le texte oO

voilà le code entier de cette partie :

Code:

<div id="contenu_ongletii_2eme" class="contenu_ongletii">
        <div align="center" class="inside_2">
        Merci Ething!<img src="http://img15.hostingpics.net/pics/527297Ething.png" alt=" "style="margin-top: 5px"; />
          <br />Merci Syel!<img src="http://img15.hostingpics.net/pics/159269Syel.png" alt=" " />
          <br />Merci Hallow'!<img src="http://img15.hostingpics.net/pics/877551halloween.png" alt=" " />
          <br />Merci Bruleciel!<img src="http://img15.hostingpics.net/pics/371330Bruleciel.jpg" alt=" " />
          <br />Merci Chaamallow!<img src="http://img15.hostingpics.net/pics/484495chaamallow.png" alt=" " />
          <br />Merci Ziara!<img src="http://img15.hostingpics.net/pics/871917ziara.png" alt=" " />
        </div>

Le BR doit être mis entre le texte et l'image pas avant le texte

Ah ui voilà, merci !! Bizarre ça fonctionnait quand même avec les autres :o Bref, je pense que tout est OK, demande terminée donc =D Merci encore !