Cherry, come on 8D

Coucou. *-*
Est ce que tu as déjà codé quelque chose ? Ou rien du tout ? o/
Et si tu as codé quelque chose tu pourrais me passer le code ? 8'D

Coucou , désolé j'avais pas vu le sujet //Avion//
Je veux que tu sois au courant , j'ai une partie cours avec Mîm.
Donc j'ai fait un code avec Mîm veut tu que je te le montre ou pas ? sinon , carméliane m'avais filer ce code pour mes fiches equideow , mais jusqu'a pas longtemps j'avais pas compris la moitié du code 8D
Je veux bien te le donner mais j'ai un souci , lorsque je met un code cela beug alors que sur le site ou je fais le code tout est parfait , saurai tu pourquoi ?

Passe moi tes codes. ;3
Pour Equideow, je pense que ça vient du fait que quand tu édit le code, Equideow le modifie tout seul comme un grand. '-' C'est pas génial pour coder. xD

EDIT: J'ai stalké tout tes codes avec Mîm, nihihi. *-*
Alors moi j'ai une technique d'apprentissage tout à fait différente.
Je préfère voir les bases et écrire des pavés (oui tu vas te manger des pavés que tu le veuille ou non. Et tu sais ce qu'est le mieux ? C'est que tu es obligée de les lire. 8D Bonne futur souffrance. :3) et cie. Dis moi ce que tu préfères faire. °° Si tu préfères étudier des codes et aller assez vite ou aller plus doucement mais tout voir et étudier. (Ou un mixte des deux.)

De plus. J'ai vu qu'elle t'avais dit que le margin est la base inférieur. Et bien c'est faux.
Mais je pense que c'était plus une erreur d'inattention de sa part comme vous parliez du padding juste avant. °°'
Enfin brouf. Comme le padding/margin est une notion importante qu'on utilise de partout tout le temps

Petit schéma moche provenant d'un autre cours. c:
Le padding c'est la marge interne & le margin externe.
En gros le padding c'est ce qui décale ce qui est à l'intérieur du bloc comme ton texte ou tes images. Et le margin décale le bloc.

Note que tu peux donner au padding & margin des ordres précis, pour leurs dire sur quel côté appliquer la marge.
padding-top, padding-bottom, padding-left, padding-right
Respectivement, haut, bas, gauche, droite.

J'ai aussi vu que vous aviez vu les tableaux. Donc vous allez assez vite. 8D
Dis moi ce que tu veux revoir, voir, si tu veux que ce cours soit dans la continuité de ce que tu fais ou non. °°'

Ho le méchant equideow ! Il est méchant :'( xD

Hanw tu a osé *w* xs
J'ai hâte de voir ta technique d'apprentissage 8D
Houhou !! génial des pavés !!! Ze t'aime rien que pour tes pavés si jouli a voir ♥ xD
Je préfererai apprendre doucement et tout comprendre , tout étudier .
J'avais compris pour le padding et le margin vu que je suis aller lire les autres cours pour essayer de combler mon manque de savoir et de culture 8D

Oui , on a vu les tableaux et je crois les avoir compris , comme ce qu'on a vu avant :) Par contre , j'aimerai beaucoup apprendre a faire une signature a onglets , donc si tu sais les faire j'aimerai partir dans cette direction , sinon je ne sais pas ^^ //AVION// :ouijesuisd'unegrandeaide:

Voui une des raisons parmi tant d'autres du pourquoijen'aimepascesite d'ailleurs. 8D
Dans ce cas, pour coder je te conseille d'installer NotePad++ qui est super pratique et marche SANS INTERNET. (Jouissance extrême.) Si tu ne veux pas le télécharger crée toi quand même un forum Test pour stocker tes codes & pouvoir suivre les cours plus facilement. :3 (Au passage tu peux faire les deux c'est ce que j'ai fait en tout cas. xD Et si tu télécharges NotePad dis le moi je t'expliquerais très vite comment ça marche même si c'est pas super compliqué. °°')

Oui j'ai du cran.
Contente que tu aimes les pavés alors, comme on se lance sur la voie ardu de la signature à onglet.
Adakor, tant mieux se renseigner par soi même c'est parfois plus fiable. :3
Pour la signature à onglet, c'est assez complexe sans trop l'être en fait. Il y'a aura assez de pavés et on ne pourra pas décortiquer le code en une fois, mais si tu acceptes de suivre mes pavés tout devrait bien se passer. 8'D

Je te propose de décortiquer ce code là qui est une commande et que voilà. c: (Si tu ne l'aimes pas bien sûr je t'en proposerais d'autres. :3)

Avant de se lancer dans les signatures à onglet j'ai quelques petites choses à te dire que tu sais peut-être déjà. 8'D


» Les langages utilisés.
Dans une signature à onglet on utilise trois langages informatiques.

✘ L'HTML, le basique, le simple tu le connais. Ici on l'utilisera pour structurer notre signature et non pour changer son apparence. Je reviendrais sur ce point plus tard.
✘ Le CSS. Tu le connais aussi, tu l'as déjà vu avec Mîm. :3
C'est celui là qui va nous permettre d'ajouter de la couleur, changer la forme, faire si, faire ça.
L'HTML est le squelette, le CSS c'est les cheveux, les vêtements !
✘ Le Javascript. C'est ce qu'il va faire que nos onglets marchent. Fort heureusement, j'ai un code tout prêt parce que je suis bille en JS. °°'

Tu l'auras compris on va utiliser et modifier à notre guise l'html et le CSS ! Le JS on le laisse tranquillement dans son coin faire son job tout seul. :3


» L'HTML & le CSS se rencontrèrent, le class naquit. °°'
Pour utiliser notre CSS & notre HTML ensemble on va utiliser une class.
Alors qu'est ce que c'est et à quoi ça sert ? Commençons par la première question. 8D

Un code en CSS se structure comme ceci:

Code:

.nom{
propriété: valeur;
propriété: valeur;}

Comme tu peux le voir c'est trop cool parce que c'est hyper lisible. °u° Contrairement à l'html. e.e Mais là, tout seul comme ça, le CSS n'est RIEN. D:
D’où la présence de l'html.
Quand tu codais en HTML tu utilisais des div style ?
Et bien, on ne va pas donner un style à la div mais une class.
Ce qui fait:

Code:

<div class="nom">Laliloul.</div>

Comme j'explique assez mal prenons un exemple concret. :3

Code:

<div style="background: #000; width: 500px; height: 150px; border: 4px #fff solid; color: #fff; padding: 5px; text-align: justify;"> Héhé. °u°</div>

Mais tu t'imagines que si on utilisait l'html de cette manière pour coder une PA par exemple, se serait illisible et sûrement bourré de faute ? c:
Donc le class naquit.  

Code:

.bloc{
background: #000;
width: 500px;
height: 150px;
border: 4px #fff;
color; #fff;
padding: 5px;
text-align: justify;}

Code:

<div class="bloc">Héhé °u°</div>

Puiiissaant n'est ce pas ? 8'D
C'est super pratique, utilise le autant que tu peux !
MAIS. Le CSS ne se limite pas à ça. Le CSS est puissant, et dès l’apparition du CSS3, une magnifique invention bénit par tout le monde on peut faire pas mal de chose avec le CSS ou avant, dans la même situation on aurait été obligé de passer par du Javascript.
Le CSS3 c'est quoi ? La rotation d'image par exemple. :3 Mais nous verrons cela plus tard, euheuh.


Dooonc. Si tu as compris mon pavé indigeste je te donne un petit exercice. °^°
Fait moi un bloc de 250 largeur par 100 de longueur. Je veux une scroll, un texte centré blanc avec une ombre portée bleu et un fond noir.
Puis une bordure en pointillé de la couleur que tu le souhaites. Evidemment le tout en CSS et en utilisant les class ! :3 (Fait toi un forum test cay plus pratique.)
Bonneee chance. Si tu ne connais pas les propriétés nécessaires pour faire cet petit exercice dis le moi.

Puis, pour les signatures à onglets, si tu veux, on fait juste ce petit exercice et on s'y met. °u°

J'ai télécharger NotePad++ \o/ Tu pourrai rapidement m'expliquer son fonctionnement ? :) Pour le forum test , je vais m'en faire un ^^ Tu pourrai me passer un lien vers le tiens pour que je vois comment m'organiser ou pas ? Sinon pas grave je me débrouillerai °w°'

Oui,j'ai vu sa xD
Bah oui , vaut mieux aimer les pavés en codage 8D
Oui, on est jamais mieux servi que par soit-meme x)
J'accepte de suivre tes pavés Hô Grande Keylhou-sensei 8'D

Hanw , j'aime ce code °o°

Nan , je connaissait pas le JS °°' (J'adore ton exemple de squelette avec vetements et cheveux x) Mais .. heu .. du coup il a pas de peau ? 8D )

Hanw , le class est encore plus puissant que carmé' et toi réunie 8'D
On peux faire rotationner :ouic'estpasfrançaisetalors: des images ? °w°
J'ai compris le pavé indigeste 8D
J'édite tout a l'heure pour l'exercice :)

EDIT: C'est quoi une scroll ? 8D :inculte:

Alors NotePad rien de super compliqué.
D'ailleurs moi je ne l'exploites pas dans tout sa puissance je m'en sers juste comme réceptacle. °°' (komdanN@ruto)
Tu vas en haut dans Fichier > Nouveau. Ou Ctrl N si t'aimes bien les raccourcis.
Normalement là tu as une page, viiide, blanche. 8D Tu te dis 'Super je vais pouvoir coder ! :3'

ET BIEN NON. Avant de coder il y'a une chose à faire que tu dois tout le temps faire.
C'est mettre ce code:

Code:

<meta http-equiv="Content-Type" content="text/html;charset=utf8" />

Il sert à quuua ? Et bien c'est grâce à lui que quand tu tapes un "é" le 'é' s'affiche bel et bien comme un 'é' et non comme un "Ã" ou un truc bizarre dans le genre. Bref c'est grâce à ce code que tu peux faire des accents sans que ça bug. °°' Donc il est capital.

Enswuite. Une fois que tu as mis ce code tu te dis 'Super je peux coder !'
Et bien re NON.
Avant tu dois dire à ton code que tu vas écrire en CSS, comment ?
C'est très simple.

Code:

<style type="text/css">

.nom{
blabla: valeur;}

</style>

Tu mets ton CSS entre ses deux balises style c'est grâce à elle que tu indiques que ce que tu écris est bel et bien en CSS. :3
Ensuite pour l'html tu le met après la balise style tranquillement.

Et une fois que tu as ça, C'EST BON. 8D
Soo. Pour enregistrer maintenant.
Fait toujours Fichier > Enregistrer sous. Et là tu choisis dans Type 'Hyper Text Markup Language file'. (Qui est HTML non abrévié. c: )

Valà. Et maintenant quand tu cherches ce fichier et que tu doubles clique dessus, une page internet s'ouvre avec ton code. :3
J'utilise NotePad++ parce que c'est plus rapide que Forum Actif, c'est instantané si tu préfères et c'est beaucoup plus stable.

Tu sais maintenant tout ce qui a à savoir sur NotePad. *0*
Donc essayes de me faire l'exercice que je t'avais donné. °°'

Citation :

Fait moi un bloc de 250 largeur par 100 de longueur. Je veux une scroll, un texte centré blanc avec une ombre portée bleu et un fond noir.
Puis une bordure en pointillé de la couleur que tu le souhaites. Evidemment le tout en CSS et en utilisant les class ! :3 (Fait toi un forum test cay plus pratique.)
Bonneee chance. Si tu ne connais pas les propriétés nécessaires pour faire cet petit exercice dis le moi.

Fais le sur NotePad, prévisualise souvent et passe moi le code ici. c:
Une fois que tu as fait ton forum test (parce que tu es obligée d'en avoir un au final. %D

N'hésites surtout pas à me poser des questions, aussi stupides soit elle, ou aussi chiante soit elle aussi, je répondrais à tout. c:

Ahw et j'ajoute un truc si tu n'as pas compris mon histoire NotePad/Forumtest.

Si tu préfères NotePad c'est Photoshop. Tu fais ta création dessus tranquillement. :3
MAIS. Pour la monter aux yeux de tous, tu dois l'héberger ?
C'est pareil avec NotePad. Pour montrer ton code tu dois l'héberger. Nous on va se servir du forum test, comme si on utilisait Hosting Pics ou Noelshack pour une création. c:

Je crois avoir compris mais le forum test je me crée juste un forum et je l'utilise pour stocker mes codes et vérifier qu'ils marchent sur forumactif c'est sa ? :ouijesuislonguealadétente:

Et c'est quoi une scroll :inculte:

Non pas forcément pour vérifier mais pour les héberger. c:
J'ai édité en donnant un exemple plus haut mais tu as posté vite, je savais pas que t'étais co' donc je suppose que tu ne l'as pas vu. 8'D

Un sroll c'est une srollbar, ça scroll ça traverse. Si tu veux quand tu descend une page c'est grâce à un sroll. La barre bleue à ta droite est un scroll. o/
Juste pour savoir tu utilises quel navigateur ?

Ah , nan j'avais pas vu 8D //AVION// Si je suis co' beaucoup de temps x) Et je poste vite 8D //CADDIE//
Par contre pour les "héberger" , j'ai juste a les poster sur forumactif nan ? :ouijesuislonguealadétente:

Ah , c'est bon je vois ce que c'est o/ c'est juste que j'ai toujours appeler sa scrollbar c'est pour sa x)
Mozilla Firerox sous Windows 7 ^^

En gros oui je t'expliquerais comment ça marche dès que tu en auras crée un. o/
Anw d'accord. Je te demande juste ça parce que certains codes marchent sous des navigateurs & d'autre non. En l’occurrence, le forum est uniquement adapté et optimisé pour Chrome et Opera. o/

Comme tu n'as pas l'air d'avoir d'autres questions je te laisse coder ce petit bloc tranquillement. :3
Si tu as des questions n'hésitent pas de même que garde à l'esprit que l'erreur est humaine. o/

Bon je te fais sa tout a l'heure et j'édite ^^ (bon au boulot , je sent que je vais galérer mais d'abord je fais la typo' de l'autre cours xD)

J'y arrive pas , j'ai pas tout compris en faite , surtout pour le class , j'arrive pas a savoir quand y faut le mettre On pourrai pas le faire a 2 please ? juste cet exo' et apres tu m'en donne un autre pour voir si j'ai compris parce que la je suis perdue

Il n'y a pas grand chose à faire, si tu préfères, sans les propriétés ça te donne ça.

Code:

<meta http-equiv="Content-Type" content="text/html;charset=utf8" />
<style type="text/css">

.nom{
blabla: valeur;}

</style>

<div class="nom"></div>

C'est juste ça. :3 Mais j'aimerais savoir ce que tu n'as pas compris exactement ? o:
Pour le reste je te laisse faire. ^^'

Bah , j'arrivais pas a savoir ou fallait mettre le class , enfin l'ordre des choses quoi ^^'
J'édite quand j'ai fini :)

Ah d'accord. :3
En général on le met après le CSS. Mais tu peux le mettre avant aussi, du moment que c'est pas entre les balises style. c:

adakor ^^
Sa donne sa non ? Je ne sais pas comment on met une ombre portée donc y manque sa mais je crois que il y a tout sinon

Code:

<meta http-equiv="Content-Type" content="text/html;charset=utf8" />
<style type="text/css">

.bloc{
background: black;
width: 250px;
height: 100px;
border: 2px dotted white;
overlow: auto;
text-align: center;}

</style>

<div class="nom"></div>

Tu as prévisualisé avec NotePad ? o:
Fail de ma part, mais c'est :

Code:

<div class="bloc"></div>

Tu es sûre d'avoir vraiment compris comment marchait les class ? Tu veux un autre exercice pour être sûre ? o/
Sinon ce n'est pas exactement ce que j'avais demandé m'enfin bon l’essentiel est là.
Pour l'ombre portée c'est:

Code:

text-shadow: 0px 0px 1px #fff;

Comment on prévisualise ? c'est quel bouton ?

Bah , je suis pas sure en faite , je peux en avoir un autre ? (je viens de me rendre compte que je me débrouille mieux en HTML et heureusement 8D )

Ok , merci :)

Si j'écris des pavés c'est pour que tu les lises hein. 8'D

"Soo. Pour enregistrer maintenant.
Fait toujours Fichier > Enregistrer sous. Et là tu choisis dans Type 'Hyper Text Markup Language file'. (Qui est HTML non abrévié. c: )

Valà. Et maintenant quand tu cherches ce fichier et que tu doubles clique dessus, une page internet s'ouvre avec ton code. :3 "

Je l'ai lu mais j'avais pas compris je pensait que sa affichait le code pas ce qu'on a coder , enfin je me comprend , ok j'enregistrerai :) Tu peux me donner un autre exercice ?

Désoléee. D:
Toujours d'actu ?

Toujours x) Malgré le fait que je soit moins présente :)

Comme pour les cours de graphisme ça tient encore ? Jsuis franchement désolée. D: