Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3074
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Classe N°8 | Pizile Mar 8 Jan - 17:22
Bonsoir @Pizi, et bienvenue dans ta classe :3

Je mets en rappel ton formulaire d'inscription :
Spoiler:
Tes connaissances en codage : Je sais personnaliser des codes aussi bien en html qu'en css ainsi que les templates. Je suis capable également de reproduire des codes m'intéressant en utilisant les outils de développement pour m'inspirer.
Ton but : J'aimerai être capable de pouvoir gérer un forum de manière autonome (design + codage) mais également pouvoir réaliser des commandes de design.
Type de formation : [ ] codage général, [X] pour forumactif uniquement
Motivation : Après avoir eu à attendre 1 an pour obtenir la réalisation d'une commande de design complet, j'ai vraiment envie de pouvoir être autonome et de me sentir à l'aise pour à la fois réaliser les idées que j'ai en tête mais également aider les autres à monter leurs projets. J'ai déjà commencé en autodidacte mais je me suis relativement retrouvée bloquée du coup je me dit qu'apprendre pas à pas ne serait pas plus mal.
Disponibilité : Je suis disponible tous les jours de la semaine moins les soirs et les week-end.
Expérience en codage : Cela fait plusieurs années que je bidouille des codes mais ayant cessé d'administrer des forums j'ai fait une longue pause. J'ai repris le codage surtout l'année dernière lorsque nous avons souhaité monter un projet de forum rpg avec des membres de l'ancien forum où je jouais. Toutefois la motivation des uns et des autres est tombée avec le temps et je me retrouve toute seule.

Voici mes deux dernières créations :

Sonam :





Esteria :






Un ami me créait les bannières (je ne suis pas calée en graphisme) et à partir de cette base, je créais le reste).

Je travaille toujours actuellement sur le projet d'Esteria (pour continuer à apprendre) sur mon forum test. Avant d'être bloquée je travaillais sur le codage du profil et des messages dans les sujets. Comme tu le verras ici, j'étais bloquée sur le décalage à gauche d'une partie de ma zone et je ne parvenais pas à le mettre correctement. Je m'en suis arrêtée là avant de me mettre en pause en novembre pour préparer un concours dans la fonction publique. Je reprends avec la nouvelle année mais cette fois je souhaite plus comprendre ce que je fais plutôt que d'y aller à la bidouille.

J'ai commencé à coder les designs ci-dessus à l'aide du cours de Never Utopia sur le codage de design. Toutefois il ne parle que de l'index et ne va pas plus loin (sujets, messages, profils, etc...).  

Je me suis alors basée ensuite sur ce forum pour travailler le code avec l'accord de Sterenn sa créatrice qui m'a mis les doigts dans les prises pour reprendre le codage. Comme elle a appris en autodidacte en regardant les codes d'autres forums pour reproduire, je me suis dit que j'allais y arriver mais ce sont les templates qui me posent le plus de difficulté.


L'anglais et toi : Je n'ai aucun problème avec l'anglais.
Autres : J'ai hâte de pouvoir collaborer avec toi.

Alors, tu as dis pouvoir personnaliser et reproduire des codes. Sur tes créations je vois bien le résultat du tuto de NU et du bidouillage des LS. Es-tu capable de créer un code à partir d'un schéma par exemple sans te reposer sur un codage existant ? Aussi simple que soit-il, une petite fiche rp par exemple.
Quand tu travailles sur les templates, est-ce que tu arrives à identifier les différentes variables de chaque partie ?

Pour bien démarrer, je te demanderai de répondre au mieux à ce petit questionnaire pour évaluer tes bases en HTML:

Code:
[b]C'est quoi le HTML et à quoi ça sert [/b]
[b]Quel est la différence entre le HTML et le BBcode [/b]
[b]Quelle est la structure de base d'une page HTML[/b]
[b]A quoi sert le charset[/b]
[b]Comment écrire un commentaire en HTML[/b]
[b]Comment coder des titres[/b]
[b]Quel est le code nécessaire pour insérer une liste[/b]
[b]Comment insérer un tableau[/b]
[b]Qu'est ce que l'indentation[/b]
[b]Deux exemples de balises ouvrantes / fermantes[/b]
[b]Deux exemples de balises auto-fermantes[/b]
[b]Quelle est la différence entre div et span[/b]

N'hésite pas à citer d'autres balises que tu en connais qui ne figurent pas dans mon questionnaire si tu veux, le but étant de bien situer ton niveau :3

Profitons bien de cette nouvelle année pour apprendre ensemble




Spoiler:

Codée par Sun d'amour
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Mer 9 Jan - 4:27
Bonjour :)

Merci beaucoup de me prendre sous ton aile, c'est très gentil à toi.

Pour répondre à tes questions :

Es-tu capable de créer un code à partir d'un schéma par exemple sans te reposer sur un codage existant ?

J'avais un prof de codage sur un ancien forum appelé Zootopia (il n'était plus actif il y a un moment, je ne sais pas s'il existe toujours) qui me faisait faire mes exercices à partir de maquettes. Cela fait très longtemps que je n'en ai pas fait mais je pense que je peux le faire, oui.

Quand tu travailles sur les templates, est-ce que tu arrives à identifier les différentes variables de chaque partie ?

En fait je me repère grâce aux variables essentiellement pour effectuer mes modifications mais également grâce à la structure de boucle de ces derniers quand le code est trop long.

Le questionnaire :

C'est quoi le HTML et à quoi ça sert Le HTML est un langage informatique qui permet de mettre en forme le contenu d'une page web.
Quel est la différence entre le HTML et le BBcode Les balises du BBcode sont entre crochets alors que le HTML a un balisage en chevrons
Quelle est la structure de base d'une page HTML
Code:
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="description" content="">
  </head>
<body>
</body>
</html>

A quoi sert le charset il sert à définir un jeu de caractères. Les plus connus sont l'ASCII et l'Unicode.
Comment écrire un commentaire en HTML
Code:
<!-- commentaire -->
Comment coder des titres à l'aide des balises
Code:
<title> et <h1> <h2> etc...
Quel est le code nécessaire pour insérer une liste Pour les listes non-ordonnées, on utilisera les balises
Code:
<ul> et <li>
et pour les listes ordonnées les balises
Code:
<ol> et <li>

Exemple :

Une liste de courses :

  • pain

  • pommes

  • poires



Un classement :

  1. George

  2. Amandine

  3. Thomas



Comment insérer un tableau On insère un tableau grâce à la balise
Code:
<table>
Qu'est ce que l'indentation L'indentation c'est le fait de décaler ses lignes de code sur la gauche.

Par exemple :
Code:

<ul>
      <li>pain</li>
      <li>pommes</li>
      <li>poires</li>
</ul>

Cela permet d'avoir un code plus propre et plus lisible dans lequel il est facile de se repérer.

Deux exemples de balises ouvrantes / fermantes Balises ouvrantes :
Code:
<title> <h1> <head>
Balises fermantes :
Code:
</title></h1></head>
Deux exemples de balises auto-fermantes
Code:
<br /> <img /> <meta />
Quelle est la différence entre div et span le div permet d'agencer le contenu d'une page alors que le span permet d'associer un style à tout ou partie d'un texte.

Voili voilou good bonnet 2




Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3074
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: Classe N°8 | Pizile Mer 9 Jan - 8:33
Coucou :3

Alors commençons par le formulaire.
Je vois que tu as de bonnes bases quand même ce qui est super.

@Pizi a écrit:
C'est quoi le HTML et à quoi ça sert Le HTML est un langage informatique qui permet de mettre en forme le contenu d'une page web.

Attention, on ne définit jamais le HTML comme langage de mise en forme, ça c'est le travail du CSS. Le HTML est un langage informatique de balisage (vu qu'il utilise des balises) ou de description (les balises décrivent leur contenu), qui sert à structurer les pages web. Son but essentiel est de créer l'architecture ou la charpente d'une page web.
Donc il va nous mettre du texte noir sur blanc, des liens bleus soulignés (dégueulasses) etc.
Et à titre informatif : le HTML a été inventé en 1991 et est régulièrement mis à jour depuis, sa dernière version est le HTML5 qui est apparu en 2014.


@Pizi a écrit:Quel est la différence entre le HTML et le BBcode Les balises du BBcode sont entre crochets alors que le HTML a un balisage en chevrons

C'est bien la différence visuelle ou technique, bravo. Il en a d'autres par contre :
Le BBcode (Bulletin Board Code), bulletin board fait référence en anglais à forum de discussion. Le BBcode est un autre langage de balisage utilisé sur toutes sortes de forums. C'est un langage simplifié qui n'est pas standardisé. C'est à dire que les balises peuvent très bien changer d'un forum à un autre. Par exemple, sur FA pour cacher du contenu la balise est [ hide ] mais sur d'autres plateformes la balise est [ hidden ]. A la différence de HTML qui est standardisé par la W3C et donc universel. Une balise sera donc la même partout sur le net.

A savoir que le BBcode n'est pas que du HTML simplifié, c'est un langage qui sert plus pour la mise en forme des messages de façon simple. Donc il exerce en quelque sorte les fonctions du HTML et du CSS.

@Pizi a écrit:A quoi sert le charset il sert à définir un jeu de caractères. Les plus connus sont l'ASCII et l'Unicode.

Ce qui nous intéresse c'est surtout le UTF-8 (Universal Transformation Format qui est une forme de transformation de l'unicode.
A savoir que l'ASCII permet d'écrire en anglais et donc n'accepte pas les accents.

Pour le reste c'est parfait hormis les div et span qu'on verra un peu plus tard.
Et pour l'indentation c'est très bien, peu de gens savent ce que c'est. Attention par contre ton code est trop indenté. La règle universelle est d'indenter de deux espaces seulement par niveau.

Bon je pense que tu t'en sors plutôt bien c'est super. Si tu as des questions n'hésite pas.
Maintenant je veux voir du code pratique. Tu peux choisir un exercice de cette partie ici. Celui que tu veux, selon ton niveau, je te laisse libre choix. Je veux juste voir comment tu t'en sors.
Je voudrais que tu postes le résultat de l'exercice ici dans le cours pour qu'on le revoit ensemble.




Spoiler:

Codée par Sun d'amour
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Mer 9 Jan - 15:55
Coucou,

Je suis confrontée à une petite difficulté qui me fait un peu m’arracher les cheveux.

J’ai choisi de réaliser cet exercice
J’en suis là :

Code:

<link href="https://fonts.googleapis.com/css?family=Kristi" rel="stylesheet">
<style>.fond {background: url(https://i.imgur.com/vUqjSSv.png) no-repeat #6B6B7C; height: 700px; width: 500px;}.rptitre {align: left; margin-left: 25px; line-height:60px; font-family: Kristi; font-size: 60px; color: #EFCA76; height: 60px; width: auto;}.rpbox {align: left; margin-left: 10px; background: #ffffff; opacity: 0.5; width: 300px; height: 625px; overflow: auto; padding-left: 20px; padding-right: 10px; padding-top: 10px;}.textbox {font-family: Times New Roman; font-size: 12px; opacity: 1;}</style>
<div class="fond"><div class="rptitre">Titre du RP</div><div class="rpbox"><span class="textbox">Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.

Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.

Et quoniam apud eos ut in capite mundi morborum acerbitates celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum sospitale nequi amicum perferentem similia videat, additumque est cautionibus paucis remedium aliud satis validum, ut famulos percontatum missos quem ad modum valeant noti hac aegritudine colligati, non ante recipiant domum quam lavacro purgaverint corpus. ita etiam alienis oculis visa metuitur labes.

Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.

Haec igitur Epicuri non probo, inquam. De cetero vellem equidem aut ipse doctrinis fuisset instructior est enim, quod tibi ita videri necesse est, non satis politus iis artibus, quas qui tenent, eruditi appellantur aut ne deterruisset alios a studiis. quamquam te quidem video minime esse deterritum.

Vita est illis semper in fuga uxoresque mercenariae conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam et tabernaculum offert marito, post statum diem si id elegerit discessura, et incredibile est quo ardore apud eos in venerem uterque solvitur sexus.

Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina exultans ut in tuto iam locata mariti salute muneratam vehiculoque inpositam per regiae ianuas emisit in publicum, ut his inlecebris alios quoque ad indicanda proliceret paria vel maiora.

In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.</span>
</div></div>

Mais quand je rajoute color:#ffffff le texte soudain disparaît comme ça :
Code:

<link href="https://fonts.googleapis.com/css?family=Kristi" rel="stylesheet">
<style>.fond {background: url(https://i.imgur.com/vUqjSSv.png) no-repeat #6B6B7C; height: 700px; width: 500px;}.rptitre {align: left; margin-left: 25px; line-height:60px; font-family: Kristi; font-size: 60px; color: #EFCA76; height: 60px; width: auto;}.rpbox {align: left; margin-left: 10px; background: #ffffff; opacity: 0.5; width: 300px; height: 625px; overflow: auto; padding-left: 20px; padding-right: 10px; padding-top: 10px;}.textbox {font-family: Times New Roman; color:#ffffff; font-size: 12px; opacity: 1;}</style>
<div class="fond"><div class="rptitre">Titre du RP</div><div class="rpbox"><span class="textbox">Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.

Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.

Et quoniam apud eos ut in capite mundi morborum acerbitates celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum sospitale nequi amicum perferentem similia videat, additumque est cautionibus paucis remedium aliud satis validum, ut famulos percontatum missos quem ad modum valeant noti hac aegritudine colligati, non ante recipiant domum quam lavacro purgaverint corpus. ita etiam alienis oculis visa metuitur labes.

Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.

Haec igitur Epicuri non probo, inquam. De cetero vellem equidem aut ipse doctrinis fuisset instructior est enim, quod tibi ita videri necesse est, non satis politus iis artibus, quas qui tenent, eruditi appellantur aut ne deterruisset alios a studiis. quamquam te quidem video minime esse deterritum.

Vita est illis semper in fuga uxoresque mercenariae conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam et tabernaculum offert marito, post statum diem si id elegerit discessura, et incredibile est quo ardore apud eos in venerem uterque solvitur sexus.

Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina exultans ut in tuto iam locata mariti salute muneratam vehiculoque inpositam per regiae ianuas emisit in publicum, ut his inlecebris alios quoque ad indicanda proliceret paria vel maiora.

In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.</span>
</div></div>

Mais... mais... mais pourquoi?
J’ai essayé en mettant une opacity 1 ou avec le z-index nada... je désespère :(

Edit : bon là c’est encore pire le premier code ne fonctionne même pas ici alors que le texte apparaît sur mon forum test




Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3074
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: Classe N°8 | Pizile Mer 9 Jan - 19:50
Hello :3

J'ai une panne d’électricité donc pas de wifi ce soir, je te réponds donc vite fait avec le peu de batterie que j'ai encore sur mon tel.
Ah le codage est un peu désagréable à vérifier avec le tel x)

Bref, ton texte n'a pas disparu, si tu sélectionnes la zone avec la souris tu verras ton texte. Le truc c'est que tu as mis le background en blanc et puis le texte à l'intérieur en blanc aussi, logiquement si tu écris avec un stylo noir sur une feuille noire tu ne verras rien.
La propriété opacity présente un problème dans ce genre de schéma parce que la règle sera héritée par les enfants du bloc. Pour faire simple, ton bloc est en 0.5 d'opacité et du coup la span étant à l'intérieur de ce bloc, elle sera automatiquement à 0.5 aussi.
Si tu mets opacity: 1 dans la span, ça ne va pas corriger l'opacité héritée de 0.5 mais ça va juste dire qu'on veut avoir 1 ou 100% de l'opacité disponible. Et donc 100% de 0.5 c'est 0.5.
Autrement si je mets dans la span, opacity: 0.5 mon texte va se mettre à 0.5 ou 50% de l'opacité initialement héritée, il sera donc à une opacité de 0.25 en vrai.

Ici, le schéma veut qu'on écrive en blanc et donc pour que le texte soit lisible, on ne va pas toucher à l'opacité de tout le bloc, mais uniquement à celle de la couleur du background. Pour ça on utilise le système rgba et non le système hexadécimal pour la valeur de la couleur du background.
Le système hexadécimal (#XXXXX) ne permet pas de gérer l'opacité de la couleur.
Le système en RGBA (Red Green Blue Alpha) voulant dire Rouge Vert Bleu Alpha : Les valeurs du R/V/B permettront d'obtenir la couleur et le coefficient alpha lui va gérer l'opacité de celle-ci.
Le correspondant du blanc #FFF en RGB est (255,255,255) et on ajoute Alpha, l'opacité qu'on veut, ici 0.5 on aura donc:
Code:
color: rgba(255, 255, 255, 0.5);

Alors sur une page web, si tu mets 2 fois le même code avec des petites modifications, le navigateur va prendre le CSS qu'il veut du coup tu ne verras pas de différences. Il faut supprimer le code de ton message précédent pour voir le nouveau comme ça tu n'aura pas de conflit niveau CSS.
Bien sûr tu peux garder ce qui est dans les balises code, c'est surtout les fiches qu'il faut retirer. Assure toi de n'avoir d'une seule fiche active sur la page.




Spoiler:

Codée par Sun d'amour
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Jeu 10 Jan - 11:26
Coucou,

merci beaucoup ma sauveuse !!!
Tu m'as débloquée !! dance

Du coup voici le code terminé. Je n'ai juste pas su coder la scrollbar par contre :/ (je suis sous Firefox et il me semble qu'on ne peut pas les modifier sous ce navigateur )

Code:
<link href="https://fonts.googleapis.com/css?family=Kristi" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope" rel="stylesheet">
<style>.fond {background: url(https://i.imgur.com/vUqjSSv.png) no-repeat #6B6B7C; height: 700px; width: 500px;}.rptitre {align: left; margin-left: 25px; line-height:60px; font-family: Kristi; font-size: 60px; color: #EFCA76; width: auto;}.rpbox {align: left; margin-left: 10px; background: rgba(255, 255, 255, 0.5); width: 300px; height: 620px; overflow: auto; padding-left: 20px; padding-right: 5px; padding-top: 10px;}.textbox {font-family: Times New Roman; font-size: 12px; opacity: 1; color: #ffffff;}.illu {align: right; height: 388px; width: 190px; margin-left: 310px; margin-top: -690px; display: block; position: relative; z-index 3;}.pseudotitre {align: right; height: 20px; margin-left: 340px; margin-top: -50px; font-family: Annie use your telescope; font-size: 20px; color: #EFCA76; text-shadow: #000000 1px 1px, #000000 0px 1px, #000000 0px 0px, #000000 1px 0px;}.pseudobox {align: right; height: 310px; width: 150px; margin-left: 335px; margin-top: 20px;}.credit {text-align: center; font-family: Arial; color: #EFCA76; font-size: 9px; position: relative; z-index: 3; display: block; margin-top: -20px;}</style>
<div class="fond"><div class="rptitre">Titre du RP</div><div class="rpbox"><span class="textbox">Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.

Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.

Et quoniam apud eos ut in capite mundi morborum acerbitates celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum sospitale nequi amicum perferentem similia videat, additumque est cautionibus paucis remedium aliud satis validum, ut famulos percontatum missos quem ad modum valeant noti hac aegritudine colligati, non ante recipiant domum quam lavacro purgaverint corpus. ita etiam alienis oculis visa metuitur labes.

Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.

Haec igitur Epicuri non probo, inquam. De cetero vellem equidem aut ipse doctrinis fuisset instructior est enim, quod tibi ita videri necesse est, non satis politus iis artibus, quas qui tenent, eruditi appellantur aut ne deterruisset alios a studiis. quamquam te quidem video minime esse deterritum.

Vita est illis semper in fuga uxoresque mercenariae conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam et tabernaculum offert marito, post statum diem si id elegerit discessura, et incredibile est quo ardore apud eos in venerem uterque solvitur sexus.

Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina exultans ut in tuto iam locata mariti salute muneratam vehiculoque inpositam per regiae ianuas emisit in publicum, ut his inlecebris alios quoque ad indicanda proliceret paria vel maiora.

In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.</span>
</div><div class="illu"><img src="https://i.imgur.com/aTtiKlp.png" /></div><div class="pseudotitre">with Pseudo</div><div class="pseudobox"><img src="http://cache.toribash.com/forum/customavatars/avatar6082115_15.gif" />
<img style="margin-top: 10px;" src="http://www.culture-cafe.fr/site/wp-content/uploads/2009/08/avatar-150x150.jpg" /></div>
<div class="credit">by Milou</div></div>

Par contre je sais je sais, j'ai été obligée d'utiliser des valeurs négatives et je sais que ce n'est pas biennnn Panique mais je l'ai fait quand même Happyness




Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3074
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: Classe N°8 | Pizile Ven 11 Jan - 12:44
Bonjour Pizi :3

Alors visuellement on a un code fidèle au schéma ce qui est bien.
Je vois que tu as séparé le CSS du HTML et c'est super, par contre il y a un margin-top sur l'image à la fin qui devrait aller en CSS aussi.
Cet exercice m'a permis de détecter les points qu'il y a à travailler et notamment les balises, les sélecteurs et surtout le positionnement.
Ce qu'on peut faire déjà pour améliorer notre code est de virer le lien en double des polices. Quand tu vas sur Google fonts, tu peux sélectionner autant de police que tu veux avec le petit plus à droite et puis copier le lien link qui comportera toutes les polices sélectionnées. Ainsi tu auras un seul lien pour charger toutes les polices et ton code en sera plus court.
Pour en savoir plus sur l'utilisation de Google fonts, tu peux lire ce tuto.

La 2ème chose qui cloche dans ton code (et c'est ce qui est plus important), c'est la span .textbox
Déjà ton texte est clairement un ou plusieurs paragraphes alors qu'une span est par définition une balise linéaire (inline) et donc permettra de mettre en forme du contenu sur une seule et même ligne.
Par défaut le HTML ne prend pas en compte les sauts de lignes avec "enter". Donc en réalité ton texte est écrit (vu que c'est une span) sur une seule ligne. Mais vu que la zone des messages est normalement faite pour du BBcode, les sauts de ligne sont pris en compte et donc tu as le bon visuel sans te douter que ce n'est pas la bonne balise.
On reviendra sur la div vs span très prochainement pour plus de détails.
Ici tu as ta div.rpbox qui comprend le texte, du coup je ne vois même pas l'utilité d'ajouter une autre balise. Il suffit donc de mettre le CSS du texte dans .rpbox

Pour le CSS, la première chose qu'on voit c'est de grosses marges de 300px et oui c'est pas bien *tape sur les doigts*
Les margin sont logiquement des marges et donc des petits espaces qui sert à décoller un bloc de ceux qui l'entourent. Elles ne servent pas à positionner. Mais ne t'inquiète pas, on va apprendre le positionnement ensemble et tu verras que c'est beaucoup plus cool :)

A savoir que les codeurs sont des flemmards (oui la grande révélation). Donc en CSS, on ne déclare pas l'évident et donc ce qui est par défaut. Quand tu écris sur une page le texte se mettra toujours à gauche donc pas besoin d'alignement sauf si c'est pour centré, justifié ou mettre à droite.
Ceci dit, pour aligner du texte on utilise la propriété "text-align" et non align. Align est lui un attribut utilisé souvent dans les tableaux. Tu le verras assez souvent dans les tableaux des templates sur la phpbb2, un truc du genre :
Code:
<table align="center"> ... </table>

Dans la même optique des propriétés par défaut, un bloc prendra par défaut la largeur et la hauteur disponible c'est à dire qu'il s'ajuste automatique et du coup on ne met pas de width ou height en auto.
Une div est un bloc par défaut et donc pas besoin de lui mettre un display: block;

Voilà voilà, ça sera tout pour le moment, j'espère que ces quelques informations te soient utiles. On verra tous le reste petit à petit :3




Spoiler:

Codée par Sun d'amour
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Ven 11 Jan - 13:11
Coucou,

Tout d’abord merci beaucoup pour ces informations. Elles me sont en effet très utiles.
Une petite précision pour le Align : je ne le pensais pas comme un text-align mais comme un float en fait, dans le même esprit que pour les templates en fait.

Concernant les grandes margin j’avais essayé de jouer entre les positions absolute et relative mais du coup mes blocs se positionnaient en dehors même du champs des messages sur le forum. Cette méthode a été, par eéfaut de mieux, le plus simple à gérer pour moi du coup.

Pour le display block, j’avais du mal à faire apparaître les lanternes sur l’avatar. J’avais tenté le z-index sans succès. Du co c’est quand j’ai mis le dispoay block en plus que ça a bien voulu fonctionner :/




Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3074
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: Classe N°8 | Pizile Ven 11 Jan - 16:26
Align n'est pas une propriété CSS valide, ça n'existe pas en CSS. On aligne le texte avec text-align, on centre un bloc avec margin: auto et le float bah c'est la propriété "float" littéralement.
D'ailleurs dans ton exercice tu n'as pas besoin de mettre ton titre en float vu que c'est juste du texte.
D'ailleurs ton navigateur n'a pas traduit ta déclaration align: left; vu qu'elle est fausse et donc il ne l'a pas comprise.
Comme je l'ai expliqué plutôt, align est un attribut utilisé sur certaines balises dont la balise table. Et vu que forumactif a eu l'idée (bizarre) de coder ses forums en tableaux et que le code de base est au fai du HTML4 qui date de plusieurs années maintenant, tu trouveras donc des table donc les templates avec des attributs align dessus. Cet attribut lui même en plus d'autres, n'est plus supporté en HTML5 et on aligne les tableaux avec du CSS désormais. D'ailleurs si tu utilises les dernières version de FA, comme la modernbb tu verras qu'ils ont (enfin!) enlever les tableaux.

Pour le reste on verra comment utiliser les position absolu et relatif en plus d'autres types de positionnement efficacement donc ne t'en fais pas pour ça.

Alors connais-tu la différence entre une balise, un attribut et une propriété ?
Question d'être sûre qu'on se comprend :3




Spoiler:

Codée par Sun d'amour
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Ven 11 Jan - 16:34
D’accord,

Je t’avoue que j’ai hâte d’hier mais je le sais bien, chaque chose en son temps.
J’espère en tout cas que mon niveau ne te déçois pas trop :/

Je dirai que la balise c’est ce qui défini la zone dont il est question. Ex : div
L’attribut est la propriété sur laquelle on souhaite agir. Ex : text-align
La valeur est l’effet que l’on souhaite attribuer à l’attribut. Ex : left

Est-ce bon?




Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3074
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: Classe N°8 | Pizile Ven 11 Jan - 17:05
Pas du tout, au contraire, je trouve que tu t'en sors plutôt bien ce qui est cool :3

C'est plutôt bien. Puisque tu as parlé de valeur, parlons de la terminologie en HTML. (remarque que j'ai demandé la différence avec "propriété" plutôt :p mais c'est pas grave).

- la balise c’est ce qui défini la zone dont il est question: J'aime bien ta définition, les balises étant l'élément de base du langage HTML, ta définition rappelle que celle-ci servent à définir ou décrire leur contenu. div est une balise générique mais img veut dire image et h1 c'est automatiquement un titre. Donc les balises nous permettront de reconnaitre le contenu de la page même sans voir le résultat du code en quelque sorte. Techniquement, la balise est ce qu'il y a entre chevrons, comme tu le sais, elle peut être double comme la div ou simple/ auto-fermante/ orpheline comme img.

- L’attribut est la propriété sur laquelle on souhaite agir. Ex : text-align : Ce n'est pas complètement faux mais la différence qu'on veut souligner justement c'est celle entre attribut et propriété. On ne définira donc pas l'attribut comme étant propriété mais c'est bien ce qui permet "d'agir" sur l'élément. Par là on veut dire que les attributs permettent de configurer les éléments ou d'adapter leur comportement. Et vu qu'il sert à configurer l'élément, l'attribut est placé dans la balise ouvrante (et auto-fermante). On a pas toujours des attributs mais dans certaine balise l'attribut est obligatoire.
La valeur est ce qu'il y a entre guillemet, en effet elle est relative à l'attribut.
Il existe des attributs qui n'ont pas besoin de valeur qu'on aura surement la chance de rencontrer dans le cours. Mais si tu veux un exemple, on a l'attribut autoplay dans les balises audio et video. ça sert comme son nom l'indique à jouer la musique ou la vidéo automatique à l'ouverture de la page, donc ça va configurer notre élément et ça n'a pas besoin de valeur.

Rien de plus explicatif qu'un petit schéma pour présenter les termes utilisés pour le HTML :



Tu vas me dire et la propriété dans tout ça ?
Propriété est un terme du CSS et non du HTML. Les propriétés sont les termes utilisés dans un bloc de déclaration CSS pour mettre en forme du contenu HTML.

Exemple d'une déclaration CSS :
Code:
font-size : 20px;
ici la ligne est appelé déclaration, "font-size" est une propriété dont la valeur est 20px;

J'espère que c'est un peu plus clair pour toi, si tu as des questions n'hésite surtout pas.





Spoiler:

Codée par Sun d'amour
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Ven 11 Jan - 18:45
Non, c’est très clair pour le moment. Tout va bien :)




Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3074
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: Classe N°8 | Pizile Mar 15 Jan - 13:46
Coucou :3

Je suis souvent occupée le week end j'espère que tu m'en veux pas de ne pas être présente.

Alors, on reprend notre petit cours.

Pour parler de la différence entre div et span, on doit parler des différents types de balises.
On peut donc diviser les balises en deux types (ou plus) selon trois critères.

- Selon la forme : on a des balises doubles ou auto-fermantes
- Selon le type d'affichage : on a des balises de bloc (block) ou linéaire (inline)
- Selon le sens ou la fonction : on a des balises sémantiques et non sémantiques

Je sais que tu connais la différence entre une balise double et une balise orpheline.
Alors que peux tu me dire sur les autres types ? block vs inline et sémantique vs non-sémantique.




Spoiler:

Codée par Sun d'amour
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Mar 15 Jan - 17:18
Coucou,

Ne t’en fais pas, je ne suis pas là non plus le week-end ni le soir donc cela ne me dérange pas du tout.
Ton week-end était bon? :)

Concernant les balises :

Les balises block : div ou p
Les balises in line : span ou i

Je ne connais pas par contre mes balises sémantiques et non-sémantiques oubalors je ne les connais pas sous ce nom... :/




Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3074
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: Classe N°8 | Pizile Mar 15 Jan - 18:48
Ah d'accord, tant mieux alors.
Oui ça va merci et le tien ?

Au fait ce que je te demande ce n'est pas juste des exemples mais le sens de ces balises. Un peu tout ce que tu sais sur l'affichage block et inline pour bien illustrer la différence.
Pas de souci pour le sémantique et non sémantique, je t'expliquerai cela alors :3




Spoiler:

Codée par Sun d'amour
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Mer 16 Jan - 5:24
Oui tranquille merci :)

Ahhhh ! Pardon, j'avais mal compris. Autant pour moi.
Donc les balises block permettent d'occuper toute la largeur disponible. D'ailleurs lorsque deux balises block se suivent, elles se positionnent l'une sous l'autre.
En revanche, les balises inline, n'occupent que la largeur indispensable à l'affichage du contenu. Il ne provoque donc pas de retour à la ligne. C'est pourquoi lorsque deux balises inline se suivent, elles se positionnent l'une à côté de l'autre si la largeur de la page le permet.




Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3074
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: Classe N°8 | Pizile Mer 16 Jan - 13:47
Oui c'est bien ça, bravo. Et de ce fait un bloc accepte les propriétés width, height et margin mais une balise inline non.

Les balises non-sémantiques, sont celles qui ne décrivent pas leur contenu. C'est le genre de balise passe partout notamment div et span. Tu peux mettre tout et n'importe quoi dedans on ne saura pas forcément ce qu'il y aura si on ne lit pas le contenu.

Les balises sémantiques sont celles qui décrivent leur contenu. Si je prends l'exemple de img et table, quand on voit img on sait directement que le contenu sera une image, quand on voit table on sait que c'est un tableau.

On en vient donc à la partie dont on a déjà parlé : la différence entre div et span.

Comme on tu l'as dit dans tes exemples la div est une balise de type block et span est une balise de type inline.
div vient de "divide" ou diviser, va donc diviser ou séparer en bloc un élément du reste du contenu et génère un saut de ligne.
span va entourer du texte et le séparer sur la même ligne pour lui appliquer par exemple une mise en forme différente. Donc une span c'est un mot, une petite phrase ou une image et non tout un texte de plusieurs paragraphes comme le cas de ta fiche rp.
Et comme je l'ai dit plus haut div et span sont des balises non-sémantiques, c'est à dire qu'elles ne décrivent pas leur contenu.
On peut mettre tout et n'importe quoi dedans, ce sont des balises bouche-trou si on veut et c'est pourquoi ils sont à éviter dans les situations où on peut les remplacer par des balises sémantiques. Par exemple si on va coder un titre il vaut mieux utiliser une balise hn (h1, h2 etc) qu'une div.

Si tu veux des exemples et plus de détails tu peux lire ce tuto.


Si tu as des questions je suis là pour ça :3




Spoiler:

Codée par Sun d'amour
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Mer 16 Jan - 16:06
Ahhhh d’accord !!!
Je comprends mieux la logique.
En fait j’étais persuadée que la balise span était dédiée spécifiquement à la mise en forme du texte.
D’où ma balise du coup :/




Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3074
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: Classe N°8 | Pizile Mer 23 Jan - 9:36
Coucou,

la div et span sont plus lié à la forme qu'au contenu, les deux peuvent prendre du texte mais span traite sur une seule ligne alors que div est un bloc qui peut contenir plusieurs lignes.

Voici une petite maquette que je t'ai préparé, on va essayer de la faire proprement :

Spoiler:



non tu ne ressembles pas à un vampire c'est moi qui est obsédée x)

Je te laisse faire un essai déjà :3

On va le faire sur un éditeur de code comme Codepen ou JSfiddle pour avoir le code brute sans interférence avec le CSS du forum.
Choisis celui qui te plait le plus :3
Tu peux changer l'emplacement des onglets dans change view (codepen) ou settings (JSfiddle), perso je préfère mettre les onglets sur le côté.




Spoiler:

Codée par Sun d'amour
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Lun 28 Jan - 10:24
Hello,

Non non mais j'ai bien remarqué ton regard effrayé depuis que l'on a commencé le cours. Méfiant
Mais avoues, ça t'attires Coeur 2
J'ai trop la Edward Cullen attitude ^^

Voici du coup le code de la maquette :

Bon, ce n'est pas tout à fait les mêmes polices mais j'ai tâché de faire au plus ressemblant possible Polochon

Hein que c'est pas mal du tout ? plz




Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3074
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: Classe N°8 | Pizile Mar 29 Jan - 13:14
Coucou :3
Oh très joli signature, Phenix s'est tellement bien améliorée *oui je suis hors sujet*

Mais non, tu ne m’effraies pas, pas tellement, enfin un peu beaucoup quand même, je veux vivre

Alors, le résultat est visuellement sublime vu que c'est moi qui a fait la maquette, non sérieusement, c'est fidèle au schéma et c'est très bien.
Mes polices étaient Allura et Roboto mais celle que tu as mises sont toutes aussi bonne. Je préfère même Playball à Allura.

HTML :
Je n'ai pas beaucoup à dire, tu as choisi les bonnes balises et c'est généralement propre donc bravo.
Pour les petites remarques à faire :
- Tes noms de class sont très communs. Des noms comme box, text, title risque d'être utilisé d'autres part sur un forum du coup ça va créer des interférences et déformé ta fiche. N'hésite pas à choisir des noms assez uniques, genre pzbox ou pizi_box enfin comme tu veux.
- p : est une balise qui génère automatiquement un espacement avant et après le paragraphe. pour la phrase au centre, la span sera largement suffisante vu qu'il y a un p avant et après, donc pas besoin de la mettre dans une balise p aussi.
- un HTML propre est un code sans CSS, on va donc mettre le CSS de la span dans la partie CSS et non dans le HTML. Tu n'es pas obliqué de mettre une class à la span si c'est ça qui t'a freiné. D'ailleurs tu as utilisé beaucoup de class alors que tu pouvais te passer de certaines.
Pour ce faire on utilise des sélecteurs combinés (qu'on verra alors en détails). Pour ce cas là, on veut la span qui est à l'intérieur de la div appelée text donc on met :
Code:
.text span {
- un avatar est une information sur la personne ou le personnage, n'est ce pas ? Ce n'est pas juste une décoration comme l'arrière-plan enneigé d'epicode. Le contenu est donc toujours mis en HTML et les décorations en CSS. On introduit donc par la balise img les images qui ont un sens par rapport au contenu et en background-image, celles qui sont décoratives.
- finalement, ceci n'est pas vraiment un reproche mais juste une note, le crédit codé par aurait plus de sens en tant que lien, vers le forum par exemple.

Je te laisse déjà voir comment corriger ça avant de parler du CSS pour ne pas charger le message.
Si tu as des questions par rapport à quoique ce soit n'hésite pas.




Spoiler:

Codée par Sun d'amour
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Jeu 31 Jan - 7:44
Coucou,

Oui hein, c'est magnifique ! En plus j'adore et les tons de couleurs et les oiseaux Lovely
Les filles m'ont tellement gâtée Lovely Panique Lovely

J'ai effectué les modifications nécessaires :



Par contre je t'avoue que je n'ai pas trop osé toucher aux balises class afin d'en réduire le nombre pour le moment.




Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3074
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: Classe N°8 | Pizile Dim 3 Fév - 16:23
Ah je me demandais pourquoi tes liens ne s'ouvraient pas dans un nouvel onglet par défaut, je vois que tu utilises les balises HTML et non le BBcode. C'est cool !

Sur CodePen, il y a une balise fermante a au début de ton code, tu as du l'oublier pour une raison ou une autre.
Pour les noms de classes t'en fais pas pour l'instant, on verra ça plus tard.

Je vois que tu as appliqué tout ce que j'ai demandé à la lettre, bravo.

On va voir maintenant comment on peut améliorer notre code CSS.

Alors, normalement, quand tu écris du contenu HTML le navigateur va le traduire de gauche à droite et de haut en bas, les blocs se mettront l'un au dessous de l'autre et les éléments linéaire l'un à côté de l'autre. Ce positionnement par défaut est appelé le flux.
La règle veut qu'on ne sort un élément de son flux (et donc on le décale de sa position initiale) que si nécessaire. Rappelle-toi que les codeurs sont des flemmards qui n'écrivent que l'essentiel et donc n'ajoute pas des lignes inutilement.
Maintenant si on regarde notre maquette, la plupart des éléments sont dans le flux. On a un bloc avec une div du titre qui prend toute la largeur ce qui est normal, le crédit qui est bien à sa place à la fin. Les seuls éléments qui sortent du flux sont l'image et la div du texte. C'est à dire que si on supprime le CSS, on aura le texte et puis l'image au dessous du texte et non à côté mais à part ça le reste sera dans la bonne place. Donc logiquement, les seuls éléments qu'on doit repositionner sont l'image et le texte.
La propriété "position" ne doit pas être utilisée sur les autres éléments qui doivent garder leur position statique et donc qui sont dans le flux. Bien sûr si on enlève position il faut enlever le z-index qui va avec.

Ceci est une introduction au cours du positionnement dont on a parlé, s'il y a quelque chose qui n'est pas claire n'hésite pas à m'en faire part.

Pour la superposition du titre et de son soulignement, le plus simple est d'utiliser une bordure sur le titre (border-bottom), avec une hauteur (height) plus au moins égale à la taille de la bordure pour les faire superposer. Au fait tu as oublié un petit espace dans text-shadow avant le code couleur.

Je ne sais pas si tu l'as remarqué mais ton lieu est tout moche, bleu souligné c'est le CSS par défaut des liens.
Les liens ne prennent pas la couleur du bloc dans lequel ils sont. Il faut cibler la balise lien et lui appliquer directement la couleur voulu. Donc pour ça on va encore une fois utilisé le sélecteur de descendant .pizicredit a {} et donc à part les marges et le text-align qui s'applique au bloc on va transférer le reste du CSS lié au texte dans .pizicredit a {}.

Et enfin, il me semble que tu as oublié de mettre une barre de défilement au texte, on ne veut pas qu'il dépasse du bloc si jamais on a beaucoup de texte, ça sera tout moche sinon.

C'est tout pour le moment, si tu as des questions n'hésite surtout pas, sinon on va directement voir le cours du positionnement en détails, je sais que tu as hâte :3




Spoiler:

Codée par Sun d'amour
Pizi
Sexe : Féminin
Date d'inscription : 06/07/2018
Messages : 100
Conseiller.e
Voir le profil de l'utilisateurhttp://esteria.forumactif.com
# Re: Classe N°8 | Pizile Mer 6 Fév - 4:50
Bonjour,

Oui, oui je m'y suis mise du coup Happyness

Voici les modifications nécessaires :



J'espère que ça ira Lovely




Merci beaucoup à Phenix de la Lune et Milou pour ces superbes cadeaux  Coeur 2
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3074
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: Classe N°8 | Pizile Mer 6 Fév - 13:59
Oh c'est beaucoup mieux en effet.
pour ajouter de l'espace à gauche du texte du titre on utilise la propriété padding (littéralement rembourrage) qui sert à ajouter de l'espace à l'intérieur d'un bloc. A contrario de margin qui ajoute de l'espace à l'extérieur d'un bloc.
Tu peux donc mettre un padding-left à ton titre.

Alors pour le positionnement, tu pourrais me faire un petit récap de tout ce que tu connais dessus ?




Spoiler:

Codée par Sun d'amour
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum