epicode
Epicode, c'est sept ans d'entraide dans la création de forums. Vous y trouverez une gamme complète de libre-service, allant du simple avatar jusqu'à l'index codé intégralement. Venez fouiller pour trouver votre bonheur ! Si jamais vous n'y parvenez pas, vous pourrez toujours commander ! Nos graphistes et codeurs sont là pour vous, pour répondre à vos demandes et vous aider dans la conception de vos forums.

Epicode, c'est une offre complète allant jusqu'au conseil sur forum. Envie d'avis sur votre contexte, d'une relecture ? Nos conseillers se feront une joie de vous aider dans ces tâches difficiles, vous permettant d'avoir un forum parfait jusqu'à la virgule près.

Pour finir, Epicode c'est aussi des animations, des jeux, des concours, des défis, avec des animateurs haut en couleurs prêt à vous embarquer dans de folles aventures. Mais surtout, Epicode, c'est avant tout une ambiance chaleureuse, un staff disponible et un forum actif ! Rejoignez-nous !
entre donc,

Page 1 sur 2 1, 2  Suivant
Aller en bas
# [Facile] Exercice 3 - Fiche - Izusa - le Lun 18 Avr 2016 - 13:37
Hey ! Si je poste ici c'est pour vous proposer un schéma  d'une fiche plus ou moins complexe. Voici le schéma !

[Facile] Exercice 3 - Fiche - Izusa Sans_t10



Explication :
Base sur page noire puis création de trois surface grises. Ensuite il faut un titre, un titre secondaire, un bloc description avec overflow puis en bas, Un mot  qui, quand on clique, nous dirige vers une autre page. En gros, un mot lien.

Bonne chance à vous ! :D
Izusa
Accro au forum
Date d'inscription : 16/02/2016
Messages : 1007
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Lun 18 Avr 2016 - 13:41
Coucou c:

J'aimerais préciser que le niveau requis pour cette fiche est assez facile (ça n'en a pas l'air hein)

En tous cas merci d'avoir posté ça sur Epicode Coeur 2
Cheshire Cat
Vieille admin - Briseuse de nuques
Date d'inscription : 15/12/2012
Messages : 4815
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Ven 13 Mai 2016 - 19:22
Étant du même avis que Cheshire, je me permet donc de modifier le titre de ton schéma.
Azalée
Modo - Waifu du staff
Date d'inscription : 26/12/2013
Messages : 3907


C'est le moment de sortir ton appareil photo et de participer à  notre concours macro !
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Jeu 24 Aoû 2017 - 18:11
Si quelqu'un sait où se trouve un éventuel tutoriel sur les codes h1 h2 ect, je le supplie de m'en envoyer un lien par mp ou dans sa réponse, merci! cette remarque vous aura fait comprendre que oui, e sais que c'est pas la joie dans mon code... disons que y'a mieux écrit, quoi ;) J'en suis bien consciente, mais si vous pouvez m'aider en m'expliquant ce qui va pas, j'érigerais une statue de cookie en votre nom!
Mes excuses aux autres membres du staff: j'avais la flemme de mettreplus de lien mais je vous adore tous et toutes!


Dorea McH
Membre timide
Date d'inscription : 08/01/2017
Messages : 178
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Jeu 24 Aoû 2017 - 20:38
Hello !! @Dorea McH :)

Je suis pas bien certaine d'avoir compris ta question à propos des H1/H2 .. tu parles des balises ?
Dans ce cas là, je crois pas qu'il existe de tutoriel, mais c'est très simple, c'est des balises de titre; H pour hiérarchie en fait ! ;)
Le H1 c'est pour écrire les titres, soit les élements d'importance niveau 1. Ensuite, le sous titre avec le H2 etc etc... jusqu'au niveau 6 ! :)

Sinan, j'ai rien à redire sur ton code, c'est tout bon ! :D
Jamy
Very Important People
Date d'inscription : 31/10/2013
Messages : 2698
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Jeu 24 Aoû 2017 - 21:00
Merci de tes éclaircicement. En fait je voulais savoir comment on peut modifier leurs valeurs. Par exemple, un titre noir, de taille 32px et de police Tahoma, et un sous titre blanc de taille 24px ;) je ne sais pas faire ça
Dorea McH
Membre timide
Date d'inscription : 08/01/2017
Messages : 178
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Mar 5 Sep 2017 - 13:27
Coucou !
Pour modifier le texte, on utilise soit :
- font-size pour modifier la taille de texte
- font-family pour définir la famille de police que tu utilises, à savoir son nom
- color pour modifier la couleur du texte.

Pour que deux texte soient de couleur et de taille différente, il faut tout simplement ouvrir deux balises différentes :)
Cheshire Cat
Vieille admin - Briseuse de nuques
Date d'inscription : 15/12/2012
Messages : 4815
Invité
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Dim 1 Oct 2017 - 19:43
Voici ce que j'ai fais :) ça m'a permit de voir que j'y connaissais pas grand chose en codage XD


Code:
<div style="background-color:#000000;width:600px;height:800px;"><h1 style="font-family: Georgia;color: #ffffff;font-size: 50px;text-align:center;font-weight: bold;padding-top:30px;">Titre</h1><h2 style="font-family: Georgia;color: #ffffff;font-size:30px;text-align:center;background-color: #616565;border-radius: 10px;margin-left: 150px;margin-right: 150px;font-weight: bold;margin-top: 100px;height:50px;">Titre Secondaire</h2><div style="background-color:#616565;color: #ffffff;font-size:30px;font-family: Georgia;height:200px;border-radius: 10px;margin-left: 130px;margin-right: 130px;margin-top:80px;padding-left: 10px;padding-top: 25px;text-align: center;font-weight: bold;overflow: auto;">Description</div>
 <div style="background-color: #616565;color: #ffffff;font-size:15px;font-family: Georgia;height:30px;border-radius: 10px;margin-left: 130px;margin-right: 130px;margin-top:200px;padding-top : 5px;text-align: center;font-weight: bold;"><a href="http://epicode.variousforum.com/" target="_blank">©️ Astriones</a></div></div>
Anonymous
Invité
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Jeu 12 Oct 2017 - 20:46
Coucou @Astriones,

Très bon travail !

Voici quelques petites remarques:

Code:
margin-left: 130px;margin-right: 130px;

Tu peux éviter ces grandes marges en définissant une largeur au contenu, et mettre un margin auto pour centrer ton bloc. Pour ton exemple :

Code:
width: 340px; margin: auto;

( J'ai mis 340 puisque la largeur de ta fiche est de 600, tes marges 130x2 = 260 donc 600- 260 = 340 )

Je passe à la fin ici :

Code:
<div style="background-color: #616565;color: #ffffff;font-size:15px;font-family: Georgia;height:30px;border-radius: 10px;margin-left: 130px;margin-right: 130px;margin-top:200px;padding-top : 5px;text-align: center;font-weight: bold;"><a href="http://epicode.variousforum.com/" target="_blank">©️️ Astriones</a></div>

J'ai remarqué que tu as mis du CSS relative au texte dans la balise div, mais tu as surement remarqué que ça ne style pas ton texte. C'est normal, puisque le texte est un lien, ce CSS doit aller plutôt dans la balise du lien a (anchor)

Voilà c'est tout :3

Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Sam 14 Oct 2017 - 1:41
J'me permets de tester moi aussi o/ !
J'suis pas experte mais bon, j'espère que c'est réussi [Facile] Exercice 3 - Fiche - Izusa 2691722282

Code:
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet"><div class="lefond"> <div class="titre">Title here</div><div class="subtitle"><span>Subtitle goes here (and you can write whatever you want babe ~)</span></div><div class="texteici">Accedat huc suavitas quaedam oportet sermonum atque morum, haudquaquam mediocre condimentum amicitiae. Tristitia autem et in omni re severitas habet illa quidem gravitatem, sed amicitia remissior esse debet et liberior et dulcior et ad omnem comitatem facilitatemque proclivior.Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset.Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque Fortuna plerumque dissidentes, quarum si altera defuisset, ad perfectam non venerat summitatem.Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt, cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde iactitant possidere, ignorantes profecto maiores suos, per quos ita magnitudo Romana porrigitur, non divitiis eluxisse sed per bella saevissima, nec opibus nec victu nec indumentorum vilitate gregariis militibus discrepantes opposita cuncta superasse virtute.Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini praepositum celerari speciem perurgebant quam autem non indicabant denique etiam idem ad usque discrimen vitae vexatus nihil fateri conpulsus est.</div><div class="subtitlebas"><span>Important stuff goes <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">right here</a>.</span></div></div>
<div class="endcred"><a href="http://dark-and-cold.forumactif.com/">♕Myrddin</a></div>

<style>.endcred a {text-align:center;font-size:11px;color:darkgrey;margin-top:-15px;}.lefond{width:450px; height:700px; background-color: black; margin:0 auto;}.titre{margin-bottom: 50px;color:white; font-size:35px; font-family:'Kaushan Script'; text-align:center; position:relative; top:20px;}.subtitle{width:400px; height:100px; background-color:darkgrey; margin:0 auto; margin-top:15px; text-align:center; border-radius:20px 20px;}.subtitle span{color:white; font-size:25px; font-family:'Roboto Condensed'; font-style:italic; text-transform:uppercase; position:relative; top:25px;}.texteici{line-height: 13px;color:white; font-size:12px; padding:15px; position:relative; top:15px; width:380px; height:350px; text-align:justify; background-color:darkgrey; margin:0 auto; margin-top:15px; border-radius:50px 50px; overflow:auto;}.subtitlebas{width:400px; height:50px; background-color:darkgrey; margin:0 auto; margin-top:55px; text-align:center; border-radius:20px 20px;}.subtitlebas span{color:white; font-size:15px; font-family:'Times New Roman'; position:relative; top:15px;}.texteici::-webkit-scrollbar{width: 2px; height: 10px;}.texteici::-webkit-scrollbar-thumb:vertical{height: 30px; -webkit-border-radius: 10px; background-color: white;}.texteici::-webkit-scrollbar-thumb:horizontal{height: 30px; -webkit-border-radius: 10px; background-color: darkgrey;}</style>

[Facile] Exercice 3 - Fiche - Izusa 3775839356
Myrddin
Admin et designer
Date d'inscription : 24/03/2016
Messages : 2598
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Mer 18 Oct 2017 - 19:20
Bonsoir @Myrddin,

C'est une belle fiche que nous a faite, bravo ♡

Ton HTML est parfait, j'ai juste quelques remarques sur le CSS.

Code:
.endcred {
 color: darkgrey;
 }
Le crédit contient un lien plutôt qu'un texte donc pour appliquer une couleur à la description, il faut sélectionner le lien ".endcred a"

Attention au CSS lié à la scrollbar qui est général, et donc sera appliqué à toute la page et non seulement à ta fiche. Il faut plutôt mettre ".texteici::-webkit-scrollbar" comme sélecteur.

Voilà c'est tout [Facile] Exercice 3 - Fiche - Izusa 3775839356
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Jeu 19 Oct 2017 - 11:41
Bonjour plz bon ba du coup, je me lance aussi. J'espère pas avoir fait trop de bêtise. Merci en tout cas pour cet exercice [Facile] Exercice 3 - Fiche - Izusa 3775839356 .

Code:
 <div style=" background: black; width: 500px; height: 450px">
    <h1 style="color: white; text-align: center;font-family: 'Courgette';"> Il était une fois </h1>
         <h2 style="color: white; text-align: center; background: grey; border-radius: 20px; margin-left:100px;margin-right:100px; margin-top: 5px; font-family: 'Courgette'; font-size: 28px; ">Une histoire</h2>
    <div style="background: grey; width: 300px; height: 150px; margin-left: 100px; margin-right: 20px; margin-top:25px; border-radius: 20px; padding-top: 50px; font-size: 25px; overflow: auto;text-align:center; color: white; font-weight: bold; font-family: 'Courgette'"> Description </div>
   <div style="background: grey; width: 300px; height: 50px; margin-top: 25px;margin-left: 100px; color: white; border-radius: 20px; text-align:center; padding-top:10px; font-weight: bold;font-family: 'Courgette';"> blabla <a href="http://epicode.variousforum.com/" target "_blank" style="color:white";>Lien</a>
  </div>
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
Belonne
Membre timide
Date d'inscription : 17/10/2017
Messages : 152
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Jeu 19 Oct 2017 - 12:57
@Belonne Bonjour,
Oui tu as fais plein de bêtises /PAF
Je plaisante, ton code est bon, bravo !
Voici néanmoins quelques petites remarques.

D'abord, tu as oublié de fermer la div parente :) il manque donc un /div à la fin avant le lien de la police.
En parlant de lien, il te manque un petit = après target (target="_blank")

Ma dernière remarque concerne le titre h1. Ce n'est pas nécessaire mais c'est une information en plus qui peut te servir après. D'ailleurs j'ai fait la même remarque à Astriones un peu plus haut.
Donc plutôt que de mettre.
Code:
margin-left: 100px; margin-right: 100px;
Tu peux définir une largeur au contenu, et mettre un margin auto pour centrer ton bloc.
Code:
width: 300px; margin: auto;
D'ailleurs ça te permet d'être sûre que ton titre et le bloc description en bas ont la même largeur.
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Jeu 19 Oct 2017 - 13:18
D'accord, je note tout ça du coup, merci pour les corrections et les conseils [Facile] Exercice 3 - Fiche - Izusa 3488708190
Belonne
Membre timide
Date d'inscription : 17/10/2017
Messages : 152
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Jeu 19 Oct 2017 - 13:22
Ahw merci pour la petite correction ! C'est modifié du coup, histoire que ça reste clair ♥️ !
J'avais pas pensé au
.endcred a {
}
En effet ><' ! Rahw, j'vais le retenir maintenant xD !
Myrddin
Admin et designer
Date d'inscription : 24/03/2016
Messages : 2598


Alors comme ça on aime coder ? On aime le design ? Postule pour devenir designer !

[Facile] Exercice 3 - Fiche - Izusa Qqlf
Merci Azumii et Auryana pour les avatars et Azumii pour la signature [Facile] Exercice 3 - Fiche - Izusa 3775839356

[Facile] Exercice 3 - Fiche - Izusa If7y
Merci Aed [Facile] Exercice 3 - Fiche - Izusa 3775839356 ♥️
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Jeu 19 Oct 2017 - 13:46
Je vous en prie ♡
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Jeu 23 Nov 2017 - 20:16
De tous les exercices proposés, c'est celui qui me parait être le plus facile, alors j'ai tenté quelque chose. Voila mon code :
Code:
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Patrick+Hand" rel="stylesheet">  <div style="background-color:black; padding-top:60px; padding-bottom:30px; text-align:center; color:white;"><div style="font-family: 'Indie Flower'; font-size:60px;">Blblbl voila le titre</div><div style="background-color:darkgrey; padding:10px; font-size:35px; font-family: 'Indie Flower'; width:320px; margin:auto; margin-top:15px; border-radius:40px;">et puis ici c'est le titre secondaire</div><div style="background-color:darkgrey; padding:30px; font-size:16px; font-family: 'Patrick Hand'; width:350px; height:350px; overflow:auto; margin:auto; margin-top:40px; margin-bottom:25px; border-radius:40px; text-align:justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus lectus, dignissim a fermentum vel, dictum id magna. Praesent varius, mi sit amet laoreet gravida, augue eros faucibus urna, hendrerit euismod quam mauris nec purus. Donec sed bibendum tortor. Donec sed luctus mi. Quisque porta felis dui. Pellentesque risus nibh, consequat ac luctus at, tempor tincidunt sem. Vivamus id pulvinar felis.

Suspendisse sagittis porttitor lobortis. Donec bibendum semper eros eu volutpat. Praesent efficitur nulla dolor, vel rutrum mauris cursus ac. Aliquam maximus varius tincidunt. Fusce vel leo ex. Etiam faucibus dolor non nulla finibus ultricies. Morbi volutpat imperdiet lacus, non varius felis luctus et. Proin sed elementum felis. Donec consectetur facilisis sem, pharetra gravida purus porttitor sit amet. Nullam sollicitudin ultricies ullamcorper. Etiam at est in lectus iaculis scelerisque. Cras fringilla porta massa, in ornare metus porta eget. Aliquam placerat eu libero quis aliquam.

Mauris cursus, dui vel efficitur tempor, diam magna mollis purus, nec tincidunt erat massa sit amet dolor. Ut quis volutpat ligula. Donec in porttitor nibh. Curabitur consequat hendrerit diam quis rhoncus. Donec eu fringilla sem. Aliquam lacinia sed dui sit amet sollicitudin. Nullam finibus leo ac gravida imperdiet. Mauris ac hendrerit justo. Nunc lorem ligula, efficitur vel nisl quis, consequat tincidunt augue. Ut egestas diam quis lorem laoreet laoreet. Sed feugiat massa ut sapien pulvinar venenatis. Nunc at nulla velit.</div><div style="background-color:darkgrey; padding:5px; font-size:13px; font-family: 'Verdana'; width:250px; margin:auto; border-radius:20px;"><a href="http://epicode.variousforum.com/" target="_blank" style="color:grey;">Tigrlion | Epicode</a></div></div>
Tigrlion
Fidèle au poste !
Date d'inscription : 22/11/2017
Messages : 303
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Ven 24 Nov 2017 - 18:10
Coucou miaouss, @Tigrlion

Ton code est correct, félicitations [Facile] Exercice 3 - Fiche - Izusa 3775839356
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Ven 24 Nov 2017 - 19:55
Woooh, c'est vrai ? Y a rien à en redire ?? Brrr faut pas me dire ça moi, je vais être beaucoup trop fière et heureuse ! dance
Merci ! Je fonce tenter de m'attaquer à plus compliqué alors !
Tigrlion
Fidèle au poste !
Date d'inscription : 22/11/2017
Messages : 303
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Sam 25 Nov 2017 - 0:07
Tu as tout à fait le droit d'être fière puisque c'est tout bon x)
Techniquement ton code est correct mais si tu veux vraiment mon avis, la seule petite chose que je peux te dire et ça reste mon avis : tu aurais pu utiliser des balises sémantiques plutôt que des div. C'est à dire h pour les titres, p pour le paragraphe etc.
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Sam 25 Nov 2017 - 0:40
J'ai un peu de mal avec ces balises là, j'obtiens pas ce que je veux quand j’essaie de les utiliser, je dois pas faire comme il faut... Ça change quoi concrètement par rapport aux div ? Je suppose qu'il y a un tuto sur ça, je vais essayer de me renseigner... Merci !
Tigrlion
Fidèle au poste !
Date d'inscription : 22/11/2017
Messages : 303
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Sam 25 Nov 2017 - 1:26
Disons qu'on remarque moins la différence si on utilise le CSS.
Par défaut la balise h1 par exemple affichera un titre de grande taille et en gras. la balise p génère un espace avant et après le paragraphe. Par contre par défaut la div nous affichera du texte normal à taille régulière et donc sans CSS on ne saura différencier un titre d'un paragraphe.
De plus les balise sémantiques décrivent leur contenu. Pour une personne qui va lire ton code ou toi-même si tu veux le modifier un peu plus tard, tu peux facilement repérer un titre, un sous-titre, une citation ou un paragraphe etc. Avec des div ça sera le bazar et toi ou la personne qui lit ton code va galérer pour s'y retrouver.
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Lun 29 Jan 2018 - 23:16
Motivation quand tu nous tiens [Facile] Exercice 3 - Fiche - Izusa 3775839356
Voici donc mon troisième exercice...

HTML:
Code:
<div id="presentation">
  <div id="titre">Titre</div>
  <div id="titre2">Second titre</div>
  <p id="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat magna at aliquam bibendum. Maecenas tempor semper libero. Vivamus id dapibus sem, non aliquet justo. Quisque tellus lectus, sagittis quis nibh quis, tristique faucibus libero. Aliquam quis odio tortor. Nunc vitae massa consequat, consequat quam at, venenatis turpis. Nulla augue felis, porttitor in aliquet eu, mattis quis ipsum.

Aenean cursus porta arcu, vitae elementum dui accumsan vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis molestie semper enim, a accumsan velit sodales ac. Cras at cursus nunc, et tristique neque. Maecenas quis nunc ullamcorper, porttitor ex sit amet, aliquam turpis. Nullam risus ligula, aliquam nec felis nec, aliquam consequat lectus. Aliquam libero dui, tincidunt nec consectetur non, porttitor quis augue. Phasellus nec nisi a purus molestie ultricies ac id lacus. Maecenas id nibh semper, vehicula mauris vitae, ultrices erat.</p>
  <p id="copyright">by meiywa pour <a href="http://epicode.variousforum.com">epicode</a></p>
</div>
CSS:
Code:
#presentation {
  background-color: black;
  border-radius: 30px;
  height: 600px;
  width: 400px;
  margin: auto;
}

#titre {
  text-align: center;
  font-size: 70px;
  color: white;
}

#titre2 {
  background-color: grey;
  opcity: 0.5;
  text-align: center;
  width: 200px;
  margin: auto;
  padding: 5px;
  border-radius: 5px;
  margin-top: 50px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#description {
  text-align: justify;
  margin: auto;
  color: white;
  width: 300px;
  background-color: grey;
  padding: 10px;
  height: 250px;
  overflow: auto;
  margin-top: 50px;
  font-size: 15px;
  line-height: 12px;
}

#copyright {
  text-align: center;
  color: white;
  font-size: 10px;
  margin-top: 50px
}

#copyright a {
  color: white;
  font-size: 10px;
  margin-top: 50px
}

Et toujours l'aperçu du code [Facile] Exercice 3 - Fiche - Izusa 1066248963
Meiywa
Newbie
Date d'inscription : 19/01/2018
Messages : 39
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Mer 31 Jan 2018 - 14:36
@Meiywa

Bonjour,

Ton rendu est joli et fidèle au modèle de l'exercice, félicitations.

La première chose qu'on remarque c'est l'utilisation des id tout au long du code. Les sélecteurs CSS ont une certaine hiérarchie de spécificité. Sache que le sélecteur le moins spécifique est la balise, puis la classe et finalement l'id. Donc Le CSS de l'id peut écraser celui de la classe et le CSS de la classe peut écraser celui de la balise. C'est pourquoi les classes sont réutilisables autant de fois que nécessaire par contre les id sont très spécifiques et donc uniques et ne doivent figurer que sur un seul élément.

Dans la logique où ton code sera utiliser sur un forum, le code d'une fiche ou d'un message rp sera réutiliser dans les messages. Or l'id est un élément unique qui ne devrait figurer d'une seule fois sur une page HTML. C'est pourquoi, il sera préférable d'utiliser directement le nom des balises si c'est possible et sinon des classes plutôt.

Dans la même optique, tu aurais pu éviter de nommer description et utiliser simplement la balise p de cette façon : .presentation p {...}

Dans titre2 je vois la propriété opacity qui est mal orthographiée, tu as oublié un a.

Concernant les marges tu as :

Code:
#description {
  margin: auto;
  margin-top: 50px;
}

La propriété margin est supposée être un raccourci des 4 marges. Ici tu as la marge droite et gauche en auto, la marge haute à 50px et la marge basse à 0. Le raccourci ressemblera donc à ça :

Code:
#description {
  margin: 50px auto 0;
}

Ma dernière remarque concerne la propriété line-height. Je suis contente de voir que tu connais cette propriété par contre à 12px je trouve que ton texte est très encombré, j'aurais mis 16px ou 18px au moins. Ta font est à 15px donc une hauteur inférieure à 15px risque de rendre la lecture assez difficile et le rendu inesthétique. ça peut être acceptable pour un titre ou une citation mais pas tout le paragraphe si tu vois ce que je veux dire.

Sinon il manque juste un point virgule à la fin dans copyright / copyright a. Et juste au cas où tu ne connais pas, tu peux enlever le soulignement des liens via la propriété text-decoration : none;

En espérant que ça t'aide à progresser, bon courage !
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
# Re: [Facile] Exercice 3 - Fiche - Izusa - le Ven 2 Fév 2018 - 15:06
Grand merci pour toutes ses précisions :D Je vais tenté d'appliquer tout ça au prochain ego (a)
Meiywa
Newbie
Date d'inscription : 19/01/2018
Messages : 39
Contenu sponsorisé
Revenir en haut
Page 1 sur 2 1, 2  Suivant
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum