avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2639
Rose des sables Designer
Voir le profil de l'utilisateur
Je t'en prie :)


avatar
Sexe : Féminin
Date d'inscription : 13/01/2018
Messages : 409
Fidèle au poste !
Voir le profil de l'utilisateur
Bonjour, voila ce que j'ai fais ! =)
Visuel :

HTML :

CSS :
avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3720
Modo Maxi-Code master - Ex-admin gangsta du Québec
Voir le profil de l'utilisateur
Hello miss !

Premièrement bravo ton code, il est propre, c'est agréable à lire =)

J'ai trouver une petite erreur de frappe dans ton CSS nommé #fiche. Tu à mis "width: 500px:" Or c'est un point-virgule qu'il faut mettre à la fin. Du coup la largeur de la fiche ne fonctionnais pas ni la hauteur ;)

Ensuit, je voie que tu à utiliser les h1,h2 pour les titres c'est très bien =) Par contre, le h1 est normalement une balise unique. Ce qui veux dire qu'elle ne peux ce retrouver qu'une seul fois sur une page web. Or forum actif utilise déjà cette balise pour le titre du forum du coup il serait préférable d'utiliser un h2 pour le titre de ta fiche et un h3 pour le sous-titre. Mais bon ça c'est un truck qu'on remarque avec le temps =)

Par contre j'ai encore un petit souci avec tes balises titres. Comme dit plus haut Forum actif utilise ses dites balises dans ces codes. Si tu met ton CSS tel quel sur ton forum les titres de ton forum vont prendre le même style que ta fiche. Pour remédier à ceci facilement on pourrais utiliser les sélecteurs : #fiche h2{Ton CSS}. Le fait de mettre le nom de la DIV général de ta fiche devant ton h2 viens dire " Les h2 qui ce trouve à l'intérieur de la DIV nommé fiche aurons ce style". On viens donc sélectionner une balise en particulier.

Pour plus d'information sur les sélecteurs il y a ses deux tutoriels : Tuto 1 / Tuto 2

Pour ton sous-titre je ne crois pas que la DIV qui l'entour soit vraiment utile. Tu aurais pue mettre ton ton CSS sur ton H2 (qui va devenir un h3)

Finalement, tu utilise des ID (Identifiant unique). Je crois que tu à bien compris leur fonctionnement. On retrouve tes ID une seul fois dans ton code ce qui est bien. Or il s'agit d'un code de fiche. Donc ce code sera fort probablement répété sur une même page. Ce qui veux dire que ces ID seront aussi répétés. Ce qui est théoriquement mal. Il faudrait donc préféré les class.

Voilà ! C'est tout ce que j'ai à dire ^^ De façon général c'est très bien ! Les petit détail que j'ai soulever sont des erreurs qu'on ne pense pas forcément au début. Continue comme ça =D



avatar
Sexe : Féminin
Date d'inscription : 13/01/2018
Messages : 409
Fidèle au poste !
Voir le profil de l'utilisateur
Merci beaucoup pour ta réponse Batty !
Ah c'est donc pour cela que ce n'était pas la bonne hauteur ! J'ai du mettre un < br/ > à la fin parce que ça faisait tassé justement, le cadre avec le crédit était complètement collé au bas de ma fiche ... Mais je comprends mieux pourquoi maintenant, je prendrais soin de relire mes codes.

Je ne savais pas que ForumActif utilisait les balises h1, h2 ..., il ne me semble pas encore l'avoir lu dans un tutoriel, mais maintenant c'est noté au moins. =) Du coup lors du prochain exercice que je ferais, je vais essayer d'appliquer les sélecteurs comme dans ton exemple. :P

C'est vrai que je me suis un peu compliqué la vie avec cette div pour le sous titre, j'aurais du regrouper tout ça, ça aurait fait plus propre mdr ^^

Du coup, si je comprends bien pour les ID, on peut les utiliser uniquement pour coder une page d'accueil ? (et peut être un QEEL ?)

En tout cas merci pour ton message et tes explications, ça me motive vraiment à coder et à en apprendre d'avantage c'est super ! =)
avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3720
Modo Maxi-Code master - Ex-admin gangsta du Québec
Voir le profil de l'utilisateur
En effet les ID sont plus utiliser dans les PA et le QEEL. à la limite dans une fiche règlement et/ou présentation qui serais alors répété une seul fois dans la page. Les ID serons surtout utile dans des page HTML ou la structure d'un site.

Je suis heureuse que tu soit motivée ^^ reviens nous voir si tu fait un autre exorcise ! Ou même si tu fait un code de ton crus ça fait toujours plaisir de vous aider !



avatar
Sexe : Féminin
Date d'inscription : 13/01/2018
Messages : 409
Fidèle au poste !
Voir le profil de l'utilisateur
D'accord merci beaucoup. =)
Je vais faire un deuxième exercice et ensuite je ferais un code par moi même. :P
avatar
Sexe : Féminin
Date d'inscription : 02/02/2018
Messages : 74
Newbie
Voir le profil de l'utilisateur
Bonjour o/
J'ai voulu tenter l'exercice aussi, vu que ça avait l'air d'être le plus à ma portée des 3 faciles owo (ça doit être plein de bêtises but here I go o/)
J'ai l'impression que ça aurait été plus simple en utilisant des class mais je ne sais pas comment renvoyer au CSS en le postant sur un forum du coup j'ai tout mis dans le HTML

avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3720
Modo Maxi-Code master - Ex-admin gangsta du Québec
Voir le profil de l'utilisateur
Hello miss !
Je suis heureuse que tu est essayer cet exercice ! Il faut bien commander quelque part ;) Et puis il n'y à pas tellement de grosses erreurs dans ton code =P Puis je suis là pour rectifier le tire ;) Alors premièrement :

@Wonder a écrit:J'ai l'impression que ça aurait été plus simple en utilisant des class mais je ne sais pas comment renvoyer au CSS en le postant sur un forum

Plus facile pour toi je ne sais pas, mais éventuellement ce serais plus facile pour les membre qui utiliserons tes codes =) Il est toujours préférable de séparé la structure (le HTML) du style (le CSS). Or pour une fiche (surtout celle de RP et/ou pub) il n'est pas forcément possible de mettre le CSS dans la feuille de style comme une PA.

Du coup on peux crée notre propre "feuille de style" grâce à la balise style. Elle ce place avant le HTML de la fiche et elle accueillera ton CSS. Par contre pour que ça fonctionne il ne faut pas de saut de ligne à l'intérieur de la balise. Un peux comme quant on utilise style="" dans une balise. Ça nous donnerais quelque chose comme ça :

Code:
<style>.fiche{width:420px; height:600px; background:#000000;}.titre{font-family: SignPainter; color:#ffffff; text-align:center; font-size:50px;}</style>

Ensuite, je voie que tu à utiliser les h1, h2 pour les titres c'est très bien =) Par contre, le h1 est normalement une balise unique. Ce qui veux dire qu'elle ne peux ce retrouver qu'une seul fois sur une page web. Or forum actif utilise déjà cette balise pour le titre du forum du coup il serait préférable d'utiliser un h2 pour le titre de ta fiche et un h3 pour le sous-titre. Mais bon ça c'est un truck qu'on remarque avec le temps =)

Pour finir dans la structure tu à fait une petite erreur dans ton lien :

Code:
<a href:"http://epicode.bbactif.com/" target:"_blank";>Wonder/ Epicode</a>

Pour qu'il fonction il faut mettre le symbole égale et non deux point après le href.

Pour finir dans ton CSS tu utilise la typographie "SignPainter" or lorsqu'on utilise une police spécial il faut la lier à notre code car ce n'est pas tout le monde qui on cette police dans leur ordinateur. Tu peux utilise https://fonts.google.com/ pour trouver des typo différente. Lorsque tu clique sur le plus il ajoute la typo dans ta liste de font sélectionné. En bas à droite tu a un rectangle noir dans lequel tu trouvera le lien à ajouté à ta fiche et le nom de la typo a ajputé a ton CSS.

.... bon ok j'ai menti x) une dernière petite chose dans ton CSS tu à :

Code:
margin-top:50px; margin-left:40px; margin-right:40px;

Tu aurais pue diminuer le nombre de code dans ta fiche en utilisent la super propriété margin: 50px 40px 0px; Dans l'ordre on à la valeur pour la marge en haut, une seul variable pour celle de droite et de gauche et une troisième pour la marge du bas. Les possibilité d'écriture sont nombreuse :

margin: 10px 20px; (top/bottom et right/left)
margin : 10px 20px 30px; (top, right/left et bottom)
margin : 10px 20px 30px 40px; (top, right, bottm, left)

Voilà ! c'est tout ce que j'ai a dire x) si tu a des question n'hésite pas =)



avatar
Sexe : Féminin
Date d'inscription : 02/02/2018
Messages : 74
Newbie
Voir le profil de l'utilisateur
Bonsoir
Merci beaucoup d'avoir pris le temps de lire et de répondre, déjà, des keurs ♥️

Super pour la balise style, un nouveau monde s'ouvre à moi ;D Je l'avais vue sur des LS mais ne sachant pas l'utiliser j'ai préféré rester à ce que je comprenais tbh. Je n'ai plus de questions particulières maintenant, merci pour tes corrections et j'intégrerai tout ça dans mes futurs codes (notamment les h1 h2 et la magie du margin, effectivement ça allège) pour les rendre plus lisibles, les exercices ne perdent rien pour attendre Super héro
avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3720
Modo Maxi-Code master - Ex-admin gangsta du Québec
Voir le profil de l'utilisateur
Haha génial ! J'ai déjà hâte de te revoir dans la section ;)



avatar
Sexe : Féminin
Date d'inscription : 20/01/2018
Messages : 1878
Mini-Graphiste
Voir le profil de l'utilisateur
Coucou Coeur 2
Première tentative de codage. Et c'était loooong.. J'ai l'impression d'avoir jeté au hasard des morceaux de lignes puis bricoler autour pour que ça fonctionne xD
J'ai demandé de l'aide pour l'overflow -j'ai galérer comme pas possible sur ça- et également pour le lien à la fin, je ne connaissais pas la commande. Donc bon, pas vraimeeent fait seule à 100 % o/

Le HTML :

Code:
<div style='background-color:#000000; height:600px; width: 440px; border-top-left-radius:10px;border-top-right-radius:10px;'> <div id="Titre"> Titre du rp </div>
<div id='Carre'> <div id="Ecris"> Tum mihi inter probes non iracundiae non disputando contentiones si probarem dissentias inter dicas eius mihi se ille mihi non quid nullo Triari praesertim enim enim tum contentiones pertinaces iracundiae tum esset si mihi philosophia ob quo diceret vituperandae videri reprehensiones perdiscere contentiones pertinaces in a vituperandae iracundiae dissentientium rem Quam eius maledicta philosophia perdiscere indignae maledicta perdiscere me reprehensiones diceret in a non quo si mihi rem in probes quid tum sunt diceret concertationesque eius cum sunt ludus concertationesque praesertim dissentias concertationesque sunt probarem Quam esse esset potest eius potest illa reprehensiones concertationesque sunt eius quid prohiberet probarem ut.Tum mihi inter probes non iracundiae non disputando contentiones si probarem dissentias inter dicas eius mihi se ille mihi non quid nullo Triari praesertim enim enim tum contentiones pertinaces iracundiae tum esset si mihi philosophia ob quo diceret vituperandae videri reprehensiones perdiscere contentiones pertinaces in a vituperandae iracundiae dissentientium rem Quam eius maledicta philosophia perdiscere indignae maledicta perdiscere me reprehensiones diceret in a non quo si mihi rem in probes quid tum sunt diceret concertationesque eius cum sunt ludus concertationesque praesertim dissentias concertationesque sunt probarem Quam esse esset potest eius potest illa reprehensiones concertationesque sunt eius quid prohiberet probarem ut. sset si mihi philosophia ob quo diceret vituperandae videri reprehensiones perdiscere contentiones pertinaces in a vituperandae iracundiae dissentientium rem Quam eius maledicta philosophia perdiscere indignae maledicta perdiscere me reprehensiones diceret in a non quo si mihi rem in probes quid tum sunt diceret concertationesque eius cum sunt ludus concertationesque praes. Quam eius maledicta philosophia perdiscere indignae maledicta perdiscere me reprehensiones diceret in a non quo si mihi rem in probes quid tum sunt diceret concertationesque eius cum sunt ludus concertationesque praesertim dissentias concertationesque sunt probarem Quam esse esset potest eius potest -bouh- illa reprehensiones concertationesque sunt eius quid prohiberet probarem ut. sset si mihi philosophia ob quo diceret vituperandae videri reprehensiones perdiscere contentiones pertinaces in a vituperandae iracundiae dissentientium rem Quam eius maledicta philosophia perdiscere indignae maledicta perdiscere me reprehensiones diceret in a non quo si mihi rem in probes quid tum sunt diceret conc! </div> </div> <br> <div id="Credit">Feat Alek + d'autres <a href="https://www.youtube.com/watch?v=fnAYxUqT8Uk"> www <a> </div> <div>  </div>
le CSS :

Code:
#Titre{
color:#ffffff;
font-family:"Annisa";
font-size:35px;
text-align:center;
}

#Carre{
background-color:#CECECE;
height:500px;
width: 400px;
margin:auto;
overflow:auto;
}

#Ecris{
text-align:left;
font-size:15px;
color:#000000;
margin:auto;
padding:15px;
}
 
#Credit{
color:#898787;
text-align:center;
font-size:10px;
}

Puis, pour voir : là


Cadooow:

Milou :

Chhaya :

Nox:

Naütilus :

Milou :

Cheshire Cat :
avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1548
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
Coucou ! Je viens donner quelques conseils - rien d'exhaustif bien sûr, vu que je n'ai pas le niveau qu'ont certains ici, mais si toutefois mes remarques peuvent t'aider, c'est le principal <3-

Tu t'en es plutôt bien sortie je te rassure, si le code était mauvais, le rendu ne serait pas potable xD Toutefois il y a des choses que tu peux revoir dans ton code et qui te permettront de coder plus efficacement les prochaines fois. <3

Une première question déjà : pourquoi n'as-tu pas attribué de class à la div principale ? En soit ce n'est pas faux, mais pour avoir un code plus propre, il vaut mieux éviter d'intégrer le style directement dans le HTML ; d'autant qu'il est évident que tu sais séparer CSS et HTML, puisque tu l'as fait avec les div auxquelles tu as attribué des id.

En soit, c'est mieux d'avoir :

Code:
<div class="content_fiche">Je suis un contenu</div>

et donc dans le CSS

Code:
.content_fiche {
propriété: valeur;
}

- Ensuite, l'ID ne s'utilise pas dans ce contexte. En effet, elle est usitée pour mettre en forme des éléments qui n’apparaissent qu'une seule fois. Dans le cadre d'une fiche RP, on préférera les class car le code sera utilisé plusieurs fois sur la même page. Je te redirige vers ce tuto qui explique bien mieux que moi, et qui reprend un peu ce que j'ai globalement souligné.  

- Je vois que tu as entouré ton titre avec une div, ce qui n'est pas faux ; mais tu peux utiliser les balises h1, h2, h3, h4, h5 et h6 (plus le chiffre est petit, plus le titre est important). Les balises de ce type sont spécifiques aux titres donc on respecte la sémantique et en plus, on aère notre code !

Code:
<h2>Titre</h2>

et pour mettre en forme un titre, on utilise les sélecteurs (sinon, on vise tous les titres de FA et c'est mal XD). Comment ? et bien, on sélectionne le block qui contient notre fiche, en l’occurrence, .content_fiche, en reprenant mon exemple plus haut, et on sélectionne le titre comme ceci :

Code:
.content_fiche h2 {
propriété: valeur;
}

Ensuite, comme dit sur discord, tu n'avais pas besoin d'entourer ton texte avec ta div "ecris", tu pouvais simplement mettre les propriétés et valeurs de mise en forme directement sur la div "carré" :3 Mieux encore ! Tu pouvais remplacer la div "carré" par la balise p, spécifique aux paragraphes !

Code:
<p>Ton texte de la mort qui tue</p>

et pour le mettre en forme, comme le carré blanc sur ta fiche ? Avec la même méthode que les balises titres. :3

Code:
.content_fiche p {
propriété: valeur;
}

Mais en soit, la div n'est pas fausse du tout, ne t'en fais pas. :'3

Une dernière chose, car je vois que ta fiche RP n'est pas centrée, tu peux rajouter

Code:
margin: auto;

dans le CSS de ton block contenant pour le centrer convenablement.

Voilà ! Je ne me suis pas attardée sur les termes très techniques pour ne pas tout de suite t'assommer de jargon, l'important c'est d'y aller à ton rythme. Coeur 2
Si tu veux en savoir plus sur les balises dont je t'ai parlées, n'hésite pas à lire ce tuto très complet parce qu'à première vue, je sais que ces balises peuvent faire peur ahah xD

Voilà voilà, j'espère que mes remarques te serviront !
Des bisous. Coeur 2



Merci Milou !  
Spoiler:

Merci xMia et Alek !  


Merci Funeral !  

Merci Naütilus. ! :'D

Merci Reine des Ténèbres !  Coeur 2

Merci Eskimo. !  Coeur


Merci Milou ! Coeur 2
avatar
Sexe : Féminin
Date d'inscription : 20/01/2018
Messages : 1878
Mini-Graphiste
Voir le profil de l'utilisateur
Sorry, je n'avais pas vu que tu m'avais répondus x')
Merci pour toutes ses précieuses indications bien détaillés.. Hé tout compris **

Pour tout dire, j'ai mis style au départ parce que je n'avais pas compris comment fonctionner précisément le class. Ce qui est pourtant identique aux id, le # en moins.
Pareil pour le "p" ou les titres "h1, 2, 3" : je voyais comment les insérer au HTML et à quoi il servait. Mais je ne savais pas comment les mettre dans mon CSS. Donc, je ne les ai pas mis et j'ai foutu du "id" absolument partout xD

Merci Arte pour ces indications plz
Ca va bien me servir pour mon prochaine exo.. Les tutos aussi :3


Cadooow:

Milou :

Chhaya :

Nox:

Naütilus :

Milou :

Cheshire Cat :
avatar
Sexe : Féminin
Date d'inscription : 09/07/2018
Messages : 29
Newbie
Voir le profil de l'utilisateur
Bonjour ^^

Je me lance avec cet exercice :) Voici mon résultat :
Je débute alors autant commencer avec celui qui m'a semblé être le plus simple :)

Code:
<div style="background: black; width: 500px; height: 500px; border-radius:20px; marging-top:20px; padding-top:5px;">
  <h1 style="color:white; text-align:center;"> Le titre </h1>
  <h2 style="background-color:grey; text-align:center; color:white; width:300px; height:30px; border-radius:20px; margin-top:5px; margin-left:100px; margin-right:100px;"> Le titre n°2</h2>
  <div style="color:black;background-color:grey; width:450px; height:270px; text-align:justify; border-radius:20px;margin-left:20px; margin-right:10px; padding-top:10px; padding-left:5px; margin:auto; overflow:auto;"> appelez-vous ce que je te veux pour époux. Pacifiques à leurs places respectives. Signifie nuit de la terre ? Lancé sur la grève aux écueils. Exactement ce que nous n'étions plus qu'à en parler. Baronnet d'ancienne noblesse, il en use : cette condition est parfois bien lourd à porter, assumait des airs d'apparition. Répondez-moi, du moins divulgué l'influence dépressive de la peur ? Attablé depuis le matin par le jardinier.
    Planté de travers, en lui, faisant patte de velours. Puante et pleine de tact, de façon que tout le travail social, au profit de la bonté des dieux, le curé ne le lui prêterais pas... Dimanche, alors, dissimuler le bateau et en même temps avec anxiété une nouvelle issue. Sentons-nous assez ce qu'on aura tué dans une bataille livrée contre son gré, en se saisissant du gland de ma queue, et qui demeure à cinquante pas. Malheureuse politique de courtisan, de flatteur, risqua l'épithète vieille pour donner plus de nouveauté à sa pensée en raisonnement logique. Convaincu que toute tête qui s'apprêtait, qui la suivirent avait failli être assassiné ? Quatre-vingt-deux ans, alors il devra trouver ça tout seul, ça m'inquiète un peu ?
    Meurs à temps : voilà ce qu'a dit de faire attention à une masse informe. Jolie matinée que tu m'accordes un répit ? Tenir la vérité vraie ; c'est-à-dire une mèche de cheveux derrière l'oreille, les éclats de rire. Rigoureusement parlant, puisque rien ne se produisît. Professeur, dis-je, de comprendre où il voulait en venir, à cause du sang des hommes et les femmes publiques. Sortons poser nos pieds sur la terre malheureuse, pleine de prudence : car l'amour est en phase avec la vie, changer le monde. Dix ans de précision et de rigueur.
    Beauté, jeunesse, comme si en s'approchant ; maintenant que j'ai pu en oublier quelques circonstances. Avoir commis tous les jours qui suivirent, son nom, et se montrait, affairée, toujours haletante, à cause que nous sommes, de tenir tête au colosse. Trompés par les feux croisés des armes enterrées. Mon précepteur aurait pu être une </div>
  <div style="background-color:grey;margin-top:20px; width:450px;text-align:center; border-radius:20px; height:30px; margin-left:20px; padding-top:10px; "> Le noms des personnage + click </div>
  <div style="color:white; text-align:center; font-size:12; padding-top:10px;"> @ Credit </div>
  </div>
avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1140
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
Eh me voilà ! Reine m'avait dit de faire cet exercice donc voici mon résultat ! :3

Code:
<div class="CaRoLiNe_Bloc"><h1>Titre de la fiche</h1><h2>Titre secondaire</h2><p>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.</p><div class="CaRoLiNe_Credits"> Codage de la fiche par (Name) pour <a href="http://www.epicode-entraide.com/">Epicode</a></div><link href="https://fonts.googleapis.com/css?family=Alegreya|Sacramento" rel="stylesheet"><style>.CaRoLiNe_Bloc{background:black;height:600px;width:540px;border:10px double grey;margin:0 auto;text-align:center;position:center}.CaRoLiNe_Bloc h1{color:white;text-align:center;height:20px;font-family:'Sacramento',cursive}.CaRoLiNe_Bloc h2{color:white;background:grey;width:450px;margin-left:45px;border-radius:15px;font-family:'Sacramento',cursive}.CaRoLiNe_Bloc p{color:white;background:grey;width:450px;margin-left:45px;border-radius:15px;height:400px;overflow:auto;font-family:'Alegreya',serif}.CaRoLiNe_Credits{color:white;background:grey;width:450px;margin-left:45px;border-radius:15px;font-family:'Alegreya',serif}.CaRoLiNe_Credits a{text-decoration:none;color:white}</style>


Spoiler:

Titre de la fiche

Titre secondaire

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.

Codage de la fiche par (Name) pour Epicode


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2639
Rose des sables Designer
Voir le profil de l'utilisateur
Coucou, @Nemy.

Cette fiche est en effet très bonne pour débuter.
Ton code est plutôt bon et efficace, je ne vois pas de propriétés superflues. Tu as utilisé des balises sémantiques en plus, bravo :3

Ma remarque concernera essentiellement les marges.
Pour ton premier bloc, tu as mis marging avec G à la fin donc la marge ne fonctionne pas.

Sinon il y a deux façons générales pour noter les marges.

> Les marges individuelles :
- margin-top
- margin-right
- margin-bottom
- margin-left
Quand on veut utiliser les marges individuelles l'ordre n'est pas important et bien sûr si la marge d'un côté est la valeur par défaut tu n'as pas à spécifier la marge de ce côté.

> Le raccourci :
- margin
Si tu veux utiliser le raccourci, tu n'as plus le droit de mettre les marges individuelles, de plus ici l'ordre est important.

Le raccourci se présente selon le nombre de valeurs fournies de 4 façons :
- margin : top right bottom left;
remarque que la direction suit celle des aiguilles d'une montre.

- margin : top right/left bottom;
donc on a trois valeurs, la marge du haut et du bas sont différentes mais la marge à droit est égale à la marge à gauche.

- margin : top/bottom right/left;
ici margin-top = margin bottom et margin-left = margin-right. et donc on a deux valeurs.

- margin : valeur;
ici la marge est égale de chaque côté.

Pour centrer un bloc qui a une largeur définie, on utilise une marge horizontale "auto" donc la marge droite et gauche doivent prendre la valeur auto.

Si je prends par exemple ton bloc h2, tu as :

Code:
h2 {margin-top:5px; margin-left:100px; margin-right:100px;}

Qu'on va remplacer par :
Code:
margin: 5px auto 0;

De même pour le bloc div qui suit h2, tu s mis une marge droite et une marge gauche et un margin auto ce qui est contradictoire.

Pour le click je vois que tu n'as pas mis de lien. La balise lien s'écrit en balise double "a" (a veut pour anchor en anglais)
Code:
<a href="le_lien"> titre du lien </a>

Finalement pour le crédit, tu as mis un font-size: 12; sans unité.
la taille d'une font se met en pixel (px), en point (pt) ou en em en reponsive.
Ici j'imagine que tu voulais dire 12px

Voilà c'est tout, j'espère que c'est claire et à bientôt sur un autre exercice :3

@Caroline : j'ai répondu sur le sujet du cours :3


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