Un forum de discussions pour parler de tout et de rien, de vos études,de vos vacances,de vos loisirs et faire plein de connaissances
 

Partagez
 

 Cours #1 : Créer un bloc, mise en page d'un texte.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2  Suivant
AuteurMessage
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptySam 4 Nov - 17:14



Langage : CSS&HTML
Niveau : Débutant
Temps : 15 minutes
Auteur : Arya
Créer un bloc et un texte

Aloha ~  :neko1: Alors ça fait pas mal de temps que j'avais envie de faire un tuto pour vous apprendre à coder, et puis je n'ai jamais eu le temps. :neko17:
Même là en fait je n'ai pas le temps mais j'ai décidé de séparer le cours en plusieurs parties afin que ce soit plus rapide pour moi de poster un tuto (je me mets au défi de faire un tuto en moins de 30 minutes si possible  :neko15: )


Nous allons apprendre à faire un bloc tout d'abord. C'est tout simple. La balise div vous permettra de créer un bloc et vous devriez lui attribuer plusieurs fonctions afin que le bloc prenne forme.
Code:
<div="1erAttribut;2èmeAttribut;3èmAttribut;"></div>
Le Html c'est tout ce qui est sous le forme de "<..>" Le CSS c'est tout ce qui est "1erAttribut;2èmeAttribut;3èmAttribut;". En bref le HTML forme le corps, le CSS forme les couleurs, les images, c'est le contenu. Il y a toujours des points virgules entre chaque attribut même s'il se trouve à la fin du CSS. Pensez également à bien referme le crochet en HTML. :neko5:

Déjà nous allons décider de la hauteur→height et de la largeur→width de notre bloc. Prenons par exemple 450*600px. On les insère ainsi.
Code:
<div style="width:450px;height:600px;"></div>
Simple non ?  :neko15:

Sauf que là nous avons créer une zone vide. Alors pour compléter ça, on peut soit choisir une image, soit une couleur. Nous allons commencer par simplement y mettre une couleur de fond→background-color. Votre couleur doit être en html code, il commence par # et comporte 6 chiffres. Exemple : #000000=noir et #FFFFFF=blanc
Pour chercher la couleur de votre choix je vous propose ce site :
https://html-color-codes.info/Codes-couleur-HTML/
Code:
<div style="width:450px;height:600px;background-color:#F2F2F2;"></div>

Mettons ensuite des bordures à ce bloc. Pour cela, nous utilisons border-right, border-left, border-top, border-bottom (droite, gauche, haut, bas). On les utilise ainsi : border: XXpx #000000 solid/dotted/dashed..etc Solid c'est pour faire une ligne continue, dotted une ligne en pointillée et dashed pour une ligne segmentée. Vous pouvez vous amuser à varier et faire comme vous voulez !
Code:
<div style="width:450px;height:600px;background-color:#F2F2F2;border-top:1px #F0ADAD dotted; border-bottom:1px #F0ADAD dotted; border-right:8px #F0ADAD solid; border-left:8px #F0ADAD solid;"></div>
RESULTAT 1 (ci-dessous)

Ajoutons-y un titre. Pour trouver une belle police je vous conseille de chercher ici :
https://fonts.google.com/
J'ai choisi Homemade Apple, mais faites comme vous voulez :neko5:
Google me donne donc deux choses :
Code:
<link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">
ça va aller juste avant votre titre, c'est du html
Code:
font-family: 'Homemade Apple', cursive;
ça va aller dans la div du titre car c'est du css
Créons une nouvelle div dans la div précédente et ajoutons un titre ainsi :
Code:
<div style="width:450px;height:600px;background-color:#F2F2F2;border-top:1px #F0ADAD dotted; border-bottom:1px #F0ADAD dotted; border-right:8px #F0ADAD solid; border-left:8px #F0ADAD solid;">
<div style="font-family: 'Homemade Apple', cursive;color:#85CFBE;font-size:30px;"><link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">Titre au choix</link></div></div>
Le link vient de Google font, et le css inséré aussi. On applique une couleur avec color et on choisit une taille de police avec font-size.
RESULTAT 2 (ci-dessous)

Comme le titre dépasse en haut, on lui rajoute une marge inférieure → padding en haut → top ainsi :
Code:
<div style="width:450px;height:600px;background-color:#F2F2F2;border-top:1px #F0ADAD dotted; border-bottom:1px #F0ADAD dotted; border-right:8px #F0ADAD solid; border-left:8px #F0ADAD solid;">
<div style="font-family: 'Homemade Apple', cursive;color:#85CFBE;font-size:30px;padding-top:20px;"><link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">Titre au choix</link></div></div>

J'espère que je ne vous ai pas perdu :neko17:
Pour la suite c'est simple, c'est comme avant, on crée un bloc, mais dans le bloc d'avant et après le bloc du titre. On choisit les dimensions, un fond et petite nouveauté que j'apporte, on peut utiliser l'opacité→opacity pour nuancer, et faire un peu apparaître le fond (utile quand le fond est une image). De plus, on ajouter overflow:auto pour faire la scrollbar, ainsi on pourra y mettre un texte long sans qu'il ne dépasse du bloc.
Code:
<div style="width:450px;height:600px;background-color:#F2F2F2;border-top:1px #F0ADAD dotted; border-bottom:1px #F0ADAD dotted; border-right:8px #F0ADAD solid; border-left:8px #F0ADAD solid;">
<div style="font-family: 'Homemade Apple', cursive;color:#85CFBE;font-size:30px;padding-top:20px;"><link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">Titre au choix</link></div>

<div style="width:350px;height:150px;background-color:#3EB397;color:#ffffff;opacity:0.6;overflow:auto;padding:5px;"> Aloha ~

J'espère que vous n'êtes pas trop perdu car en fait je voulais faire un tuto hyper rapide mais je me rends compte qu'il se rallonge beaucoup mon tutoriel, j'ai envie de vous montrer tout en même temps désolée
 J'espère que ça ne vous gêne pas    
Je vous fais des bisous <3
Arya-sensei  
</div></div>
J'ai également ajouté des marges intérieures avec padding:5px; pour éviter que le texte colle aux bordures.
RESULTAT 3 (ci-dessous)

Ensuite vous pouvez varier avec les bordures, les couleurs et tout ce que vous voulez !  :neko9: Sur le résultat final, j'ai juste varier l'opacité  :neko15:

A retenir :
background-color:#000000;
height:XXpx;
width:XXpx;
color:#000000;
font-size:XXpx;
overflow:auto;
opacity:0.X;
padding:XXpx
border:XXpx #000000 solid/dotted/dashed...
Un petit merci ne vous coûte rien ! Montre-moi vos oeuvres !
Codage by Arya de Ocean Home





RESULTAT 1
Spoiler:
 

RESULTAT 2
Spoiler:
 

RESULTAT 3
Spoiler:
 


RESULTAT FINAL

Titre au choix

Aloha ~

J'espère que vous n'êtes pas trop perdu car en fait je voulais faire un tuto hyper rapide mais je me rends compte qu'il se rallonge beaucoup mon tutoriel, j'ai envie de vous montrer tout en même temps désolée Cours #1 : Créer un bloc, mise en page d'un texte. 610716569
J'espère que ça ne vous gêne pas  :neko17:  
Je vous fais des bisous <3
Arya-sensei  :kokoro:

Aloha ~

J'espère que vous n'êtes pas trop perdu car en fait je voulais faire un tuto hyper rapide mais je me rends compte qu'il se rallonge beaucoup mon tutoriel, j'ai envie de vous montrer tout en même temps désolée Cours #1 : Créer un bloc, mise en page d'un texte. 610716569
J'espère que ça ne vous gêne pas  :neko17:  
Je vous fais des bisous <3
Arya-sensei  :kokoro:

Aloha ~

J'espère que vous n'êtes pas trop perdu car en fait je voulais faire un tuto hyper rapide mais je me rends compte qu'il se rallonge beaucoup mon tutoriel, j'ai envie de vous montrer tout en même temps désolée Cours #1 : Créer un bloc, mise en page d'un texte. 610716569
J'espère que ça ne vous gêne pas  :neko17:  
Je vous fais des bisous <3
Arya-sensei  :kokoro:
Si t'as survécu, commente  Cours #1 : Créer un bloc, mise en page d'un texte. 610716569



Voici un exercice à faire pour vous entraîne et voir si vous avez tout compris !
Postez vos résultats :kokoro:
Exercice 1
Aloha ~

Votre exercice est simple : reproduire cette div en entière !
Dimension : 300x200px
Couleur de fond :  #489D8B
Couleur des bordures : #17473D
Couleur de l'écriture : #85CFBE
Police d'écriture : Homemade Apple
Taille de l'écriture : 30px

Dimension de la div intérieure : 290x100px
Couleur de fond : blanc
Couleur de l'écriture : noir
Opacité : 0.4

Je vous fais des bisous <3
Arya-sensei  



Exercice 2 (libre) :
Faire une fiche de réponse "Mon océan" (ou une fiche de présentation)

Exercice 3 (libre) :
Faire une fiche RP de réponse

N'hésitez pas à y insérer des images !



Cours #1 : Créer un bloc, mise en page d'un texte. 29VnchE
Merci Nolwenn ♥
Cours #1 : Créer un bloc, mise en page d'un texte. Hl03vzZ


Dernière édition par Arya le Lun 6 Nov - 17:40, édité 4 fois
Revenir en haut Aller en bas
Frisk
Baleine de Nemo
Baleine de Nemo
Frisk
Messages : 2356
Date d'inscription : 02/01/2017
Age : 16

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptySam 4 Nov - 17:35

Super tuto pour les débutants, très bien expliqué :heart:


(anciennement Nyx)
Cours #1 : Créer un bloc, mise en page d'un texte. 10s4

Cours #1 : Créer un bloc, mise en page d'un texte. 1500379004-award-nyx3 Cours #1 : Créer un bloc, mise en page d'un texte. ZHEtwKz

marvel(ous).:
 
Revenir en haut Aller en bas
https://www.wattpad.com/user/wintersoldxer
Chance
Baleine de Nemo
Baleine de Nemo
Chance
Messages : 2005
Date d'inscription : 09/09/2015
Age : 18

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptySam 4 Nov - 18:00

Merci beaucoup @Arya, pour une nouille comme moi en codage ça peut être un bon début :')
J'essaierai quand j'aurais le temps (et la motivation éé), merci du partage :heart:


Cours #1 : Créer un bloc, mise en page d'un texte. 1504097615-chance-signaa

Kit by Undead, la plus belle :heart:

Cours #1 : Créer un bloc, mise en page d'un texte. IzIo6jN

Spoiler:
 
Revenir en haut Aller en bas
Mauane
Pingouin de Madagascar
Pingouin de Madagascar
Mauane
Messages : 344
Date d'inscription : 25/08/2017
Age : 16

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptySam 4 Nov - 19:29

Bon, @Arya, tu es certaine de pouvoir compter sur moi pour suivre tes cours avec assiduité :oni8: Merci pour ce superbe tuto très bien détaillé (c'est la première fois que je comprends vraiment du codage, incroyable)


Cours #1 : Créer un bloc, mise en page d'un texte. A0wc

Cours #1 : Créer un bloc, mise en page d'un texte. J5ok
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptySam 4 Nov - 20:24

Merci beaucoup les filles, c'est un plaisir de rendre service !

@Mauane c'est vrai ? Tu me fais trop plaisir !
Je veux voir vos oeuvres ! *-*

Ou est-ce qu'il faut que je donne un exercice pour que vous le fassiez ? Cours #1 : Créer un bloc, mise en page d'un texte. 610716569
C'est ce que je me suis demandée d'ailleurs, puisque dans un cours, il y a une méthode puis des exercice d'application, est-ce que si je vous en donne (des simples bien sûr pour vous entrainer), ça vous intéresse ? :neko5:



Cours #1 : Créer un bloc, mise en page d'un texte. 29VnchE
Merci Nolwenn ♥
Cours #1 : Créer un bloc, mise en page d'un texte. Hl03vzZ
Revenir en haut Aller en bas
Louve Ailée
Léviathan des Nymphes
Léviathan des Nymphes
Louve Ailée
Messages : 3655
Date d'inscription : 14/07/2015
Age : 23

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptySam 4 Nov - 20:32

Waaaah trop biennnn :pingoun: Je vais le faire quand j'aurais du temps !

Ouii donne un ou plusieurs exo à la fin du tuto pour vérifier si on a bien compris la méthode ! :onilove:


Mes récompenses:
 
Comment taguer mon pseudo ?:
 
Revenir en haut Aller en bas
Mauane
Pingouin de Madagascar
Pingouin de Madagascar
Mauane
Messages : 344
Date d'inscription : 25/08/2017
Age : 16

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptySam 4 Nov - 20:33

Oh ouais c'est une très bonne idée ça !!


Cours #1 : Créer un bloc, mise en page d'un texte. A0wc

Cours #1 : Créer un bloc, mise en page d'un texte. J5ok
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptySam 4 Nov - 20:44

Vos désirs sont des ordres :neko15:

Voici votre premier exercice :

Exercice 1
Aloha ~

Votre exercice est simple : reproduire cette div en entière !
Dimension : 300x200px
Couleur de fond :  #489D8B
Couleur des bordures : #17473D
Couleur de l'écriture : #85CFBE
Police d'écriture : Homemade Apple
Taille de l'écriture : 30px

Dimension de la div intérieure : 290x100px
Couleur de fond : blanc
Couleur de l'écriture : noir
Opacité : 0.4

Je vous fais des bisous <3
Arya-sensei  




Cours #1 : Créer un bloc, mise en page d'un texte. 29VnchE
Merci Nolwenn ♥
Cours #1 : Créer un bloc, mise en page d'un texte. Hl03vzZ
Revenir en haut Aller en bas
Mauane
Pingouin de Madagascar
Pingouin de Madagascar
Mauane
Messages : 344
Date d'inscription : 25/08/2017
Age : 16

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptySam 4 Nov - 21:03

Bon j'ai voulu essayer, mais en fait, en prévisualisant, rien ne marche :l'écriture ne marche pas sur le titre, le cadre à l'intérieur est collé aux bordures de l'autre cadre, et le titre comme le texte dans le cadre intérieur ne sont pas centrés... J'en ai marre !!!


Cours #1 : Créer un bloc, mise en page d'un texte. A0wc

Cours #1 : Créer un bloc, mise en page d'un texte. J5ok
Revenir en haut Aller en bas
Mauane
Pingouin de Madagascar
Pingouin de Madagascar
Mauane
Messages : 344
Date d'inscription : 25/08/2017
Age : 16

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptySam 4 Nov - 21:13

Dream


J'espère que ça marche  :onicry: A chaque fois j'y arrive pas, ça m'énerve...
EDIT: J'ai réussi !!!  :neko9:


REEDIT : J'ai fait un autre essai !

Dream


Viens, tu verras la route est longue
Parfois le ciel devient sombre
Mais les nuages sont encore loin...

Et même si de fatigue tu tombes
Dans ta course vagabonde
Aie le courage de continuer ton chemin...

Dis-toi que rien n'est écrit
L'avenir se construit
Il n'y a que toi pour savoir quelles sont vraiment tes envies...
Il n'y a que toi pour savoir quel sens donner à ta vie...


Dernière édition par Mauane le Dim 5 Nov - 11:45, édité 4 fois
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 11:42

Bravoooo ! Tu as réussi tu vois ! :qoobee4:
Pour l'exercice à faire par contre tu as inversé les bordures, ça devait être les pointillés à droite et à gauche mais pas grave tu l'as fait dans le deuxième :p
...Euh enfait non j'avais demandé des dashed et c'est 1px :neko15:



Cours #1 : Créer un bloc, mise en page d'un texte. 29VnchE
Merci Nolwenn ♥
Cours #1 : Créer un bloc, mise en page d'un texte. Hl03vzZ
Revenir en haut Aller en bas
Mauane
Pingouin de Madagascar
Pingouin de Madagascar
Mauane
Messages : 344
Date d'inscription : 25/08/2017
Age : 16

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 11:46

Hup, j'ai édité, je crois que c'est bon maintenant ^^


Cours #1 : Créer un bloc, mise en page d'un texte. A0wc

Cours #1 : Créer un bloc, mise en page d'un texte. J5ok
Revenir en haut Aller en bas
Chance
Baleine de Nemo
Baleine de Nemo
Chance
Messages : 2005
Date d'inscription : 09/09/2015
Age : 18

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 14:01

Le poulpe

Jetant son encre vers les cieux
Suçant le sang de ceux qu'il aime
Et le trouvant délicieux
Ce monstre inhumain, c'est moi-même

Guillaume Apollinaire


Ouah déjà je poste ça ici, j'ai galéré pendant 10 minutes parce que les bords ne s'affichaient pas à cause d'un guillemet oublié xDD

J'ai du boulot là maintenant mais j'essaierai d'éditer le plus vite possible, merci pour l'exercice :onilove:

dernière édition le 07/10 : j'ai fini, enfin :6onion:


Cours #1 : Créer un bloc, mise en page d'un texte. 1504097615-chance-signaa

Kit by Undead, la plus belle :heart:

Cours #1 : Créer un bloc, mise en page d'un texte. IzIo6jN

Spoiler:
 


Dernière édition par Chance le Mar 7 Nov - 21:36, édité 4 fois
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 18:58

Parfait Mauane je te donne 20/20 :qoobee15:

@Chance Mdrrr oui attention aux guillemets et aux points virgules c'est vicieux Cours #1 : Créer un bloc, mise en page d'un texte. 610716569
C'est un très bon début en tout cas !



Cours #1 : Créer un bloc, mise en page d'un texte. 29VnchE
Merci Nolwenn ♥
Cours #1 : Créer un bloc, mise en page d'un texte. Hl03vzZ
Revenir en haut Aller en bas
Chance
Baleine de Nemo
Baleine de Nemo
Chance
Messages : 2005
Date d'inscription : 09/09/2015
Age : 18

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 19:00

@Arya : merci :3
Je suis en train d'éditer mon post, j'ai eu beaucoup de mal avec le titre xDD Heureusement @Gaïa (à qui je balance des keurs :kokoro: ) m'a aidé à comprendre xD


Cours #1 : Créer un bloc, mise en page d'un texte. 1504097615-chance-signaa

Kit by Undead, la plus belle :heart:

Cours #1 : Créer un bloc, mise en page d'un texte. IzIo6jN

Spoiler:
 
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 19:04

Ooh super merci @Gaïa je te balance des coeurs moi aussi :kokoro: :kokoro: :kokoro:
C'est vrai que le titre faut savoir bien placer je me suis dit que j'ai peut-être expliqué trop vite :neko16:



Cours #1 : Créer un bloc, mise en page d'un texte. 29VnchE
Merci Nolwenn ♥
Cours #1 : Créer un bloc, mise en page d'un texte. Hl03vzZ
Revenir en haut Aller en bas
Chance
Baleine de Nemo
Baleine de Nemo
Chance
Messages : 2005
Date d'inscription : 09/09/2015
Age : 18

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 19:05

Tout le monde balance des keurs à @Gaïa de toute façon Cours #1 : Créer un bloc, mise en page d'un texte. 610716569
J'ai édité, par contre je me suis ratée pour l'opacité et j'ai oublié de mettre une distance entre le titre et le bloc :onicry: j'essaierai ce soir de corriger ça


Cours #1 : Créer un bloc, mise en page d'un texte. 1504097615-chance-signaa

Kit by Undead, la plus belle :heart:

Cours #1 : Créer un bloc, mise en page d'un texte. IzIo6jN

Spoiler:
 
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 19:10

Bon progrès quand même ! Ca prend forme ! :onilove: C'est la bonne dimension pour la div intérieure ? D:
Ben oui on lui fait des coeurs, mais tu la gardes que pour toi @Gaïa elle nous manque aussi :onicry:



Cours #1 : Créer un bloc, mise en page d'un texte. 29VnchE
Merci Nolwenn ♥
Cours #1 : Créer un bloc, mise en page d'un texte. Hl03vzZ
Revenir en haut Aller en bas
Jade
Lion des mers
Lion des mers
Jade
Messages : 619
Date d'inscription : 09/01/2017
Age : 22

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 19:23



Code:
<div style="width:300px;height:200px;background-color:#489D8B; border-top:8px #17473D solid; border-bottom:8px #17473D solid; border-left:1px #17473D dashed; border-right:1px #17473D dashed;"></div>

Elles sont où mes bordures ? :lama4:


Cours #1 : Créer un bloc, mise en page d'un texte. 1532031122-signa-wolf2

Récompenses/cadeaux :
 



Dernière édition par Jade le Dim 5 Nov - 20:04, édité 1 fois
Revenir en haut Aller en bas
Chance
Baleine de Nemo
Baleine de Nemo
Chance
Messages : 2005
Date d'inscription : 09/09/2015
Age : 18

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 19:37

Essaye de mettre des espaces après les points-virgule qui séparent tes bordures @Jade, j'ai l'impression que c'est ça qui manque DD:

@Arya : je ne sais pas trop, j'ai un doute :onicry: je vérifierai tout à l'heure
Je sais, j'essaierai de la persuader de revenir ici, elle nous manque tous ;-;


Cours #1 : Créer un bloc, mise en page d'un texte. 1504097615-chance-signaa

Kit by Undead, la plus belle :heart:

Cours #1 : Créer un bloc, mise en page d'un texte. IzIo6jN

Spoiler:
 
Revenir en haut Aller en bas
Jade
Lion des mers
Lion des mers
Jade
Messages : 619
Date d'inscription : 09/01/2017
Age : 22

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 19:46

@Chance J'ai essayé, ça ne change rien ^^' Je ne vois pas ce qui cloche dans mon code D:


Cours #1 : Créer un bloc, mise en page d'un texte. 1532031122-signa-wolf2

Récompenses/cadeaux :
 

Revenir en haut Aller en bas
Chance
Baleine de Nemo
Baleine de Nemo
Chance
Messages : 2005
Date d'inscription : 09/09/2015
Age : 18

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 19:53

Test code jade



Code:
<div style="width:300px;height:200px;background-color:#489D8B; border-top:8px #17473D solid; border-bottom:8px #17473D solid; border-left:1px #17473D dashed; border-right:1px #17473D dashed;"></div>

Pourtant chez moi si @Jade :v


Cours #1 : Créer un bloc, mise en page d'un texte. 1504097615-chance-signaa

Kit by Undead, la plus belle :heart:

Cours #1 : Créer un bloc, mise en page d'un texte. IzIo6jN

Spoiler:
 
Revenir en haut Aller en bas
Jade
Lion des mers
Lion des mers
Jade
Messages : 619
Date d'inscription : 09/01/2017
Age : 22

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 20:14

@Chance Il y a des espaces invisibles   qui se sont glissés dans mes paramètres de bordures dans mon précédent post, je n'arrive pas à les enlever et c'est pour ça que mes bordures n'apparaissent pas :/ J'ai pu les voir en utilisant la fonction inspecter sur mon bloc Wink
Mais si je copie le code nouvellement modifié ici, ça devrait fonctionner normalement, avec les prévisualisations que j'ai pu faire :



Code:
<div style="width:300px;height:200px;background-color:#489D8B; border-top:8px #17473D solid; border-bottom:8px #17473D solid; border-left:1px #17473D dashed; border-right:1px #17473D dashed;"></div>

Voilà !


Cours #1 : Créer un bloc, mise en page d'un texte. 1532031122-signa-wolf2

Récompenses/cadeaux :
 

Revenir en haut Aller en bas
Chance
Baleine de Nemo
Baleine de Nemo
Chance
Messages : 2005
Date d'inscription : 09/09/2015
Age : 18

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 20:22

Oh chelou :v

Bon le principal c'est que t'aies réussi :3


Cours #1 : Créer un bloc, mise en page d'un texte. 1504097615-chance-signaa

Kit by Undead, la plus belle :heart:

Cours #1 : Créer un bloc, mise en page d'un texte. IzIo6jN

Spoiler:
 
Revenir en haut Aller en bas
☯ Undead
Baleine de Nemo
Baleine de Nemo
☯ Undead
Messages : 1065
Date d'inscription : 07/06/2017
Age : 20

Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. EmptyDim 5 Nov - 20:27

Je vais tester ! J'avais réussi à pondre une fiche RP y'a deux ans, et j'ai suivi quelques cours de HTML mais je suis nulle XD J'édite quand c'est fait :noel: Merci à toi @Arya t'es la meilleure, c'est génial ce tuto :onilove:

EDIT : 20:56:32

Juh présidente

raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine ! raclette tous les jours à la cantine !


Bon nickel à priori j'ai pas oublié ce que j'avais appris :neko21:


Cours #1 : Créer un bloc, mise en page d'un texte. 1541083444-signaaaaa


Dernière édition par ☯ Undead le Dim 5 Nov - 20:57, édité 1 fois
Revenir en haut Aller en bas
Contenu sponsorisé



Cours #1 : Créer un bloc, mise en page d'un texte. Empty
Message Sujet: Re: Cours #1 : Créer un bloc, mise en page d'un texte.   Cours #1 : Créer un bloc, mise en page d'un texte. Empty

Revenir en haut Aller en bas
 
Cours #1 : Créer un bloc, mise en page d'un texte.
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 2Aller à la page : 1, 2  Suivant
 Sujets similaires
-
» menus noel en video du cours de cuisine de vendredi dernier
» cours de couture
» Cours de jersiais
» Suivez des cours de couture gratuitement sur le Net !
» mise sous Curatelle ou sous tutelle

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Ocean Home :: Our Homes :: Vos talents artistiques :: Codage :: Tutoriaux-