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 : Précédent  1, 2
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. - Page 2 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. - Page 2 EmptySam 4 Nov - 17:14

Rappel du premier message :



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. - Page 2 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. - Page 2 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. - Page 2 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. - Page 2 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. - Page 2 29VnchE
Merci Nolwenn ♥
Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 Hl03vzZ


Dernière édition par Arya le Lun 6 Nov - 17:40, édité 4 fois
Revenir en haut Aller en bas

AuteurMessage
Gaïa
Baleine de Nemo
Baleine de Nemo
Gaïa
Messages : 1436
Date d'inscription : 18/07/2016
Age : 17

Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 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. - Page 2 EmptyDim 5 Nov - 20:40

dsfjeirjfensaaahhh :13onion:
Vous êtes trop adorables, je continue de passer sur le forum pour vous observer jeunes enfants. :neko1:
@Chance, je te fais les gros noeu-noeuilles. Pourquoi t'as mis un "overflow: auto-padding;" ? Ca n'existe pas. ;-;
Je suppose que c'est une erreur du coup je te pardonne. :neko15:


« le double amour qui brûla
l'alouette et l'hirondelle
la rose et le réséda. »
Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 1471555985-gaiaquizzohwinCours #1 : Créer un bloc, mise en page d'un texte. - Page 2 Ek6Q4zO

Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 1499707412-gaiaparty500par200
merci Chance.  :heart:
Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 UMv9SMk

Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 1470598459-award
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. - Page 2 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. - Page 2 EmptyLun 6 Nov - 17:39

@Jade Oh c'est bizarre, ça m'étais jamais arrivé ! Je suis contente que tu aies réussis quand même et je te laisse donc faire la div intérieure encore :neko5:

@Chance bientôt prof <3

@☯️ Undead Je vote Juh Présidente Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 610716569
Parfait pour le codage ! Les bordures à droite et à gauche j'avais demandé 1px dashed mais c'est pas grave j'ai rien vu :neko17:

En attendant le Cours #2, et comme je vois que vous vous débrouillez à merveille, je vous donne quelques exercices autonomes à faire :neko9:

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. - Page 2 29VnchE
Merci Nolwenn ♥
Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 Hl03vzZ
Revenir en haut Aller en bas
Allen
Pingouin de Madagascar
Pingouin de Madagascar
Allen
Messages : 434
Date d'inscription : 15/07/2016

Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 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. - Page 2 EmptyMar 7 Nov - 20:35

Whaou c'est super ce tuto! Louve a du être heureuse depuis le temps Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 610716569


Dernière édition par Allen le Dim 12 Nov - 13:31, é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. - Page 2 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. - Page 2 EmptyMar 7 Nov - 21:34

@Arya : j'ai encore beaucoup à apprendre xDD d'ailleurs j'ai fini le premier exo, et les nouveaux me tentent bien, attends-toi à me revoir dans la semaine Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 610716569

EDIT 23:11 : j'ai craqué DD:
J'ai besoin d'apprendre à centrer mes textes, là ça fait moche :neko17:
(pour le titre, j'ai centré avec un padding mais ça dépend de la taille du titre, du coup c'est moyen ;-; )
Ensuite, j'ai rajouté des "margin" parce qu'avec padding ça ne marchait pas et @Gaïa m'avait envoyé hier ce shéma qui, a-t-elle dit, serait mon meilleur ami. Du coup j'ai tenté et ça a fonctionné :DD
Honnêtement, je suis assez contente de ma fiche, elle est basique mais j'en suis fièèreuuh c'est ma première :kokoro:

edit le 08/11 à 16h00 : j'ai réussi à center les textes 8D
je vais essayer de custom les typos maintenant

Fiche RP:
 

Code:
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet"><div style="width:550px;height:550px;background-color:#B4B2AE;border-right:1px #5F5E5D solid; border-left:1px #5F5E5D solid; border-top:1px #5F5E5D solid; border-bottom:1px #5F5E5D solid;"><div style="font-family: 'Playfair Display', serif;color:#E24A37;font-size:50px;padding-top:20px;text-align: center;opacity:0.8;">Titre du RP ici</div>
<div style="width:450px;height:20px;background-color:#5F5E5D;color:#F2EEEA;opacity:0.6;margin-left:50px;margin-top:10px;margin-right:50px;padding:5px;text-align: center;">Ft. [ton nom] & [ton/tes partenaire(s)]</div><div style="width:500px;height:350px;background-color:#F2EEEA;color:#5F5E5D;opacity:0.5;margin-left:25px;margin-right:25px;margin-top:20px;padding:5px;overflow:auto;text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales efficitur fringilla. Praesent dictum accumsan bibendum. Sed cursus laoreet enim eu dictum. Donec euismod blandit quam vel ornare. Duis posuere sapien sagittis ante egestas, a cursus nisi lobortis. Sed eu volutpat ipsum. Duis vel erat vulputate, egestas lorem a, faucibus eros. Phasellus lobortis nec massa id imperdiet.

Donec ut arcu id neque vehicula eleifend. Donec eleifend quam eget cursus porta. Fusce vitae rhoncus elit. Ut quam ex, viverra mattis lectus ut, rutrum hendrerit nisl. Suspendisse ultrices lacinia ligula, vitae ultricies ex consectetur quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur pellentesque venenatis elit auctor pharetra. Pellentesque vitae augue nec nibh dignissim mattis. Fusce pellentesque ultricies odio id sollicitudin. In condimentum neque quis mauris vulputate condimentum. Sed in mollis nisi. Duis at purus neque. Sed ac massa sit amet tortor cursus pharetra eu aliquet nibh. Nullam vehicula nisi sed eros bibendum, ut accumsan mauris volutpat. Proin finibus leo in urna porta, in ultrices massa vestibulum.

Aliquam vel elementum augue, ut maximus tortor. Nulla ut finibus mauris. Pellentesque in lectus ex. Nunc molestie est sed diam dapibus, vitae lobortis eros tristique. Morbi mattis, nisl eu vestibulum egestas, ex lorem viverra tortor, ut fringilla odio massa ac lorem. Maecenas vitae est tellus. Sed semper lacus non odio volutpat placerat elementum eu velit. Aliquam molestie libero ac velit imperdiet aliquam. Fusce ante odio, pharetra eu ornare et, eleifend eu lacus. Vivamus lobortis euismod dictum. Ut blandit consectetur volutpat. Duis auctor rutrum mi quis aliquet. Mauris placerat, elit et bibendum sodales, metus ligula tempor enim, consectetur mattis urna ante quis tortor. Sed eget arcu ac tellus accumsan ornare. Duis semper, tortor quis semper condimentum, lacus velit accumsan ligula, vitae lacinia dui justo ac nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Ut sed semper neque. Etiam sagittis efficitur erat, a semper elit sagittis eu. Phasellus nec libero a orci molestie molestie vitae vel ante. Nam non vestibulum magna, ut laoreet dui. Phasellus eu hendrerit dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque pellentesque sodales. Morbi ac ultrices nisi. Pellentesque arcu magna, molestie in eleifend quis, tempor at ipsum. Nulla facilisi. Integer laoreet, neque id facilisis scelerisque, nisl enim dictum lacus, elementum tempor nulla nunc non sapien. Donec accumsan leo eu lectus dapibus, vel egestas mauris consectetur.

Nulla laoreet turpis vitae interdum viverra. Quisque vitae sapien nec eros gravida gravida et at nunc. Nunc eu ex odio. Nam eget quam et arcu posuere mattis rhoncus eget quam. Ut cursus ante at hendrerit elementum. Maecenas quis turpis consequat, dignissim purus at, facilisis sapien. Etiam arcu ante, viverra sed laoreet a, interdum et leo. Ut mi nisl, consectetur nec purus at, blandit tempor dolor. Nunc iaculis lacinia odio, in viverra libero pellentesque non. Suspendisse finibus lacus nisl, eget rutrum orci viverra et.</div><div style="width:550px;height:20px;background-color:#E87162;color:#5F5E5D;margin-top:30px;opacity:0.8;text-align: center;padding-top:4px;">Ceci est un texte. Je sais que ça n'était pas évident à deviner, c'est pour ça que je le dis.</div></div>


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

Kit by Undead, la plus belle :heart:

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

Spoiler:
 


Dernière édition par Chance le Ven 10 Nov - 20:10, édité 1 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. - Page 2 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. - Page 2 EmptyMer 8 Nov - 23:20

@Gaïa Oooh j'avais pas vu ton message ! Et nous on peut pas t'observer ? :onicry:

@Chance OOOOH MAGNIFIQUEEE ! :qoobeelove:
Un génie Chance, t'es trop forte c'est vraiment trop beau ! Je suis contente que mon tutp serve un peu, avec l'aide de Gaïa, c'est vrai que je n'avais pas encore expliqué les margin désolée :neko10:
J'ai hate de voir avec les textes personnalisées ! :neko9:



Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 29VnchE
Merci Nolwenn ♥
Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 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. - Page 2 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. - Page 2 EmptyJeu 9 Nov - 16:23

Merci beaucoup @Arya :neko9:
Pas de problème pour les margin, c'est normal de ne pas avoir eu le temps de nous en parler, c'est juste que comme j'étais déter j'ai approfondi le sujet dans mon coin :sisi:
Pour les textes, je verrai si j'y reviens parce que j'ai un peu la flemme j'avoue x)
Ce soir je vais essayer de faire l'autre exercice huhu, je te montrerai le résultat Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 4159918501


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

Kit by Undead, la plus belle :heart:

Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 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. - Page 2 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. - Page 2 EmptySam 11 Nov - 8:24

Super @Chance j'ai hâte de voir ce que mon élève dévoué va nous pondre :onilove:



Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 29VnchE
Merci Nolwenn ♥
Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 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. - Page 2 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. - Page 2 EmptyVen 24 Nov - 20:15

@Arya : j'ai enfin finiiii :onilove:
Désolée pour le délai, j'avais un peu oublié xD
Du coup j'ai tryhard hier et aujourd'hui :3

Je suis pas super contente du résultat mais c'est toujours mieux que rien Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 2786783446




Ma Présentation


« petite citation »









« Passeport sous-marin »


• Ton prénom : réponse
• Ton âge : réponse
• Fille, garçon ou autre ? réponse
• Localisation : réponse
• Aimerais-tu un parrain ? réponse




image_rond


« Questionnaire de Proust »


1. Le principal trait de mon caractère ?
Réponse ici.
2. La qualité que je préfère chez un homme ?
Réponse ici.
3. La qualité que je préfère chez une femme ?
Réponse ici.
4. Ce que j'apprécie le plus chez mes amis ?
Réponse ici.
5. Mon principal défaut ?
Réponse ici.
6. Mon occupation préférée ?
Réponse ici.
7. Mon rêve de bonheur ?
Réponse ici.
8. Quel serait mon plus grand malheur ?
Réponse ici.
9. Ce que je voudrais être ?
Réponse ici.
10. Le pays où je désirerais vivre ?
Réponse ici.
11. La couleur que je préfère ?
Réponse ici.
12. La fleur que j'aime ?
Réponse ici.
13. L'oiseau que je préfère ?
Réponse ici.
14. Mes auteurs favoris en prose ?
Réponse ici.
15. Mes poètes préférés ?
Réponse ici.
16. Mes héros favoris dans la fiction ?
Réponse ici.
17. Mes héroïnes favorites dans la fiction ?
Réponse ici.
18. Mes compositeurs préférés ?
Réponse ici.
19. Mes peintres favoris ?
Réponse ici.
20. Mes héros dans la vie réelle ?
Réponse ici.
21. Mes héroïnes dans l'histoire ?
Réponse ici.
22. Mes noms favoris ?
Réponse ici.
23. Ce que je déteste par-dessus tout ?
Réponse ici.
24. Personnages historiques que je méprise le plus ?
Réponse ici.
25. Le fait militaire que j'estime le plus ?
Réponse ici.
26. La réforme que j'estime le plus ?
Réponse ici.
27. Le don de la nature que je voudrais avoir ?
Réponse ici.
28. Comment j'aimerais mourir ?
Réponse ici.
29. État d'esprit actuel ?
Réponse ici.
30. Fautes qui m'inspirent le plus d'indulgence ?
Réponse ici.
31. Ma devise ?
Réponse ici.



Code par @Chance sur Ocean Home.



Code:
<link href="https://fonts.googleapis.com/css?family=Cardo|Dancing+Script" rel="stylesheet">
<div style="width:600px; height:570px; background-color:#F0F2EB; border-top:3px #D4EE5E solid; border-bottom:3px #D4EE5E solid; border-right:1px #D4EE5E solid; border-left:1px #D4EE5E solid; color:#000; font-size: 12px">

<div style="font-family: 'Cardo', serif; color:#FF4242;font-size:42px;margin-top:4px; padding-bottom:-9px; text-align: center;">Ma Présentation</div>

<div style="font-family: 'Dancing Script', cursive; color:#000;font-size:20px;text-align: center; margin-top:-23px;">« petite citation »</div>

<table>
<tr>
<td>
<div style="width:300px; height:140px; background-color: #F0F2EB; margin-left:10px; border-left:1px #D4EE5E dashed; border-right:1px #D4EE5E dashed; border-top:1px #D4EE5E dashed; border-bottom:1px #D4EE5E dashed; margin-top:-100px;">
<div style="font-family: 'Cardo', serif; color:#FF4242;font-size:25px; text-align: center; margin-top:-10px;">« Passeport sous-marin »</div>

<div style="width:280px; height:110px; padding-left:5px; margin-top:-23px; overflow:auto;">[b]• Ton prénom : [/b]réponse
[b]• Ton âge : [/b]réponse
[b]• Fille, garçon ou autre ? [/b]réponse
[b]• Localisation : [/b]réponse
[b]• Aimerais-tu un parrain ? [/b]réponse
</div>
</div>

</td>
<td>
<img src="http://image.noelshack.com/fichiers/2017/47/5/1511548724-150par150.png" style="height:150px; width:150px; border-radius:75px; margin-left:75px; margin-top:-140px; border-right:1px #D4EE5E solid; border-left:1px #D4EE5E solid; border-top:1px #D4EE5E solid; border-bottom:1px #D4EE5E solid;" alt="image_rond" />
</td>
</tr>
</table>

<div style="width:560px; height:210px; background-color: #F0F2EB; margin-left:10px; border-left:1px #D4EE5E dashed; border-right:1px #D4EE5E dashed; border-top:1px #D4EE5E dashed; border-bottom:1px #D4EE5E dashed; margin-top:-15px;">
<div style="font-family: 'Cardo', serif; color:#FF4242;font-size:25px; text-align: center; margin-top:-10px; div-align:center;">« Questionnaire de Proust »</div>

<div style="width:540px; height:170px; padding-left:5px; margin-top:-28px; overflow:auto;">[b]1. Le principal trait de mon caractère ?[/b]
Réponse ici.
[b]2. La qualité que je préfère chez un homme ?[/b]
Réponse ici.
[b]3. La qualité que je préfère chez une femme ?[/b]
Réponse ici.
[b]4. Ce que j'apprécie le plus chez mes amis ?[/b]
Réponse ici.
[b]5. Mon principal défaut ?[/b]
Réponse ici.
[b]6. Mon occupation préférée ?[/b]
Réponse ici.
[b]7. Mon rêve de bonheur ?[/b]
Réponse ici.
[b]8. Quel serait mon plus grand malheur ?[/b]
Réponse ici.
[b]9. Ce que je voudrais être ?[/b]
Réponse ici.
[b]10. Le pays où je désirerais vivre ?[/b]
Réponse ici.
[b]11. La couleur que je préfère ?[/b]
Réponse ici.
[b]12. La fleur que j'aime ?[/b]
Réponse ici.
[b]13. L'oiseau que je préfère ?[/b]
Réponse ici.
[b]14. Mes auteurs favoris en prose ?[/b]
Réponse ici.
[b]15. Mes poètes préférés ?[/b]
Réponse ici.
[b]16. Mes héros favoris dans la fiction ?[/b]
Réponse ici.
[b]17. Mes héroïnes favorites dans la fiction ?[/b]
Réponse ici.
[b]18. Mes compositeurs préférés ?[/b]
Réponse ici.
[b]19. Mes peintres favoris ?[/b]
Réponse ici.
[b]20. Mes héros dans la vie réelle ?[/b]
Réponse ici.
[b]21. Mes héroïnes dans l'histoire ?[/b]
Réponse ici.
[b]22. Mes noms favoris ?[/b]
Réponse ici.
[b]23. Ce que je déteste par-dessus tout ?[/b]
Réponse ici.
[b]24. Personnages historiques que je méprise le plus ?[/b]
Réponse ici.
[b]25. Le fait militaire que j'estime le plus ?[/b]
Réponse ici.
[b]26. La réforme que j'estime le plus ?[/b]
Réponse ici.
[b]27. Le don de la nature que je voudrais avoir ?[/b]
Réponse ici.
[b]28. Comment j'aimerais mourir ?[/b]
Réponse ici.
[b]29. État d'esprit actuel ?[/b]
Réponse ici.
[b]30. Fautes qui m'inspirent le plus d'indulgence ?[/b]
Réponse ici.
[b]31. Ma devise ?[/b]
Réponse ici.
</div>

</div>
<div style="color:#969696; font-size:10px; text-align:center;">Code par @Chance sur Ocean Home.</div>
</div>

EDIT : pourquoi c'est tout moche quand je le poste ? :onicry: J'avais pourtant tout bien aligné, prévisualisé plein de fois, et là toutes les zones se mettent les unes sur les autres DDD:
Même la police bug...
J'essaierai de regarder après le repas :onicry:

EDIT 2 : en fait c'est bon, ça bug juste quand c'est sous spoiler... Chelou DD:


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

Kit by Undead, la plus belle :heart:

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

Spoiler:
 


Dernière édition par Chance le Sam 25 Nov - 19:32, édité 2 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. - Page 2 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. - Page 2 EmptySam 25 Nov - 18:00

C'est touuuut beau ! Je suis éblouie qu'avec seulement mon cours t'as réussi à faire un truc super ! Je pense d'ailleurs que pour l'image tu t'es débrouillée seule et bravo :onilove:

Par contre je vois un léger oubli ici du ";" après border-bottom car du coup on ne le voit pas sur ton image D:
Code:
border-bottom:1px #D4EE5E solid//ICI//" alt="image_rond" />



Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 29VnchE
Merci Nolwenn ♥
Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 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. - Page 2 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. - Page 2 EmptySam 25 Nov - 19:17

Merci @Arya !
Pour le tableau @Gaïa m'avait expliqué il y a quelques temps, et pour l'image ronde j'ai cherché sur google Razz

Oupsi je corrige ça tout de suite, merci ! :onilove:


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

Kit by Undead, la plus belle :heart:

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

Spoiler:
 
Revenir en haut Aller en bas
Sheryl
Lion des mers
Lion des mers
Sheryl
Messages : 784
Date d'inscription : 01/09/2016

Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 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. - Page 2 EmptySam 8 Sep - 2:01

Je sais bien que tu n’es plus très présente Arya, mais je tenais très sincèrement à te remercier pour ce magnifique tutoriel, je le tente dès demaaaain ! :neko9: Un énorme coeur sur toi, je t’aime



Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 Bzsmtzy
Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 Ir36
Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 1468532108-sheryl
Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 1467493764-anniv-sherylCours #1 : Créer un bloc, mise en page d'un texte. - Page 2 1467233902-ami-des-poissonsCours #1 : Créer un bloc, mise en page d'un texte. - Page 2 1467230065-stamp-template-by-kenchoCours #1 : Créer un bloc, mise en page d'un texte. - Page 2 QDmXvn4Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 XBnjO09
Revenir en haut Aller en bas
Contenu sponsorisé



Cours #1 : Créer un bloc, mise en page d'un texte. - Page 2 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. - Page 2 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 2 sur 2Aller à la page : Précédent  1, 2
 Sujets similaires
-
» menus noel en video du cours de cuisine de vendredi dernier
» cours de couture
» Suivez des cours de couture gratuitement sur le Net !
» mise sous Curatelle ou sous tutelle
» mise en competition logement

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