Naütilus.
Sexe : Masculin
Date d'inscription : 03/03/2015
Messages : 6945
Ancienne admin - 20 000 lieux sous les codes
Voir le profil de l'utilisateurhttp://aelke-rpg.forumactif.com/
# [Facile] - Exercice 11 - Fiche RPle Mer 18 Juil 2018 - 17:26
Coucou !

Je vous propose une petite maquette de fiche RP !
voici les images :
fond de fiche https://i.servimg.com/u/f56/19/09/32/16/fond_f10.png
image feat https://i.servimg.com/u/f56/19/09/32/16/imagef10.png

Rendu :



la créa fait 500*720 à vous de voir si vous rallongez ou non :)
Anonymous
Invité
Invité
# Re: [Facile] - Exercice 11 - Fiche RPle Ven 20 Juil 2018 - 15:42
Coucou **
voici ce que j'ai pu faire  




Un titre rp

Feat. Toi et moi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.





PS: j'ai corrigé mes erreurs **
Shanriya
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Ancien.ne du staff
Voir le profil de l'utilisateur
# Re: [Facile] - Exercice 11 - Fiche RPle Sam 21 Juil 2018 - 19:46
Coucou :) Voici pour moi o/ Merci à ma prof @Reine des Ténèbres qui, sans elle, j'aurais jamais compris comment faire XD Bon, y'a peut-être des erreurs, c'est même très probable, mais voilà :P

Code:
<style>
.fiche {
  background-image: url('https://i56.servimg.com/u/f56/19/09/32/16/fond_f10.png');
    width: 500px;
  height: 720px;
}

h1{
  color: #fff;
  text-align: center;
  height: 30px;
  font-family: sans-serif;
  padding-top: 10px;
}

.feat {
  background-image: url('https://i56.servimg.com/u/f56/19/09/32/16/imagef10.png');
  height: 100px;
}

h5{
  padding-top: 10px;
  text-align: right;
  margin: 10px;
  color: darkred;
  font-size: 20px;
}

.bloc_texte {
  background-color: lightgrey;
  opacity: 0.60;
  height: 510px;
  margin: 20px;
  text-align: justify;
}

p {
  margin:10px;
  padding: 10px;
}

.text {
  color:darkred;
}

.credit {
  display: block;
  text-align: right;
  color: #fff;
}</style>

<div class="fiche"><h1>Titre du RP</h1> <div class="feat"><h5>Feat Shanya</h5></div><div class="bloc_texte"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /><br />

<span class="text">Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span><br /><br />

Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p><span class="credit">(c) Shanya & Naütilus</span></div></div>

https://codepen.io/Shanriya/pen/ejgPNY (pour un aperçu XD)
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3066
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: [Facile] - Exercice 11 - Fiche RPle Sam 21 Juil 2018 - 21:05
Coucou chère élève, @Shanriya :3

Tu as fait du bon travail, je suis plutôt fière de toi :3

Alors, h5 est un bloc, donc il peut très bien avoir son background sans la div feat. Donc tu n'auras pas besoin de cette div et tu peux mettre le CSS qui est dans .feat directement dans h5 en élevant la marge pour que ça colle aux bords. Et pour que ton texte ne colle pas par contre, on va mettre un padding-right.

Pour ton bloc de texte, visuellement on a un paragraphe, une span et un autre paragraphe, donc on doit avoir la même chose niveau code. Plutôt que des br à la suite, on va utiliser une balise p pour chaque paragraphe. Cette balise ayant une marge avant et après, on aura l'espace qu'on veut entre le paragraphe et la span.

Si tu as mis ton code sur Codepen tu as du remarquer que le texte dépasse ton bloc. Pour y remédier tu peux mettre une barre de défilement uniquement dans la zone texte. Donc dans la div qui comprend tout le texte : bloc_texte.
Pour ce faire, on utilise la propriété overflow. Cette propriété à 3 valeurs
- auto : la scrollbar apparait uniquement quand le texte dépasse
- scroll : la scrollbar apparait toujours même s'il n'y a pas beaucoup de texte (je te déconseille cette option car pas très esthétique)
- hidden : Tout ce qui dépasse sera cacher (si le texte est caché on pourra pas le lire, cette option est plus utile pour l'effet masque d'écrêtage quand on met une image rectangulaire par exemple dans un bloc rond)

Finalement pour le crédit, tu as mis une span mais dans le CSS tu l'as transformé en bloc avec display. Ceci n'est pas nécessaire dans ce cas vu que tu ne lui as donné aucune propriété liée aux blocs comme une marge ou une largeur ou hauteur, donc tu peux enlever le display.

Voilà, c'est tout pour les corrections. Je ne parlerai pas des sélecteurs vu qu'on verra bientôt comment mettre la fiche sur un forum :3

En tout cas c'est très bien, bravo :3




Spoiler:

Codée par Sun d'amour
Shanriya
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Ancien.ne du staff
Voir le profil de l'utilisateur
# Re: [Facile] - Exercice 11 - Fiche RPle Sam 21 Juil 2018 - 21:24
Coucou :3 j'ai apportée les modifications, seulement un léger soucis avec le crédit m'a obligée à faire quelques changements (dont la hauteur du bloc paragraphe). Voilà ^^ https://codepen.io/Shanriya/pen/ejgPNY
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3066
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: [Facile] - Exercice 11 - Fiche RPle Sam 21 Juil 2018 - 23:42
Re :3

Alors, la span est une balise inline, p est un bloc, donc comme je te l'ai dit hier, on ne peut pas mettre un bloc dans une balise qui se met sur le même ligne, ce n'est pas logique :3
Tu devrais avoir div et à l'intérieur p + span + p

Pour h5 si tu veux coller le fond aux bords comme sur le schéma il suffit de mettre 0 aux marges horizontales.
tu auras donc margin: 10px 0; si tu veux garder 10px pour le haut et le bas.

Pour que le crédit s'affiche il suffit de diminuer la hauteur du bloc texte :3




Spoiler:

Codée par Sun d'amour
Shanriya
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Ancien.ne du staff
Voir le profil de l'utilisateur
# Re: [Facile] - Exercice 11 - Fiche RPle Sam 21 Juil 2018 - 23:56
Coucou :3 oui, je me disais bien que j'avais une faute quelque part /facepalm/ donc du coup voilà :3 y'a juste le foutu span qui veut pas m'obéir pour le margin TT donc obligé de mettre un display:block :/ https://codepen.io/Shanriya/pen/ejgPNY
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3066
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: [Facile] - Exercice 11 - Fiche RPle Dim 22 Juil 2018 - 0:00
Ah mais tu ne suis pas *sort le fouet*
la span est inline, elle ne peut pas prendre margin, height ou width :3
Mais elle peut avoir un padding donc au lieux de mettre une marge de 10px et un padding de 10px il est plus logique de fusionner la valeur et mettre simplement un padding: 20px :3




Spoiler:

Codée par Sun d'amour
Shanriya
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Ancien.ne du staff
Voir le profil de l'utilisateur
# Re: [Facile] - Exercice 11 - Fiche RPle Dim 22 Juil 2018 - 0:03
Oui je suis, mais là, la fatigue me prends au corps TT ça fait six minutes que j'essaie d'arranger ce span et j'avais même plus pensé au fait que margin marche pas u_u j'vais chercher une corde, j'reviens o/ mais même si je fais ça la texte est pas comme les autres... https://codepen.io/Shanriya/pen/ejgPNY
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3066
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: [Facile] - Exercice 11 - Fiche RPle Dim 22 Juil 2018 - 0:10
Je plaisante :3 il se fait tard en plus :3
Ah oui pardon, au fait c'est parce que les marges et padding dans p et le span ne sont pas égaux.
Le plus simple est de supprimer margin et padding de p et span pour les égaliser et mettre le padding dans la div du bloc de texte comme ça tout sera à égalité :3




Spoiler:

Codée par Sun d'amour
Shanriya
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Ancien.ne du staff
Voir le profil de l'utilisateur
# Re: [Facile] - Exercice 11 - Fiche RPle Dim 22 Juil 2018 - 0:18
Aaaaaah oui parfait ça marche, merci :D https://codepen.io/Shanriya/pen/ejgPNY
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3066
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: [Facile] - Exercice 11 - Fiche RPle Dim 22 Juil 2018 - 0:27
Et tout va pour le mieux dans le meilleur des mondes possibles /pan

Bravo, j'espère que tu as appris des choses et surtout que tu es fière de ce que tu as réalisé :3




Spoiler:

Codée par Sun d'amour
Shanriya
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Ancien.ne du staff
Voir le profil de l'utilisateur
# Re: [Facile] - Exercice 11 - Fiche RPle Dim 22 Juil 2018 - 0:30
Aya oui je suis hyper fière :3 j'ai construit la moitié toute seule avant d'avoir besoin d'aide o/ et oui, j'ai appris des choses ** Merci Reine pour tes corrections ♥️ et merci Naüt pour le schéma ♥️
Naütilus.
Sexe : Masculin
Date d'inscription : 03/03/2015
Messages : 6945
Ancienne admin - 20 000 lieux sous les codes
Voir le profil de l'utilisateurhttp://aelke-rpg.forumactif.com/
# Re: [Facile] - Exercice 11 - Fiche RPle Lun 23 Juil 2018 - 12:45
A MOOIII !!



Merci à @Dragonnier de m'avoir dit de pas oublier le = après le class lol je lui dédis ce code !
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3066
Designer - Rose des sables
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
# Re: [Facile] - Exercice 11 - Fiche RPle Lun 23 Juil 2018 - 15:13
Coucou :3
Tu fais ton exercice c'est marrant :3

Pour l'image des loups ça aurait été plus simple de la mettre en background de h3 plutôt que de galérer avec le positionnement absolu. D'ailleurs je ne sais pas si tu pratique le positionnement avec cette exercice. Dans ce cas c'est bon, mais sinon pour ce schéma ce n'était pas la peine de tout mettre en absolu à mon avis :3
Tu aurais du juste centrer tes blocs avec margin: auto :3

Pour la zone texte tu as mis l'overflow en hidden ce qui cache ton texte donc on pourra pas le lire. Il vaut mieux le mettre en auto pour avoir la scrollbar au cas où il y aura beaucoup de texte.

Sinon le code en lui-même est correct, bravo :3






Spoiler:

Codée par Sun d'amour
Naütilus.
Sexe : Masculin
Date d'inscription : 03/03/2015
Messages : 6945
Ancienne admin - 20 000 lieux sous les codes
Voir le profil de l'utilisateurhttp://aelke-rpg.forumactif.com/
# Re: [Facile] - Exercice 11 - Fiche RPle Lun 23 Juil 2018 - 18:22
Ah oui ! le overflow je me trompe tout le temps n.n
Pour le positionnement XD ça dépend je fais ce qui marche lol, en générale quand je fais des margin auto ça bugs toujours n.n mais là j'ai pas pensé j'avoue ^^

Content que le reste sois bon alors ! :3 c'est que j'ai une bonne prof :p
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum