avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1827
Designer
Voir le profil de l'utilisateur
# Classe de Susanad [FERMÉ]le Mer 17 Oct 2018 - 0:42
classe de Susanad


Hey hey @Susanad welcome à toi dans cette classe, nouvel elève mignon que tu es  

Aloooors, comme ça on veut apprendre les bases du codage ? Pas de souci ! Je m'engage à ce qu'à la fin de ce cours, tu sois capable de coder une fiche rp sans trop de souci !

Pour commencer, je vais donc te poser des questions sur la base même du codage, histoire de situer ton niveau de façon précise. Pas de panique si jamais tu n'as pas la réponse, après tout, on est là pour apprendre ensemble  
Parfois je mettrais des questions pièges mais ça n'est pas par sadisme, c'est juste que tu retiendras mieux en te creusant la tête que si je donnais la réponse d'un coup xD !
Du coup je vais te donner à la suite quelques balises, à toi de me dire à quoi elles servent, avec trois petites questions en plus ♥️

Code:
<b></b>

Code:
<strong></strong>

Code:
<i></i>

Code:
<em></em>

Code:
<div style="text-align:right;"></div>

Code:
<img src="/"/>

- Á quoi sert le CSS ?
- Comment s'utilise le CSS ?
- Comment fait-on pour utiliser du CSS dans une balise HTML ?

Et voilà voilà    



Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 15/10/2018
Messages : 46
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Mer 17 Oct 2018 - 10:14
Bonjour et merci à toi d'avoir accepté de me prendre comme élève ! :3

Alors alors, voici mes réponses :
Code:
<b></b>
Celui là permet de mettre le texte en gras.

Code:
<strong></strong>
Celui-là je ne le connaissais, mais après essai il semble que ça serve aussi à mettre le texte en gras.

Code:
<i></i>
Celui-ci permet d'écrire en italique.

Code:
<em></em>
Après un essai car je ne le connaissais pas non plus, il semblerait que ça permette d'écrire en italique aussi.

Code:
<div style="text-align:right;"></div>
Lui permet d'aligner du texte à droite. Il est assez explicite, c'est cool.

Code:
<img src="/"/>
Et ça, ça permet d'afficher une image à partir d'un lien.

- Á quoi sert le CSS ?
De ce que j'ai compris en m'amusant avec des LS, c'est qu'il permet d'afficher ce qu'on met dans les templates. Par exemple on peut mettre une PA toute jolie dans une template mais elle ne pendra forme et couleur qu'avec un CSS associé, qui nous permet d'ailleurs de gérer à peu près tout l'aspect "visible" : la police, sa taille, sa couleur, les couleurs de fond, la taille des blocs, ce genre de choses.
- Comment s'utilise le CSS ?
Sur FA en tout cas de ce que j'ai compris, le CSS s'utilise dans une page dédiée où on met tous les codes qu'on souhaite voir s'appliquer à l'ensemble du forum, et non pas un message.
- Comment fait-on pour utiliser du CSS dans une balise HTML ?
Alors vu que je ne savais pas du tout, cette réponse fait suite à quelques recherches effectuées de mon côté. Visiblement pour pouvoir insérer du CSS, il faut utiliser les balises "div".
J'ai aussi trouvé quelque chose avec le mot "style", mais visiblement les deux ont l'air d'aller ensemble, donc je ne sais pas trop au final... xD
Mais visiblement il faudrait faire attention, ça serait pour une utilisation ponctuelle.

Voilà voilà, en espérant que tu ne t'arraches pas trop les cheveux devant mon noobisme avéré >w<
avatar
Sexe : Féminin
Date d'inscription : 15/10/2018
Messages : 46
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Dim 21 Oct 2018 - 9:09
Coucou !
C'est juste pour te demander où tu en es de ton côté, excuse moi si jamais tu avais déjà vu que je t'avais répondu x.x
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1827
Designer
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Lun 22 Oct 2018 - 13:50
Coucou à toi ! Alors déjà, désolée du léger délai de réponse, comme je t’ai prévenu ça risque d’être comme ça jusqu’au début Novembre et après je m’accorderai quelques jours de sommeil xD !

Alors du coup, on va passer en revue les questions ! Alors déjà, tout est bon il te manque juste quelques petites informations ! Par exemple, la balise strong, sur FA c’est en général ce qui concerne les noms d’utilisateurs. C’est à dire que ça se met en gras, mais c’est une propriété supérieure au “b” tout court, c’est un truc qui se mettra en priorité en gras ! Oui des fois, c’est utile xD !

Le “em” permet effectivement de mettre en italique, il existe plusieurs façon de le faire et avec le “i”, ce sont les deux premières auxquelles on pense !

Pour savoir à quoi sert le CSS, j’aime bien voir ça comme une métaphore en fait. C’est à dire que le HTML, c’est un peu les murs de ta maison, et le CSS, c’est la décoration à mettre dessus, en gros !

Pour mettre du CSS dans du HTML, regarde un peu plus haut, je t’ai donné justement une question avec :
Code:
<div style="text-align:right;"></div>
C’est typiquement l’exemple comme tu l’as souligné, il faut mettre un “style” (ce qui correspond donc au CSS) et tu peux rajouter tout ce que tu veux après ~ !

Du coup, on va pouvoir passer au premier exercice 8D ! On va commencer tout doucement, justement ! N’hésites pas si ça va trop vite d’ailleurs ~ !

Je vais donc te demander d’écriture la phrase que tu veux, dans la couleur que tu veux, mais centrée ! Sur le modèle de la div style plus haut !

Pas de panique, on s’attaquera à la séparation du HTML et du CSS en deux choses distinctes un peu plus tard, c’est juste pour te familiariser avec les balises de bases pour le moment


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 15/10/2018
Messages : 46
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Lun 22 Oct 2018 - 16:31
Hello !

Pas de soucis, comme je t'ai dis j'avais complètement zappé, puis je vais avoir quelques jours de baisse d'activité pendant la semaine à cheval sur octobre et novembre pour des raisons personnelles ~3~

Je prends note des petites corrections, merci ♥️

Quand au petit exercice, voici ce que je te propose comme réponse :
Dream. Not of who you are but of what you want to be.

Code:
<div style="text-align:center;">[color=#04a412]Dream. Not of who you are but of what you want to be.[/color]</div>

Pour le faire, j'ai remplacé le "right" par "center", et j'ai cherché un code couleur html pour avoir un joli vert. D'ailleurs j'ai deux questions qui en découlent : est-ce que l'ordre du code à une importance particulière ? Par exemple, il y a une sorte de convention qui dit qu'il faudrait mettre la couleur avant l'alignement du texte ou l'inverse ? Et seconde question, j'ai essayé de remplacer les crochets pour le code de la couleur par des "<" et j'ai remarqué que ça ne semblait pas fonctionner. Une raison particulière ?

Voilà désolé de t'assommer de questions, en tout cas prend ton temps pour répondre pas de soucis~

(PS ; si tu te demandes d'où vient la phrase, c'est une référence à un jeu appelé Warframe ♥️)
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1827
Designer
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Lun 22 Oct 2018 - 16:52
Alors alors !
Dans l'idée, visuellement, tout est bon ! Au niveau du code par contre, ça n'est pas tout à fait ça :oup2: ! Mais pas de panique, c'est normal c'est le tout début !
D'abord la correction de l'exercice donc ! Pour le "center", tu as vu juste, c'est exactement ce qu'il faut faire ! Pour la couleur par contre, nop ~
Tu vois, à la fin du center, tu as un ;". Avant le ", tu peux rajouter ton code couleur directement à la suite, comme un CSS classique (tu as déjà du en voir passer en modifier du code) !

C'est justement pour ça que ta balise couleur avec des crochets ne marche pas. Quand tu mets des crochets, c'est du BBcode, donc rien à voir avec le HTML ou CSS ! (me demande pas comment ça marche, j'en sais rien /PAN)

Pour l'ordre du code, il n'y en a pas ! C'est juste qu'à force de coder, en général, tu arrives à avoir ton propre ordre et tu le remets par reflèxe mais sinon, tu peux tout à fait mettre une taille de texte puis une couleur, et enfin centrer; ou tout à fait le contraire et tout mélanger, ça n'a aucune importance !

Du coup, même exercice, deux phrases cette fois, une couleur, une taille de texte en plus ! !


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 15/10/2018
Messages : 46
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Lun 22 Oct 2018 - 17:11
Re !

Alors alors, je prends note de toutes ces explications, et voici mes deux petites phrases. Vu que je suis pas sûre d'avoir compris, je suis partie du principe que tu voulais deux phrases pour voir un texte grand et un tout petit (oui bon j'ai aussi changé la couleur car c'est rigolol) :

Dream. Not of who you are but of what you want to be.


Code:
<div style="text-align:center; color:#04a412; font-size:8px">Dream. Not of who you are but of what you want to be.</div>


Dream. Not of who you are but of what you want to be.


Code:
<div style="text-align:center; color:#cb17bb; font-size:20px">Dream. Not of who you are but of what you want to be.</div>

Pour la taille de texte du coup, j'ai dû chercher un tout petit peu car je ne savais le faire qu'avec du BBcode. J'ai vu qu'on pouvait le mesurer avec du pourcentage ou quelque chose appelé "em" aussi, mais vu que j'ai le plus souvent vu "px" j'ai préféré l'utiliser.
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1827
Designer
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Lun 22 Oct 2018 - 17:26
C'est parfait comme ça ! N'oublies juste pas le ";" avant de fermer le " ! C'est important, ça peut faire beuguer parfois même s'il me semble que ça n'est plus très obligatoire, faudra que je me reseigne !
Le em est utilisable en effet, le % aussi, mais pour Forumactif, le px suffira amplement et puis c'est le plus utilisé, tu te perdra moins en l'utilisant !
Du coup, t'as saisi les bases et super vite en plus ! J'trouve ça super que tu ailles te renseigner comme ça, ça te permet d'apprendre beaucoup plus facilement ~

Sur le même principe, on va un peu changer de format ~
Cette fois, sur le même format, je vais te demander de me faire un petit carré. Rien de perturbant, ne t'en fais pas xD ! Tu lui donnes la couleur de fond que tu veux (attention c'est différent de la balise "color") et avec une largeur et hauteur de 200px ! Je te montrerai comment le centrer après pour que ça fasse tout joli


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 15/10/2018
Messages : 46
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Lun 22 Oct 2018 - 17:54
Re !

A défaut de savoir si c'est désormais vraiment utile, j'essayerai de ne plus oublier le ; ~

Du coup, toujours après renseignements au préalable, voici mon petit carré :

Code:
<div style="height: 200px; width: 200px; background: #000000;"</div></div>




Alors ! le height permet de contrôler la hauteur, le width permet de contrôler la largeur, et le background parle de lui-même, c'est la couleur de fond (que j'avoue avoir mis en noir par défaut). Au début je n'avais que ces trois éléments et je ne comprenais pas pourquoi le texte que j'écrivais à la suite s'intégrait dans le carré. J'ai un peu testouillé au pif, et visiblement dès que j'ai rajouté un second /div, le problème a cessé. Par contre, je n'ai pas compris pourquoi ça fonctionnait comme ça.

J'ai aussi testé pour voir comment le centrer par curiosité mais je n'ai abouti à rien de concluant.
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1827
Designer
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Lun 22 Oct 2018 - 18:47
Alors ! Déjà pour commencer, un carré du premier coup, je dis GG !
Par contre, ta seconde
n'a rien à faire là xD ! Pour le moment on commence par un carré, je t'apprend à mettre un texte dedans ensuite, no rush !

Pour centrer un élément qui a une largeur et une hauteur définie (sans ça, ça ne marche pas), il faut rajouter un :
Code:
margin:0 auto;


Du coup pour le prochain exercice, on va légèrement la donne ~
Cette fois, il va falloir que tu fasses une div class="NOM DE LA CLASSE" en lui donnant donc un nom. Ensuite, tu devras mettre une balise :
Code:
<style></style>
pour rajouter ton css. Je te donne l'exemple avec un rectancle, après ça sera à toi de le refaire avec un autre carré !




Voilà, donc là tu vois, mon HTML ressemble à ça :
Code:
<div class="nowel"></div>

Et à la suite, voici donc le CSS que tu saches comment ça s'écrit :
Code:
<style>.nowel { width:500px;height:200px;margin:0 auto;background:lightblue;}</style>

C'est à toi


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 15/10/2018
Messages : 46
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Lun 22 Oct 2018 - 18:59
Re !

Pour le texte, je ne faisais pas exprès xD En gros quand je voulais écrire à la suite de mon carré, après l'avoir fait, il considérait que le texte devait se trouver dedans, ce que je ne comprenais pas. En rajoutant le 2nd /div j'ai enfin pu écrire à la suite sans que ça ne fusionne.

Du coup là, si j'ai bien compris comment faire, ça devrait être ça :



Code:
<div class="carre"><style>.carre { height:200px;width:200px;margin:0 auto;background:green;}</style></div>

Donc si j'ai bien compris le div class me permet de poser les bases en donnant notamment le nom de mon objet, après le style je précise que c'est sur cet objet que je veux travailler et là j'agis sur du coup sur la forme de mon objet en précisant sa hauteur, sa largeur, le fait qu'il soit centré et sa couleur de fond.
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1827
Designer
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Lun 22 Oct 2018 - 19:57
Nan en fait en rajoutant la seconde /div, tu cassais le code xD !
Du coup oui c'est exactement ça ! Par contre, tu dois mettre ton CSS (donc entre balise style) en dehors de ta div, avant ou après !
Du coup c'est parfait, tu as totalement compris la base ! Maintenant t'es capable de faire la base d'une fiche rp, c'est pas beau ça >w< ? ♥️

Pour la suite, j'vais t'apprendre à aligner des carrés. Ca a l'air tout bête, mais c'est utile parce que quand tu vas te retrouver face à ce cas de figure, tu vas te poser la question xD !
Il y a deux façons de faire, mais la seconde est de loin la plus efficace.

1) La première méthode consiste en ceci :



Je pose donc mes balises de base pour le carré :
Code:
<div class=carrew"></div><div class=carrew"></div>
Puis je viens rajouter le CSS :
Code:
<style>.carrew {width:200px;height:200px;background:lightblue;display:inline-block;vertical-align:top;margin:5px;}</style>

Width et height, tu vois déjà ce que c'est. Le display:inline-block dit au code "mets les l'un à côté de l'autre" et le vertical-align:top lui dit "mais quoi que t'y mettes dedans, il restera à cette place". Le margin quand à lui permet qu'ils ne soient pas collés et de pouvoir les distinguer.

2) La seconde méthode est donc la plus simple. Dans le même cadre, il te faudra entourer tes div de carrés d'une div principale, je te montre en image :




Comme tu peux le voir, j'ai entouré mes div d'une balise pour l'entourer :
Code:
<div class="entour"><div class="carri"></div><div class="carri"></div></div>

Par la suite, j'ai donc stylisé tout ça :
Code:
<style>.entour {display:flex;flex-wrap:wrap;margin:0 auto;}.carri {margin:5px;background:lightblue;width:200px;height:200px;}</style>

La balise pour entourer à une valeur qui s'appelle display:flex : en gros, elle aligne les éléments prise dans cette balise (les carrés dans ce cas), et le flex-wrap:wrap permet que ça ne dépasse pas le corps forum !

Comme tu peux le voir, on arrive au même résultat avec les deux méthodes. Ton prochain exercice est donc de m'aligner trois petits carrés sur le modèle que tu veux ♥️


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 15/10/2018
Messages : 46
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Lun 22 Oct 2018 - 22:31
Re ! C'était très le cours de théâtre~

Je prends note de mes erreurs ! Du coup j'ai voulu essayer avec les deux manières de faire, et voici :



Code:
<div class="carrun"></div><div class="carrun"></div><div class="carrun"></div><style>.carrun {width:200px;height:200px;background:green;display:inline-block;vertical-align:top;margin:3px;}</style>



Code:
<div class="entoure"><div class="carrdeux"></div><div class="carrdeux"></div><div class="carrdeux"></div></div><style>.entoure {display:flex;flex-wrap:wrap;margin:0 auto;}.carrdeux {margin:10px;background:green;width:200px;height:200px;}</style>

(je me suis volontairement amusée à changer l'écart entre les carrés, pour tester)
avatar
Sexe : Féminin
Date d'inscription : 15/10/2018
Messages : 46
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Lun 22 Oct 2018 - 22:39
Arf, je viens de voir qu'ils sont trop gros pour la largeur du forum. Les voici en plus petits :



Code:
<div class="carruns"></div><div class="carruns"></div><div class="carruns"></div><style>.carruns {width:50px;height:50px;background:green;display:inline-block;vertical-align:top;margin:3px;}</style>



Code:
<div class="entouree"><div class="carrdeuxx"></div><div class="carrdeuxx"></div><div class="carrdeuxx"></div></div><style>.entouree {display:flex;flex-wrap:wrap;margin:0 auto;}.carrdeux {margin:10px;background:green;width:50px;height:50px;}</style>

J'ai aussi découvert que si je leur laissais le même nom qu'à mes carrés précédents, et bien je n'arrivais plus à les modifier, j'ai été obligé de les renommer (juste changer une lettre, rien de fou, mais j'ai trouvé ça bizarre). Comme si le CSS précédent s'appliquait au lieu de celui de ce deuxième message.
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1827
Designer
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Mar 23 Oct 2018 - 0:19
Yeeeeees c'est parfait ! T'avances super bien ! En plus t'as touché au margin des seconds carrés et du coup ça prouve que t'as tout compris, j'suis trop happy \o/ !

Yep pour le CSS, c'est qu'il s'applique à une seule balise. C'est à dire que si en premier, tu as un "carre", c'est ce premier là dont le CSS est associé qui s'appliquera à tous les autres ! Ce qui peut jouer des tours parfois donc bien faire attention à toujours nommer les balises en étant sûr qu'il n'y en a pas ailleurs XD
(indice : j'utilise souvent des noms de bouffe, ça passe tout seul Miam )

Et bieeeeeen du coup je pense qu'on est prêtes pour l'exercice suivant qui sera le dernier mais va se dérouler en plusieurs grosses parties. Je vais te donner petit à petit une fiche de rp à construire (une très simple hein), et à chaque fois, je te donnerai des astuces pour avancer, ça te va ~ ?

Dooooonc pour commencer, tu vas construire la base. Centrée, d'une largeur que tu veux (pas au-delà de 500, c'est personnel mais quand ça fait plus de 500px de largeur j'trouve ça moche), pareil pour la hauteur ! Une couleur de fond, pas trop agressive et petite contrainte supplémentaire, une bordure d'1px en noir !


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 15/10/2018
Messages : 46
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Mar 23 Oct 2018 - 11:53
Hello !

Merci pour les explications~

Alors voici ma petite base pour la fiche !



Code:
<div class="fiche"></div><style>.fiche { height:650px;width:450px;margin:0 auto;background:#d3d3d3;border-width:1px;border-color:black;border-style:solid;}</style>

Alors, j'ai repris la base qu'on avait utiliser pour faire un carré, du coup en modifiant les valeurs pour obtenir ce rectangle d'une hauteur de 650px et d'une largeur de 450px. Je l'ai centré, j'ai donné une couleur de fond, puis je suis allée fouiller sur le webternet pour trouver comment faire les bordures. border-width contrôle l'épaisseur de la bordure, border-color sa couleur, et border-style si jamais on veut qu'elle soit en pointillé, solide comme ici, etc. J'ai pas mal galéré pour comprendre où placer ces informations, avant de comprendre que j'avais juste à y intégrer dans celles relatives à mon rectangle (sobrement appelé "fiche") pour que les bordures le suivent parfaitement.
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1827
Designer
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Mar 23 Oct 2018 - 15:35
Yay c'est parfait et exactement ça !!
Pour le code, il est niquel sauf sur un tout petit point ! Parfois internet ne dit pas tout xD ! /PAN
Pour le border, tu n'es pas obligé de mettre autant de valeur en fait, tu peux réduire ça en une ligne et gagner pas mal de place !
Code:
border:solid 1px black;

Tu peux tout simplement réduire ça comme ça ~

Du coup maintenant, tu pourrais rajouter un titre à ta fiche, tout en haut de la fiche, centré ? Couleur que tu veux, taille que tu veux ! Mais attention, pas collé au bord ! Avant de commencer, tu connais la valeur "padding" ^^ ?


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 15/10/2018
Messages : 46
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Mar 23 Oct 2018 - 16:07
Très bien, je prends note. Du coup, après petite recherche sur le net pour le "padding" (en fait j'étais sûre de savoir et ça m'a perturbé de pas retrouver, j'étais tombée dessus quand je cherchais pour les bordures !), il s'agirait visiblement un objet permettant de créer un espace entre la bordure et ce qu'on souhaite entourer. On peut visiblement l'utiliser aussi indépendamment de chaque côté (j'ai vu des padding-top, ou padding-bottom, ce genre de choses).
Du coup je m'y atèle~ J'ai juste une question, il faut que mon titre soit dans un bloc à part ou je l'intègre directement comme ça sur la base que j'ai déjà ? Ou je lui donne juste un fond ?
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1827
Designer
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Mar 23 Oct 2018 - 16:09
Yep c'est exactement ça, niquel \o/ !

C'est comme tu le sens ! Soit tu veux faire un texte simple, donc tu te contentes de le centrer et puis voilà, soit tu veux mettre un fond alors tu dois lui donner une hauteur, etc !


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 15/10/2018
Messages : 46
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Mar 23 Oct 2018 - 17:19
Alors voici :

Titre rp


Code:
<div class="entetetitre">Titre rp</div><style>.entetetitre { height:50px;width:450px;margin:0 auto;background:#e7dce6;border:solid 1px black;border-bottom:0px;text-align:center; color:#6a6a6a; font-size:24px;padding-top: 10px}</style><div class="fiches"></div><style>.fiches { height:650px;width:450px;margin:0 auto;background:#e5e5e5;border:solid 1px black;}</style>

Alors alors ;
J'ai retouché à la couleur de fond du premier rectangle que j'avais fait parce que voilà xD Sinon j'en ai rajouté un autre pour servir de zone où mettre le titre. Le border-bottom me sert à dire que je ne veux pas qu'il y ait de bord sur le bas du bloc du haut, parce que sinon ça faisait deux bord qui se collait et ça l'épaississait, c'était pas beau. Pour le texte, je l'ai centré, je lui ai donné une couleur, une taille, et le padding m'a servi à faire en sorte qu'il en soit pas collé contre le haut du bloc.
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1827
Designer
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Mar 23 Oct 2018 - 19:20
Mais t'avances super bien !! C'est niquel et bien codé, parfait !

Pour la suiiiite, on va essayer de mettre une jolie petite image, histoire de décorer tout ça ~
Pour en mettre une, tu peux donc mettre une balise (div) en lui donnant un nom, puis à l'intérieur, le code est celui-ci :
Code:
<img src="LIEN_DE_L'IMAGE"/>

Ta div te serva à centrer ton image, à la déplacer si besoin, mais si tu veux mettre une taille précise à ton image, la balise change :
Code:
 .nomdetabalise img {
width:taille px;
height:taille px;
}

Le 'img' dit à ton code que tu te concentrer exlusivement sur l'image ! En lui donnant une largeur et hauteur définie, tu pourras donc mettre n'importe quel lien dans ton code pour l'image, elle gardera cette taille ♥️ ! Du coup, la prochaine étape de ton exercice étant de rajouter une sous-phrase sous le titre, en taille plus petite (à toi de voir si tu centres ou pas le texte) et par dessous, une image mais sans qu'elle ne soit trop collée !


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 15/10/2018
Messages : 46
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Mar 23 Oct 2018 - 19:34
Coucou !

Je suis en train de m'en occuper mais je ne comprends pas tout à fait ce que tu entends par "image pas trop collée" ; en gros je dois intercaler une image entre mon bloc de titre (où je vais rajouter un sous-titre) et mon bloc destiné au message ? En sans que l'image touche les blocs, c'est ça ? (je demande car je suis par tout à fait sûre x_x)
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1827
Designer
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Mar 23 Oct 2018 - 19:40
Ah yep c'est ça ! En gros, comme pour le titre quoi, que l'image ne soit pas collé au bord inférieur du titre !


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 15/10/2018
Messages : 46
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Mer 24 Oct 2018 - 21:08
Helloo~

Je te la donne en 1000, je suis en pleine galère sur cette image ~3~ je crois que je me tords dans tous les sens pour pas grand chose, mais j'ai beau chercher je suis dans la panade. Voici globalement les deux chemins que j'ai emprunté :

Code:
<div class="entetetitre">Titre rp</div><style>.entetetitre { height:50px;width:450px;margin:0 auto;background:#e7dce6;border:solid 1px black;border-bottom:0px;text-align:center; color:#6a6a6a; font-size:24px;padding-top: 10px}</style><center><img src="https://zupimages.net/up/18/43/6s10.png"/ style="width:450px;height:50px;border:solid 1px black;border-bottom:0px;"></center><div class="fiches"><style>.fiches { height:650px;width:450px;margin:0 auto;background:#e5e5e5;border:solid 1px black;}</style>

Code:
<div class="entetetitre">Titre rp</div><style>.entetetitre { height:50px;width:450px;margin:0 auto;background:#e7dce6;border:solid 1px black;border-bottom:0px;text-align:center; color:#6a6a6a; font-size:24px;padding-top: 10px}</style><div class="monimage"></div><style>.monimage img {img src="https://zupimages.net/up/18/43/6s10.png";width:450px;height:50px;border:solid 1px black;border-bottom:0px;}</style><div class="fiches"><style>.fiches { height:650px;width:450px;margin:0 auto;background:#e5e5e5;border:solid 1px black;}</style>


En fait après tatonnage j'avais finis par arriver sur la première version. J'étais super contente de moi car le rendu était globalement ce que je voulais, mais après je me suis retrouvée bien bête parce que depuis ça, je ne savais pas où placer le petit sous-titre. Du coup j'ai essayé de bidouiller une autre version, la seconde, mais là mon image apparait en plein milieu de mon gros bloc, c'est bordel, bref à l'aide ;w;
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1827
Designer
Voir le profil de l'utilisateur
# Re: Classe de Susanad [FERMÉ]le Mer 24 Oct 2018 - 22:35
T'en fais pas, le code c'est jamais facile quand on commence xD !
De ce que j'en vois déjà, le code n'est pas forcément bien mis en place. Dans le sens que tu dois mettre tout ton CSS ensemble, pas balise après balise :3 ! En mettant des style partout, déjà toi tu vas te perdre à coup sûr, et puis ça risquerai de surcharger totalement le code :3 ! Donc pour la suite, hop, tout ensemble sous la même balise style !
Ensuite, tu as confondu HTML et CSS mais c'est pas grave, c'est la première fois ! Je te donne un exemple de début, histoire que tu puisses rebondir.
Dans ton HTML, ça doit faire
Titre > Sous-titre > Image.

Traduit en code :
Code:
<div style="title"></div>
<div class="subtitle"></div>
<div class="image"><img src="/"/></div>

Et après, tu n'as plus qu'à passer tout ça en jolies couleurs avec le CSS !


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum