« Des infos pour coder »

Sujet: Des infos pour coder Mar 15 Déc 2015, 17:14

Coucou, j'ai pas réussi à trouver quelque chose à jour, ou accessible sur CG alors je viens poser ma question ici !

J'aimerais pouvoir réaliser une signature coder comme beaucoup ont ici, avec des onglets !
J'ai pas vue de cours non plus

alors brave gens j'en appel a votre bon coeur !!

Qui serait m'aider? Smile

Sujet: Re: Des infos pour coder Mer 16 Déc 2015, 11:13

Tu as regarder dans les tutos ? Smile

Sinon tu peux passer commande ^^ ( Perso je suis nul en encodage :x )

Sujet: Re: Des infos pour coder Mer 16 Déc 2015, 14:05

le tuto a ce sujet n'est plus accessible pour le rendu
perso quand je me base sur un tuto j'ai besoin de tout avoir ^^

et non c'est un choix je veux pas de commande je veux le faire moi meme ^^

Sujet: Re: Des infos pour coder Mer 16 Déc 2015, 14:30

Je vois ^^ Ben je te souhaite bonne chance ^^

Sujet: Re: Des infos pour coder Mer 16 Déc 2015, 14:45

Déjà, tu as des base en codage ?

Car à partir du moment que tu sais comment faire un cadre, un déroule, mettre une image en fond, changer la police, etc, etc, tu peux utiliser un squelette "type" de signature coder et après en faire ce que tu veux Smile

Car monter le squelette d'une signature comme ça... C'est un peu avancé, j'ai pas réussit. Il faut apprendre le Java et Htlm.
Je m'y connais pas du tout, pourtant je me suis fait un belle signa à onglet moi même Wink

(sur un autre fofo, faut que je face la mienne ici T.T) juste en connaissant les bases Smile

Sujet: Re: Des infos pour coder Mer 16 Déc 2015, 16:29

Tu sais encoder ? :o

Sujet: Re: Des infos pour coder Jeu 17 Déc 2015, 01:10

j'ai aucune base cherry mais apprendre me dérange pas
faut juste que je trouve ou apprendre a le faire et je m'acharne dessus ^^

Tu serais me dire ou trouver un tuto actif pour réaliser une sign à onglet?

Sujet: Re: Des infos pour coder Jeu 17 Déc 2015, 10:02

Déjà, avant de faire la signature, je te propose de regarder ce tuto :

http://www.cocktail-graph.com/t11175-html-les-balises-de-base

Qui est super, vraiment j'ai appris mes bases avec ce tuto et c'est top. Avec ça, tu va apprendre à faire de jolie cadre pour les texte, organiser tes texte en tableau, faire de beau titre. T'es pas obliger de le faire en même temps, mais le lire et comprendre comme ça marche et les balises de base, mettre une image en background, et la différence entre "div" et "span", c'est pratique et essentiel pour ensuite personnalisé ta créa Smile

Aussi, je pense que aucun des deux tuto explique comment mettre les typo que toi tu veux... Cette info est là :
http://www.cocktail-graph.com/t4446-police-personnalisee-avec-google-web-fonts

Ensuite, n'hésite pas à lire les tuto de Sweety :
- http://www.cocktail-graph.com/t10958-codage-pour-les-nuls-n1
- http://www.cocktail-graph.com/t11484-le-codage-pour-les-nuls-2

Enfin, voilà un petit tuto pour faire des "translation" c'est à dire un fondu quand tu passe d'un onglet à l'autre :
http://www.cocktail-graph.com/t10224-sign-codeetranslation

Pour être sur que tu as tout en main, (genre elle explique les scroolbar par exemple)
A partir de là, tu pourra personnaliser ta signature.

Pour la signature en elle même, déjà il te faut un forum teste pour pouvoir "héberger" ton code. En effet, le codage du signature à onglet étant très grosse, tu peux pas le mettre directement dans ta signe. Il faudra utiliser un "inframe" mais ça on verra quand tu aura fini ta signature Smile

Si tu sais pas comment faire dit le moi.

Bon, je vais déjà poster ça pour que tu avance, je te prépare un autre poste avec ma signature onglet et son codage pour partir comme exemple, et je décrire toutes les étapes du codage, comme ça tu n'aurais plus qu'à le prendre et remplacer les trucs pour les mettre à ton gout ^^

Sujet: Re: Des infos pour coder Jeu 17 Déc 2015, 10:36

Donc voilà ce que j'ai réussit à faire (toute seule!) avec mon niveau de base, c'est pas mal hein ? (C'est un signature pour un personnage RP... Alors chut sur le contenue xD)

Et voilà le code qui va avec :

Code:: <html>
  <head>

   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
   <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,800italic|Abel|La+Belle+Aurore|Mr+De+Haviland|Norican|Kaushan+Script|Satisfy|Kalam|Italianno' rel='stylesheet' type='text/css'>
   <link href='http://fonts.googleapis.com/css?family=Merienda+One|Covered+By+Your+Grace|Shadows+Into+Light+Two|Kalam' rel='stylesheet' type='text/css'>

   <script type="text/javascript">
   //

   </script>

  <head>

   <style type="text/css">

a {
  color: #ff3333;
  text-decoration: none;
}

a:hover {
  color: #ff6666;
  text-decoration: none;
}

.onglet,
.onglet_0 {display:inline-block;
   margin: 0px 5px -4px 10px;
   font-family: 'Satisfy', cursive;
   font-size : 5pts;
   height : auto;
   width : 100px;
   text-align: center;
   background-image: url(http://www.aht.li/2705490/fond_-_2.jpg);
   color: #990000;
   border-radius: 10px;
   border-left : #990000 3px solid;
   border-right : #990000 3px solid;
   border-top : #990000 3px solid;
   padding : 3px;
   -webkit-transition: 300ms;
   -moz-transition: 300ms;
   transition: 300ms;

   }

.onglet_1{
background: #990000 ;
font-size: 8pts;
color: #ffffcc;
-webkit-transition: 2s;
   -moz-transition: 2s;
transition: 2s;

   }

.contenu_onglet{display:none;
  background-image : url(http://www.aht.li/2705496/PassengerHP9_7.jpg);
   height : 200px;
   width : 600px;
   overflow : auto;
   color: #cc0066;
   position: relative;
   font-family: georgia;
   border-left : #990000 2px dotted;
  border-bottom : #990000 4px solid;
  border-right : #990000 2px dotted;
  border-top : #990000 4px solid;
  box-shadow : 0 0 10px #990000;
  font-family : 'Abel', sans-serif;
   padding : 10px;
   }

.cadre { border-radius: 10px;
   border : 1px solid #990000;
   background-image: url(http://www.aht.li/2705490/fond_-_2.jpg);
   width: 450px;
   height: 170px;
   float: right;
   text-align: justify;
   padding: 10px;
   font-family : 'Abel', sans-serif;
   color : #990000;
   overflow : auto;
   border-radius : 20px 20px 20px 20px;
   font-family : 'Abel', sans serif;

}

.contact {border: 1px solid #990000;
   background-image: url(http://www.aht.li/2705490/fond_-_2.jpg);
   border-radius: 70px 70px 70px 70px;
   box-shadow : 0px 0px 10px #990000;
   padding: 10px;
   text-align : center;
   color: #cc0000;
   width : 50px;
   height : 50px;
  font-family: 'Kalam', cursive;
   font-size : 10pts;
   float : left;
}

   </style>

</head>

<body>

<div class="onglets">
<center>
   <span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Ayme</span>
   <span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Équipe</span>
   <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">Moi</span>
   </center>

</div>

<center>
<div class="contenu_onglet" id="contenu_onglet_1er">
<br/>

<div style = " border-bottom : 2px dotted #cc0066; width : 500px; padding : 20 px;">
   <img src = "http://nsm05.casimages.com/img/2012/07/08//1207081128155543310074958.jpg"/>
   <br/><br/>


   « Détourner l’attention.<br/>
   Si tu te souviens de cela, jamais tu ne te feras attraper. »<br/>

   <div style = "font-family: 'Merienda One', cursive; ">
   <font size ="4pts">
   Arséne Lupin.<br/>
   </font>
   <br/>
   </div>
   </div>
<br/>

<span style ="font-family : 'Satisfy',cursive; color : #990000; text-shadow : 0px 0px 10px #ffffcc;">
<font size ="10pts">
∼ RP ∼
   </font>
</span><br/>

<div style = " border-bottom : 2px dotted #cc0066; width : 500px; padding : 20 px;">
   RP normaux : 3 en cours <br/>
   Events : 0 en cours <br/>
   Missions : 0 en cours <br/>
   Épreuves : 0 en cours <br/>
   Matchs : 0 en cours <br/>

   <br/>
</div>

<br/>

<span style ="font-family : 'Satisfy',cursive; color : #cc0000">
<font size ="10pts">
<a href="http://erasia-rpg.forum-actif.net/t2002-ayme-s-tale">∼ Fiche Personnage ∼</a>
   </font>
</span>
   </div>

   <div class="contenu_onglet" id="contenu_onglet_2eme">
   <br/>
   <span style ="font-family : 'Satisfy',cursive; color : #990000; text-shadow : 0px 0px 10px #ffffcc;">
   <font size ="10pts">
   ∼ Nox ∼
   </font>
   </span>
   <br/>
<div style = " border-bottom : 2px dotted #cc0066; width : 500px; padding : 20 px;">
<img src = "http://nsm05.casimages.com/img/2012/08/29//1208291143585543310260252.jpg"/>
   <br/><br/>
Niveau : 15<br/>
Genre : Mâle<br/>
Type : Normal<br/>
Race : Évoli<br/>
   <br/><br/>
   </div>

   <br/>

</div>

<div class="contenu_onglet" id="contenu_onglet_3eme">

<div style="float:left; width 150;">
<img src="http://www.aht.li/2705494/Cerise.png"/><br/>
<div class="contact">
<font size = "6,5pts"><a href="http://erasia-rpg.forum-actif.net/privmsg?mode=post&u=560 ('popup.html')">MP</a>
</font>
</div>
</div>

<div class="cadre"><br/>
<span style ="font-family : 'Satisfy',cursive; color : #990000; text-shadow : 0px 0px 10px #ffffcc; text-align: center;">
<font size ="6pts">
∼ Grapheuse ∼
</font>
   </span>
<img src ="http://nsm08.casimages.com/img/2015/07/21//1507210643255543313460046.gif"/> <br/>

<div style = " border-bottom : 2px dotted #cc0066; width : 430px; padding : 20 px;">
Grapheuse officelle du forum, n'hésitez pas à visiter ma galerie et à laisser un petit commentaire !
<img src = "http://nsm08.casimages.com/img/2015/07/21//1507210641475543313460044.gif"/><br/>
Vous pouvez passer des commandes pour un kit ou autre directement en postant sur ma galerie ou via MP.
<img src = "http://nsm08.casimages.com/img/2015/07/21//1507210641485543313460045.gif"/><br/>
<br/>

<span style ="font-family : 'Satisfy',cursive; color : #cc0000; text-shadow : 0px 0px 10px #ffffcc; text-align: center;">
<font size ="4pts">
<a href = "http://erasia-rpg.forum-actif.net/f72-coin-des-artistes ('popup.html')">∼∼ Ma galerie</a>
</font>
</span><br/><br/>

</div>
</div>
</div>

</center>

<script type="text/javascript">
   //
</script>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------------------

Alors alors,

Ce code ce divise en deux partie.
La partie "Javascripte" et la partie "HTLM".
La partie "Javascripte", c'est le "head" et il est diviser en deux. Premiére partie qu'il ne faut PAS TOUCHER xD (je sais pas du tout comment ça marche, mais en gros c'est ce qui fait que tu peux avoir une signature à onglet ^^")

C'est cette partie là :

Code:: <html>
  <head>

   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
   <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,800italic|Abel|La+Belle+Aurore|Mr+De+Haviland|Norican|Kaushan+Script|Satisfy|Kalam|Italianno' rel='stylesheet' type='text/css'>
   <link href='http://fonts.googleapis.com/css?family=Merienda+One|Covered+By+Your+Grace|Shadows+Into+Light+Two|Kalam' rel='stylesheet' type='text/css'>

   <script type="text/javascript">
   //
   </script>

J'ai juste rajouter les deux "link href" pour pouvoir avoir les polices que je veux. Il te suffit donc de remplacer ces link par les tiens pour avoir tes polices.

Ensuit y a la partie "Style" du java, qui fait toujours partie partie du "Head", en gros, on reste dans la préparation du codage :

Code:: <head>

   <style type="text/css">

a {
  color: #ff3333;
  text-decoration: none;
}

a:hover {
  color: #ff6666;
  text-decoration: none;
}

.onglet,
.onglet_0 {display:inline-block;
   margin: 0px 5px -4px 10px;
   font-family: 'Satisfy', cursive;
   font-size : 5pts;
   height : auto;
   width : 100px;
   text-align: center;
   background-image: url(http://www.aht.li/2705490/fond_-_2.jpg);
   color: #990000;
   border-radius: 10px;
   border-left : #990000 3px solid;
   border-right : #990000 3px solid;
   border-top : #990000 3px solid;
   padding : 3px;
   -webkit-transition: 300ms;
   -moz-transition: 300ms;
   transition: 300ms;

   }

.onglet_1{
background: #990000 ;
font-size: 8pts;
color: #ffffcc;
-webkit-transition: 2s;
   -moz-transition: 2s;
transition: 2s;

   }

.contenu_onglet{display:none;
  background-image : url(http://www.aht.li/2705496/PassengerHP9_7.jpg);
   height : 200px;
   width : 600px;
   overflow : auto;
   color: #cc0066;
   position: relative;
   font-family: georgia;
   border-left : #990000 2px dotted;
  border-bottom : #990000 4px solid;
  border-right : #990000 2px dotted;
  border-top : #990000 4px solid;
  box-shadow : 0 0 10px #990000;
  font-family : 'Abel', sans-serif;
   padding : 10px;
   }

.cadre { border-radius: 10px;
   border : 1px solid #990000;
   background-image: url(http://www.aht.li/2705490/fond_-_2.jpg);
   width: 450px;
   height: 170px;
   float: right;
   text-align: justify;
   padding: 10px;
   font-family : 'Abel', sans-serif;
   color : #990000;
   overflow : auto;
   border-radius : 20px 20px 20px 20px;
   font-family : 'Abel', sans serif;

}

.contact {border: 1px solid #990000;
   background-image: url(http://www.aht.li/2705490/fond_-_2.jpg);
   border-radius: 70px 70px 70px 70px;
   box-shadow : 0px 0px 10px #990000;
   padding: 10px;
   text-align : center;
   color: #cc0000;
   width : 50px;
   height : 50px;
  font-family: 'Kalam', cursive;
   font-size : 10pts;
   float : left;
}

   </style>

</head>

Cette partie est très pratique. On va un peu la décomposer.
En fait, tu vas pouvoir faire des "classe", tu sais quand tu copie/colle un codage sur CG et qu'il y a "classe demande siganture"? Bah c'est ça, ça évite de retaper le code à chaque fois. ^^
Y en a des obligatoire et des non obligatoire

Alors je t'avoue que les "a" du début... je sais plus pourquoi ils sont là TT En tripoullant un peu tu pourra surement trouver.

Obligatoire :
"Onglet 1" : c'est la tête qu'aura ton onglet (juste l'onglet, pas le cadre relier) quand il est INACTIF, c'est à dire que tu n'es pas dessus.
"Onglet 0" c'est le contraire, c'est la gueule de ton onglet quand il aura ton curseur dessus.
"Contenu onglet" : c'est la tête qu'aura la "page relier à ton onglet", je sais pas si je suis claire xD

Non obligatoire :
"Cadre" : J'ai préferai le faire pour aléger mon codage, c'est le cadre qu'il y a dans l'onglet "Moi"avec grapheuse et tout écrit dedans.
"Contacte" : Pareil, dans l'onglet "Moi", c'est le petit cercle "MP"

Voilà, maintenant on passe à la création de la signature o/
C'est la partie "Body", logique non ? x)

Alors alors alors, on commence par le nom des onglet :

Code:: <body>

<div class="onglets">
<center>
   <span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Ayme</span>
   <span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Équipe</span>
   <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">Moi</span>
   </center>

Donc c'est simple, à la place de "Ayme", "Equipe", "Moi" du change comme ce que tu veux.
Si tu veux plus de trois onglet, tu rajoute un ligne (copier/coller hein) et tu change "3eme" par "4eme" partout, simple non ? xD

Les nome "1er", "2eme"etc... tu peux les changer aussi, mais après faudra changer d'autre truc (pour que le contenu soit lié à l'onglet) donc je conseil de garder comme ça, c'est plus simple...

Et après on passe au contenue :D
je te met le détail que tu premier, les autres c'est pareil et t'as le codage complet en haut de toute façon Smile

Code:: <div class="contenu_onglet" id="contenu_onglet_1er">
<br/>

<div style = " border-bottom : 2px dotted #cc0066; width : 500px; padding : 20 px;">
   <img src = "http://nsm05.casimages.com/img/2012/07/08//1207081128155543310074958.jpg"/>
   <br/><br/>


   « Détourner l’attention.<br/>
   Si tu te souviens de cela, jamais tu ne te feras attraper. »<br/>

   <div style = "font-family: 'Merienda One', cursive; ">
   <font size ="4pts">
   Arséne Lupin.<br/>
   </font>
   <br/>
   </div>
   </div>

Donc ici, avec le "div class="contenu_onglet" id="contenu_onglet_1er"" tu comprends l'importance de garder "1er" et tout, c'est le fait d'avoir le même nom qui lie l'onglet à son contenu.

Et là tu rempli comme tu veux :D Vraiment ^^

Et si tu as rajouter un 4éme onglet, bah tu rajoute une partie contenu et tu change le "1er" par 4éme Smile

Et après tu fini avec du javascritp (ouais je sais toujours pas ce que ça fait mais c'est essentiel TT)

Code:: <script type="text/javascript">
   //
</script>

Tu ferme tout, et voilà le travail ! :D

Si t'as des questions n'hésite pas, je suis pas un pro mais j'essayerai de répondre ^^"
Sorry du double poste aussi, mais c'était plus simple comme ça :x

Sujet: Re: Des infos pour coder Jeu 17 Déc 2015, 11:09

wouaaa je te remercie pour tout cherry, j'avais deja suivi les tutos de sweety car j'ai réaliser ma galerie sur CG avec un code ^^

J'ai deja le forum test (ancien fofo que j'avais) et j'y avais deja fais l'essai pour ma galerie justement ^^
ta signature rends tres bien !

je vais voir sa dans la journée car au levée du lit hum c'est pas encore trop frais XD !!

1000merci♥♥

Sujet: Re: Des infos pour coder Jeu 17 Déc 2015, 11:24

De rien, c'est avec plaisir ^^ Et bonne chance surtout !!

Le codage pour moi c'est en mode !

"PUTAIN DE BORDEL DE /censur/ POURQUOI CA MARCHE PAS !!!!"

...

"Bordel j'avais oublier un guillemet ... TUER MOI " xD En tout cas moi ça me prend la tête ^^

Sujet: Re: Des infos pour coder Lun 21 Déc 2015, 13:54

Hey,

Des nouvelles par ici ?

Sujet: Re: Des infos pour coder Jeu 24 Déc 2015, 23:47

oups oui, j'apprends actuellement le html
donc j'aurais sans doute d'autre question a venir !

Sujet: Re: Des infos pour coder Lun 18 Jan 2016, 18:31

Up ? :3

Sujet: Re: Des infos pour coder Mar 23 Fév 2016, 17:55

J'archive. (Cherry tu devrais passer codeuse et faire un tuto avec ce que tu as mis ici Des infos pour coder 876370059

)

Sujet: Re: Des infos pour coder

» Quelqu'un pour coder des catégories et QEEL ? :o
» Soucis pour coder ma galerie : miniature d'image avec image en grand au passage de la souris
» signa'coder comment couper
» Inscriptions et infos
» [Pub pour les futures étoiles] Un petit truc en plus pour promouvoir la team !

« Des infos pour coder »

Des infos pour coder

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Recherche avancée

Page 1 sur 1