Le deal à ne pas rater :
Abonnement 12 mois Nintendo Switch Online
15.99 €
Voir le deal

[Facile] - Exercice 11 - Fiche RP


Aller en bas

Naütilus.
20 000 lieux sous les codes

http://aelke-rpg.forumactif.com/
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 :

[Facile] - Exercice 11 - Fiche RP Maquet12

la créa fait 500*720 à vous de voir si vous rallongez ou non :)
Naütilus.
Date d'inscription : 03/03/2015
Messages : 7624

Invité
Invité

Coucou **
voici ce que j'ai pu faire  [Facile] - Exercice 11 - Fiche RP 1058202338




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 **
Anonymous

Invité
Invité

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)
Anonymous

Reine des Ténèbres
Ancien.ne du staff

http://www.epicode-entraide.com
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
Reine des Ténèbres
Date d'inscription : 15/08/2017
Messages : 3183

Invité
Invité

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
Anonymous

Reine des Ténèbres
Ancien.ne du staff

http://www.epicode-entraide.com
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
Reine des Ténèbres
Date d'inscription : 15/08/2017
Messages : 3183

Invité
Invité

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
Anonymous

Reine des Ténèbres
Ancien.ne du staff

http://www.epicode-entraide.com
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
Reine des Ténèbres
Date d'inscription : 15/08/2017
Messages : 3183

Invité
Invité

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
Anonymous

Reine des Ténèbres
Ancien.ne du staff

http://www.epicode-entraide.com
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
Reine des Ténèbres
Date d'inscription : 15/08/2017
Messages : 3183

Invité
Invité

Aaaaaah oui parfait ça marche, merci :D https://codepen.io/Shanriya/pen/ejgPNY
Anonymous

Reine des Ténèbres
Ancien.ne du staff

http://www.epicode-entraide.com
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
Reine des Ténèbres
Date d'inscription : 15/08/2017
Messages : 3183

Invité
Invité

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 ♥️
Anonymous

Naütilus.
20 000 lieux sous les codes

http://aelke-rpg.forumactif.com/
A MOOIII !!



Merci à @Dragonnier de m'avoir dit de pas oublier le = après le class lol je lui dédis ce code !
Naütilus.
Date d'inscription : 03/03/2015
Messages : 7624

Reine des Ténèbres
Ancien.ne du staff

http://www.epicode-entraide.com
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


Reine des Ténèbres
Date d'inscription : 15/08/2017
Messages : 3183

Naütilus.
20 000 lieux sous les codes

http://aelke-rpg.forumactif.com/
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
Naütilus.
Date d'inscription : 03/03/2015
Messages : 7624

Alek
Ancien.ne du staff

Bonchour [Facile] - Exercice 11 - Fiche RP 3775839356
Je sais qu'on me reproche - totalement à tord bien sûr - de mettre pas mal de div (non, en vrai, j'en mets beaucoup trop, désolé).
Donc là, y'en pas presque pas /o/

Spoiler:

Code:
<style>
  
.fond {
 background-image:url('https://i.servimg.com/u/f56/19/09/32/16/fond_f10.png');  
 height: auto;
 width: 500px;
 margin:0px auto;
}
  
h1 {
 color: #EBE6E6;  
 text-align: center;
 font-family:'Indie Flower';
}

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

h2 {
 color: #ce462e;
 font-family:'Indie Flower';
 text-align: right;
 padding: 20px;
}

.texte {
 height: auto;
 width: 450px;
 background-color: white;
 opacity: 0.6;
 margin:0px auto;
 text-align: justify;
}

p {
 padding: 4px;  
}

span {
 color: #ce462e;
}

</style>

Code:
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">

<div class="fond">
  
   <h1>Titre de rp</h1>
  
   <div class="bande">
     <h2>feat: partenaire</h2>
   </div>
  
   <div class="texte">
      <p>Pandente itaque viam fatorum sorte tristissima, qua praestitutum erat eum vita et imperio spoliari, itineribus interiectis permutatione iumentorum emensis venit Petobionem oppidum Noricorum, ubi reseratae sunt insidiarum latebrae omnes, et Barbatio repente apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente in rebus milites ducens, quos beneficiis suis oppigneratos elegerat imperator certus nec praemiis nec miseratione ulla posse deflecti.Pandente itaque viam fatorum sorte tristissima, qua praestitutum erat eum vita et imperio spoliari, itineribus interiectis permutatione iumentorum emensis venit Petobionem oppidum Noricorum, ubi reseratae sunt insidiarum latebra.et Barbatio repente apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente in rebus milites ducens, quos beneficiis suis oppigneratos elegerat imperator certus nec praemiis nec miseratione ulla posse deflect. <br/>
      
      <span>"Pandente itaque viam fatorum sorte tristissima, qua praestitutum erat eum vita et imperio spoliari, itineribus interiectis permutatione iumentorum emensis venit."</span>. <br/>
      
      Petobionem oppidum Noricorum, ubi reseratae sunt insidiarum latebrae omnes, et Barbatio repente apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente in rebus milites ducens, quos beneficiis suis oppigneratos elegerat imperator certus nec praemiis nec miseratione ulla posse deflecti.Pandente itaque viam fatorum sorte tristissima, qua praestitutum erat eum vita et imperio spoliari, itineribus interiectis permutatione iumentorum emensis venit Petobionem oppidum Noricorum, ubi reseratae sunt insidiarum latebrae omnes, et Barbatio repente apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente in rebus milites ducens, quos beneficiis suis oppigneratos.</p>
    </div>
    
    <span>Note: ce que vous avez à dire</span>
</div>
Alek
Date d'inscription : 20/01/2018
Messages : 2431

Reine des Ténèbres
Ancien.ne du staff

http://www.epicode-entraide.com
Bonsoir, @Alek.

J'ai écrit ma réponse hier soir et pouf quand j'ai envoyé tout a été perdu à cause du bug de FA. Hier je n'avais pas la moindre idée d'à quoi devrait ressembler l'aperçu du code en plus, il me semble qu'il y avait un problème avec la mise à jour de servimg.

" y'en pas presque pas /o/" le pas en double, avoue que c'est un piège :p.

Ton code a l'air plutôt bien, il n'y a pas beaucoup de div en effet, bravo :3

HTML :

Alors, je m'excuse de commencer par là mais les headings sont aussi des blocs, ils acceptent donc le background-image et la hauteur, tu n'auras donc pas besoin de la div bande.

La même chose s'applique au texte. Tu as pensé à l'élément paragraphe ce qui est bien mais tu ne l'as pas du tout exploiter. On a le paragraphe entouré d'une div qui prend tout le CSS du coup j'ai envie de demander à quoi bon. Dans ce cas soit tu gardes la div soit le p.
D'ailleurs si je ne me trompe pas, dans la maquette on avait un paragraphe, une span et un autre paragraphe; du coup j'aurai plutôt divisé le texte en deux paragraphes avec la phrase rouge entre les deux, au moins ça me fera une marge avant et après la phrase et je n'aurais pas à mettre le br, dans ce cas l'utilisation d'une div pour englober le tout serait justifiée.

CSS :

La hauteur d'un bloc correspond par défaut à celle de son contenu, donc pas besoin de spécifier height: auto.
Si la valeur d'une propriété est 0 on ne met pas l'unité que ça soit en px, %, pt etc.

Ce qui suit est purement informatif, ton mode n'est pas faux vu que le texte est en noir/ rouge sombre.
Pour la partie texte, l'opacité est héritée. Si tu réduits l'opacité d'un bloc, tous les éléments qu'il contient hériteront de cette opacité réduite et donc il y a de forte chance que ton texte soit peu lisible selon la couleur choisie. Imagine qu'on veut utiliser du texte blanc, dans ce cas il serait impossible de jouer sur l'opacité sinon le texte va complètement se fondre dans le fond et disparaitre.
La solution dans ce cas est de jouer sur l'opacité de la couleur du fond uniquement. Pour ça on évite le modèle hexadécimal et on utilise le modèle en RGBA ou HSLA. Le A est appelé coefficient alpha et c'est celui qui contrôle l'opacité. Pour le blanc à 50% d'opacité par exemple on aura : color: rgba(255, 255, 255, 0.5). exemple de convertisseur

Ma dernière remarque concerne les sélecteurs CSS. L'utilisation des éléments comme h1,h2, p, ul etc permet de simplifier le code et faire des classes et id en moins comme tu as du le remarquer. Attention par contre sur certain code, tu n'as pas forcément envie que ton CSS s'applique à tous les titres ou tous les paragraphes de la page (par exemple si tu mets cette fiche directement sur epicode, il y aura des interférences avec le CSS de h1 et h2 du forum). C'est pourquoi on utilise ce qu'on appelle les sélecteurs de descendants. C'est à dire on combine le type de balise avec le nom de classe du bloc parent. Par exemple :
Code:
.fond h1 {
}
.fond h2 {
}
.fond p {
}

Voilà c'est tout. Comme tu as du remarquer ce n'est pas grand chose, ton code est bien fait et propre, je te félicite :3
Reine des Ténèbres
Date d'inscription : 15/08/2017
Messages : 3183

Broussy
Membre timide

Coucou  [Facile] - Exercice 11 - Fiche RP 1066248963  Alors j'ai tenté quelque chose, je pose ça là comme ça mais j'attend pas spécifiquement de commentaires vu l'ancienneté du sujet  ^^
J'ai changé les polices par rapport à la maquette par contre, justifié le texte et ajouté un overflow automatique. C'est ma première vraie fiche faite de A à Z (enfin sauf la maquette huhu) donc je suis assez fière même si c'est pas foufou (et que je me suis pas mal arraché les cheveux sur des choses simples, comme juste placer le texte du feat xD)
En tout cas merci beaucoup pour cet exercice bien sympa Naütilus  [Facile] - Exercice 11 - Fiche RP 3488708190
EDIT : ça rend pas pareil en prévisualisation et envoi naaaaaaaaan  batte je vais essayer de trouver ce qui va pas pour l'image des ours polaires  [Facile] - Exercice 11 - Fiche RP 3313101865


 
 
Titre du RP

 
ours polaires
feat. nom du partenaire

 
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.

Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
   
   Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.

Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
   
   Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.

Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
   
(c) Broussy / Maquette par Naütilus pour Epicode

   


Broussy
Date d'inscription : 26/05/2013
Messages : 162

Artemis
Admin & serial codeuse

http://hakumei.forumactif.org/
Hey !
C'est un code très bien construit, félicitations ! Pour le bug de l'image, ça ne vient pas de toi, nous avons juste mis une limite de taille sur les images des messages sur Epicode. 8D Le mieux c'est d'ajouter une class à ton image, et de lui attribuer un CSS, comme ceci

Code:
<img src="https://i.servimg.com/u/f56/19/09/32/16/imagef10.png" border="0" alt="ours polaires" class="image_fiche">

<style>.image_fiche {width: 500px;}</style>

Tu as un tuto intéressant ici qui t'explique comment utiliser les class (et les id, par la même occasion !)

Attention, la balise center est obsolète, préfère centrer tes blocs avec la propriété margin: auto c: Ainsi, à la place de ce margin-top :

Code:
<div style="margin-top: 60px; width: 470px; height:480Px; background: white; opacity:0.5; padding: 5px; overflow:auto; text-align: justify; font-family: 'Raleway', sans serif; font-size: 13px;">

On mettra plutôt :

Code:
<div style="margin: 60px auto 0; width: 470px; height:480px; background: white; opacity:0.5; padding: 5px; overflow:auto; text-align: justify; font-family: 'Raleway', sans serif; font-size: 13px;">

Sinon, à part ces petits détails, ton code est vraiment très bien ! N'hésite pas à faire d'autres exercices, tu es sur la bonne voie 8D
Artemis
Date d'inscription : 14/01/2017
Messages : 2659


 

Broussy
Membre timide

Merci beaucoup pour ta réponse Artemis [Facile] - Exercice 11 - Fiche RP 3775839356
Du coup entre temps j'ai tenté de le modifier en attribuant des class (j'avais fait comme ça au début mais j'arrivais pas à lier ma feuille CSS au HTML sur le forum... puis j'ai découvert la magie de la balise style 8D). Ca rend bien en prévisualisation mais j'ai dû mettre des valeurs négatives énormes pour faire remonter mes titres sur l'image, ça me faisait pas ça la première fois [Facile] - Exercice 11 - Fiche RP 3313101865


Titre du RP



feat. nom du partenaire




Ici le texte du RP

Broussy (maquette de Naütilus) pour Epicode






Code:
<div class="fond"><img src="https://i.servimg.com/u/f56/19/09/32/16/fond_f10.png">
<div class="titre">Titre du RP</div><br />
<div class="image"><img src="https://i.servimg.com/u/f56/19/09/32/16/imagef10.png"></div>
<div class="feat">feat. nom du partenaire</div><br /><br /><br />
<div class="cadre">Ici le texte du RP</div>
<div class="credits">Broussy (maquette de Naütilus) pour <a href="http://www.epicode-entraide.com" target="_blank">Epicode</a></div>
</div>

<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Indie+Flower&display=swap" rel="stylesheet">
<style>.fond { width: 500px; height: 720px; } .titre { font-family: 'Indie Flower', cursive; text-align: center; color: #FFFFFF; font-size: 50px; margin: auto 0; } .image { width: 500px; margin: auto; } .feat { margin-left:240px; text-align:right;width:50%; font-size: 15px; color: #800000; font-family: 'Raleway', sans-serif; } .cadre { margin: auto; width: 470px; height:490Px; background: white; opacity:0.5; padding: 5px; overflow:auto; text-align: justify; font-family: 'Raleway', sans serif; font-size: 13px; } .credits { text-align: center; font-size: 10px; color: #F0E68C; font-family: 'Raleway', sans-serif; }</style>

En tout cas merci infiniment pour tes encouragements et tes commentaires, ça fait très plaisir [Facile] - Exercice 11 - Fiche RP 3488708190 j'essaierai de me débarrasser des balises center à l'avenir ^^ Et je vais essayer d'autres exercices Super héro

EDIT : en fait c'est le bazaaaaaar TT *a réussi à casser le truc qu'elle avait réussi à faire* Je crois que je vais revenir au HTML simple en ajoutant juste une class pour l'image [Facile] - Exercice 11 - Fiche RP 3313101865
Broussy
Date d'inscription : 26/05/2013
Messages : 162

Artemis
Admin & serial codeuse

http://hakumei.forumactif.org/
C'est mieux avec les class ! Pense à donner des noms plus personnels à tes div, d'ailleurs, pour éviter que le CSS d'un forum entre en conflit avec elle. c:

Tu peux mettre par exemple "fond_broussy", etc.
Pour les margin négatifs, ça s'explique parce que tu mets une image assez longue dans le bloc, donc les autres éléments se placent naturellement après elle. Pour palier à ce souci, tu peux retirer l'image du HTML et opter pour la mettre en tant que fond

Code:
.fond { width: 500px; height: 720px; background: url(https://i.servimg.com/u/f56/19/09/32/16/fond_f10.png);}

C'est normal que ton code apparaisse un peu cassé, modernbb a un CSS de base assez particulier, mais en prenant les bugs un par un tu pourras en voir facilement le bout [Facile] - Exercice 11 - Fiche RP 3775839356
Artemis
Date d'inscription : 14/01/2017
Messages : 2659


 

Broussy
Membre timide

Ah oui en effet, j'ai pas pensé que les noms des div pouvaient éventuellement poser problème avec le CSS du forum mais c'est logique en fait ^^ Merci pour la suggestion !
J'ai mis les deux images en background dans le CSS et ça facilite beaucoup les manipulations des autres éléments en effet ! Je pense que cette fois ci c'est la bonne  [Facile] - Exercice 11 - Fiche RP 2691722282 Encore un immense merci pour tes conseils  Coeur 2


Titre du RP

feat. nom du partenaire

Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.

Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
 
  Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.

Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
 
  Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.

Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.

Broussy (maquette de Naütilus) pour Epicode






Code:
<div class="fond_broussy">
<div class="titre_RP_broussy">Titre du RP</div>
<div class="image_bannière"><div class="feat_nom"><i>feat. nom du partenaire</i></div></div>
<div class="cadre_transparent_texte">Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.

Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
 
  Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.

Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
 
  Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.

Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</div>
<div class="credits_brou">Broussy (maquette de Naütilus) pour <a href="http://www.epicode-entraide.com" target="_blank">Epicode</a></div>
</div>

<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Indie+Flower&display=swap" rel="stylesheet">
<style>.fond_broussy { margin: auto; width: 500px; height: 720px; background: url(https://i.servimg.com/u/f56/19/09/32/16/fond_f10.png); } .titre_RP_broussy { font-family: 'Indie Flower', cursive; text-align: center; color: #FFFFFF; font-size: 30px; margin: auto; } .image_bannière { margin: auto; width: 500px; height: 106px; background: url(https://i.servimg.com/u/f56/19/09/32/16/imagef10.png) } .feat_nom { margin-left:320px; text-align:center; font-size: 15px; color: #800000; font-family: 'Raleway', sans-serif; } .cadre_transparent_texte { margin: auto; width: 470px; height:470Px; background: white; opacity:0.5; padding: 5px; overflow:auto; text-align: justify; font-family: 'Raleway', sans serif; font-size: 13px; } .credits_brou { margin: auto; text-align: center; font-size: 10px; color: #F0E68C; font-family: 'Raleway', sans-serif; }</style>
Broussy
Date d'inscription : 26/05/2013
Messages : 162

Nathou
Newbie

Bonjour, voici mon travail :p

Code:
.fiche {
  background-image: url('https://i56.servimg.com/u/f56/19/09/32/16/fond_f10.png');
  width: 500px;
  height: 720px;
}
h1{
  color: white;
  font-family: Waltograph;
  font-size: 50px;
  text-align: center;
  padding-top: 10px;
}
.feat {
  background-image: url('https://i.servimg.com/u/f56/19/09/32/16/imagef10.png');
  width: 500px;
  height: 80px;
}
h2{
  font-family: waltograph;
  color: chocolate;
  text-align: right;
  padding-right: 20px;
  padding-top: 20px;
}
.rp{
  background-color: lightgrey;
  opacity: 0.50;
  height: 490px;
  width: 480px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 35px;
  overflow: auto;
  font-family: Comic Sans Ms;
  Font-size: 15px;
  text-align: justify;
  }

.dialogue{
  color: darkred;
  font-size: 20px;
}
.credits{
  color: white;
  font-family:  Comic Sans MS;
  font-size: 15px;
  text-align: center;
}


<div class="fiche"><h1>Titre du RP</h1><div class="feat"><h2>Feat. Toi et Moi</h2><div class="rp">C’est comme ça qu’il se voyait à cette époque. Un peu rebelle envers ce monde. L’informatique l’avait aidé à s’enfermer un peu plus dans cet état. Il était devenu doué d’une logique à toute épreuve et d’une intelligence remarquable, mais surtout, il était devenu insociable. Avec l’âge, le besoin de trouver l’âme sœur avait pris le dessus et il avait été un peu obligé de rencontrer des gens, de parler avec eux. Très difficile au début, il avait réussi à vaincre ces préjugés. Il avait accepté la lenteur d’esprit des autres ainsi que leur manque de logique.

Il avait d’abord commencé par récupérer des informations depuis l’ordinateur de David, puis il était allé les chercher sur Internet. Il avait lui même programmé l’ordinateur de David afin d’avoir un premier lien vers le monde extérieur : la voix. Il pouvait entendre la voix de David, mais ne la comprenait pas. C’est alors qu’il a décidé d’aller lui même à l’information. Il s’est alors ‘transporté’ sur Internet afin de choisir une nouvelle ‘maison’. Il lui a été beaucoup plus facile de programmer ce nouvel ordinateur afin d’entendre une nouvelle voix.

Je m’en rappellerais si j’avais créé un programme capable de parler. Et puis tiens, je suis en train de taper la causette avec un ordinateur ! Je deviens vraiment cinglé ! C’est fini, j’arrête l’informatique !

Il avait d’abord commencé par récupérer des informations depuis l’ordinateur de David, puis il était allé les chercher sur Internet. Il avait lui-même programmé l’ordinateur de David afin d’avoir un premier lien vers le monde extérieur : la voix. Il pouvait entendre la voix de David, mais ne la comprenait pas. C’est alors qu’il a décidé d’aller lui-même à l’information. Il s’est alors ‘transporté’ sur Internet afin de choisir une nouvelle ‘maison’. Il lui a été beaucoup plus facile de programmer ce nouvel ordinateur afin d’entendre une nouvelle voix.

La journée commence. Il s’habille comme il peut tout en prenant son café. Chemise blanche repassée la veille par lui-même. Une cravate comme tous les jours. Et son costume noir de chez Sam Montiel, très chic et très branché. Chaussures cuir noir. Comme il aime faire remarquer :<span class="dialogue">"Vous êtes soit dans vos chaussures, soit dans votre lit. Alors il faut de bonnes chaussures et une bonne literie !"</span>La météo a annoncé un ciel bleu et des températures au-dessus de la normale saisonnière. C’est un très beau mois de mai qui s’annonce.</div><div class="credits">(c)Nathou/maquette par Naütilus</div>
Nathou
Date d'inscription : 11/06/2020
Messages : 21

Contenu sponsorisé


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