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

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

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

Aller en bas
Ancien.ne du staff
Reine des Ténèbres
Petit exercice facile

[Facile] Exercice 6 - Fiche simple | Reine' JUzn

bannière :

Spoiler:
[Facile] Exercice 6 - Fiche simple | Reine' 18060104322712811115740600

Police : Kaushan Script

Tutoriel :

Les transformations
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
Membre timide
Dorea McH
Voilà mon travail! Pas sûre que le codage soit très propre, je continue de bidouiller un peu au niveau des margin pour créer de la distance entre mes blocs, mais au moins il a le mérite d'être là! Je suis contente d'avoir fait cet exo qui m'a en quelque sorte fait découvrir le tuto proposé: je connaissais déjà le transform: rotate mais pas les autres bien que j'en avais vu en action.

Dorea McH
Membre timide
Date d'inscription : 08/01/2017
Messages : 178
Ancien.ne du staff
Reine des Ténèbres
Coucou, @Dorea McH.

Je suis ravie que tu aies travaillé cet exercice. Ton rendu est joli, bravo.
Voici quelques remarques pour t'aider à progresser.

La première chose que j'ai remarqué est que tes noms de classes sont très difficiles à retenir, c'est bien d'avoir choisi des noms originaux pour ne pas avoir des interférences avec le reste des codes éventuels mais n'hésite pas à choisir des noms avec un peu de sens pour que tu ne te trompes pas de sélecteur après dans le CSS et que ça soit plus simple. Perso je choisis des noms du genre : rds_titre, rds_citation etc. Mais peut-être que ces noms ont un sens pour toi donc ça reste assez subjectif.

overflow
Code:
.cot1 {
  height: 700px;
  overflow: hidden;
}

Ici tu forces ta fiche à cacher son contenu si elle dépasse 700px, tu risques donc de perdre la partie crédit, d'ailleurs elle est bel et bien cachée si on mets le code directement sur une page vierge hors forum.
Ce qu'on veut caché au fait c'est l'overflow ou le débordement de l'image, donc il sera plus sûr de mettre la propriété dans la div parente de l'image ent1.

Skew
Code:
.imt1 {
  display: block;
  margin: -10px auto 0;
  transform: skew(0deg, 3eg);
}

Ici tu n'as pas besoin de la fonction transform parce que tu as appliquée ta transformation à ton bloc et l'image est à l'intérieur du bloc. D'ailleurs ici ta transformation n'a pas fonctionné parce que tu as oublié un d pour 3deg.
Et juste pour info, tu peux avoir le même effet avec une rotation de 5deg, mais c'est bien d'expérimenter de nouvelles choses.

Box-sizing

Tu ne l'as surement pas remarqué parce que le CSS du forum contient un box-sizing de type border-box mais voilà à quoi correspond tes blocs en réalité :
Spoiler:
[Facile] Exercice 6 - Fiche simple | Reine' Dft10

Par défaut la largeur d'un bloc est calculée de cette façon :
width + margin-left + margin-right + padding-left + padding-right + border-left
+ border-right
Dans ton cas, la largeur total de ton titre est : width = 450px
mais la largeur de ton paragraphe est : width + padding = 450 + 20 + 20 = 490px
Donc tu peux soit déduire la valeur du padding et mettre en width 410 ou si tu n'a pas envie de te casser la tête avec les calculs utiliser la propriété box-sizing : border-box plus d'infos ici

Pour avoir une prévisualisation réelle de ton code n'hésite pas à le tester sur JSfiddle ou CodePen
Le reste est tout bon, bon courage [Facile] Exercice 6 - Fiche simple | Reine' 3775839356
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
Membre timide
margo
bijour @Reine des Ténèbres,

merci pour cet exercice déjà!
voici mon code


Code:
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" />
<style>.hautfichemg{background-color:#fefff0;width:450px;height:100px;display:block;margin:auto;font-family: 'kaushan script', cursive;} .grandtitremg{margin-top:20px;font-size:40px;color:#efd8ff;width:450px;height:60px;transform:rotate(3deg) skew(3deg);text-align:center;}.bloctextemg{background-color:#facf8d;width:410px;height:440px;display:block;margin:auto;margin-top:40px;font-family: 'arial';color:#fefff0; padding:20px;}.petitmg{font-style:italic;margin-top:20px;text-align:center; height:20px;border-bottom:2px solid #fefff0} .titrerpmg{padding:5px;width:360px;height:30px;background-color:#fefff0;margin:auto;margin-top:20px;font-family:'kaushan script', cursive;color:#765b7e;text-align:center;text-transform:uppercase;}
  .blocrpmg{margin:auto;background-color:#765b7e
; width:360px; height:120px;overflow:hidden; text-align:justify;padding:5px;}.blocrpmg:hover{overflow:auto;}.creditmg{opacity:0.5;background-color:#fefff0;font-size:9px;margin:auto;margin-top:20px;color:#000;text-align:center;width:140px;}</style>

<div class="hautfichemg"><div class="grandtitremg">Grand Titre<img src="https://nsm09.casimages.com/img/2018/06/01//18060104322712811115740600.png" style="width:450px;border-bottom: 25px solid #fefff0;"  alt="bannière" /></div></div><div class="bloctextemg">
<div class="petitmg">une petite phrase qui devrait être un peu longue</div><div class="titrerpmg">premier sous titre</div><div class="blocrpmg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dui arcu, euismod nec condimentum non, suscipit sit amet nisl. Nullam augue lorem, placerat id mi in, tincidunt rhoncus mi. Suspendisse nulla erat, tincidunt sed massa porttitor, lobortis tempus odio. Fusce auctor in mi et gravida. Integer eget sem aliquam, placerat turpis non, eleifend lacus. Nam eget consequat orci. Proin et felis in quam pretium hendrerit in vitae quam. Pellentesque risus odio, euismod rhoncus velit vel, laoreet malesuada elit. Mauris consectetur porta magna volutpat cursus. Aenean congue ligula sed diam facilisis, nec tristique eros consectetur. Integer rhoncus tristique ex, ut tincidunt justo pharetra quis. In quis ullamcorper felis, eget fermentum odio. Suspendisse rhoncus sollicitudin felis sit amet auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </div><div class="titrerpmg">deuxième sous titre</div><div class="blocrpmg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dui arcu, euismod nec condimentum non, suscipit sit amet nisl. Nullam augue lorem, placerat id mi in, tincidunt rhoncus mi. Suspendisse nulla erat, tincidunt sed massa porttitor, lobortis tempus odio. Fusce auctor in mi et gravida. Integer eget sem aliquam, placerat turpis non, eleifend lacus. Nam eget consequat orci. Proin et felis in quam pretium hendrerit in vitae quam. Pellentesque risus odio, euismod rhoncus velit vel, laoreet malesuada elit. Mauris consectetur porta magna volutpat cursus. Aenean congue ligula sed diam facilisis, nec tristique eros consectetur. Integer rhoncus tristique ex, ut tincidunt justo pharetra quis. In quis ullamcorper felis, eget fermentum odio. Suspendisse rhoncus sollicitudin felis sit amet auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </div><div class="creditmg">Fiche codée par Reine et margo</div></div>

j'ai vraiment eut du mal à savoir comment combler les trous provoqués par le skew et le rotate. j'espère que tu vas pouvoir m'expliquer **

EDIT : alors, je voulais poster un aperçu maiiis apparemment mes noms de classes sont pas originaux ou je comprends pas ce qu'il se passe.

RE-EDIT : et pourquoi j'ai cet aperçu sur code pen https://i.imgur.com/ZLn19vB.png et quand je poste ici ça brique tout..?
margo
Membre timide
Date d'inscription : 09/03/2013
Messages : 248
Ancien.ne du staff
Reine des Ténèbres
Coucou @margo
J'espère que cet exercice t'a été utile :3
Tu as fait du bon travail bravo. Voici donc mes quelques remarques.

Les blocs grandtitremg et hautfichemg entourne le même contenu du coup j'ai du mal à voir l'intérêt de mettre deux div alors qu'une seule aurait suffit.

Tu peux fusionner le CSS ainsi et enlever une div

Code:
.hautfichemg {
  background-color: #fefff0;
  width: 450px;
  height: 100px;
  /*display: block;*/
  margin: auto;
  font-family: "kaushan script", cursive;
  margin-top: 20px;
  font-size: 40px;
  color: #efd8ff;
  transform: rotate(3deg) skew(3deg);
  text-align: center;
}

Tu dois avoir remarqué que j'ai mis le display en commentaire, c'est pour te dire qu'une div est un bloc par défaut donc il est inutile de mettre un display:block;

Sinon ta transformation est correcte, tu as utilisé une rotation et une inclinaison pour combler le vide c'est très bien. Si par exemple on voudrait utiliser uniquement une seule transformation, il aura suffit d'augmenter la largeur du bloc et ajouter une div qui va entourer toute la fiche. On pourrait alors lui mettre un overflow:hidden pour cacher ce qui dépasse du bloc.

Dans bloctextemg, on a encore un display: block; inutile vu que c'est déjà un bloc.

J'aime particulièrement que tu as caché la scrollbar et qu'elle n'apparaît qu'au hover, bravo :3

Pour l'aperçu du code il est très probable d'avoir quelques bugs du au CSS de base de FA et celui du forum.

Tu auras certainement un petit souci de largeur vu que le forum est en border-box.
Par défaut, la largeur totale d'un bloc est la somme de width + padding horizontaux + border horizontaux. Ce modèle est appelé "content-box". la limite de la largeur est définie par le contenu du bloc ou "boite", le reste (padding et borders) n'est pas pris en compte dans la largeur.
Donc pour avoir la même largeur tu as changé width en fonction de tes padding et border, tu as ton premier bloc à 450px et le deuxième à 410px ce qui est parfait.

Sur Epicode, on a changé ce modèle via le CSS et on a opté pour le modèle "border-box" qui veut dire que la largeur est définie jusqu'à la bordure. Dans ce modèle la largeur de la boite est égale à width. Le padding et border sont automatiques réduit de la valeur de width par le navigateur. C'est à dire si tu mets width: 500px; le navigateur fait en sorte que peu importe la valeur du padding et des bordures, la largeur totale sera 500px.

Le même système s'applique évidemment à la hauteur.
Donc pour ton code, tu as une différence de width de 40px et ça va malheureusement se voir sur Epicode.

Alors, pour ta fiche, si tu veux régler ce petit bug, tu peux simplement ajouter un bloc parent qui contient toute la fiche et lui définir la largeur que tu veux. Tes blocs (hautfichemg et bloctextemg) devraient prendre toute la largeur du bloc. Donc le plus simple est de ne pas mettre une largeur définie à ces blocs là. Si tu ne mets pas de width, le bloc va prendre toute la largeur disponible et donc automatiquement la largeur du bloc parent.
Plus d'infos box-sizing
Voilà voilà bon courage [Facile] Exercice 6 - Fiche simple | Reine' 3775839356
Reine des Ténèbres
Ancien.ne du staff
Date d'inscription : 15/08/2017
Messages : 3183
Membre timide
margo
coucou @Reine des Ténèbres,

ce display:block je le mets partout sans m'en rendre compte.
merci pour toutes tes explications ** je m'en vais de ce pas lire ce box-sizing \o/
margo
Membre timide
Date d'inscription : 09/03/2013
Messages : 248
Newbie
MockingBird
Saaaalut [Facile] Exercice 6 - Fiche simple | Reine' 486990734

Encore une fois, j'aime beaucoup cette fiche (décidément vos maquettes sont vraiment cool !), et je m'y suis testée.
Voici le code :


Merci à vous du temps que vous m'accorderez c:
MockingBird
Newbie
Date d'inscription : 01/08/2019
Messages : 17
Modo - Waifu du staff
Azalée
Coucou @MockingBird ton code respecte parfaitement le visuel de la fiche c'est super [Facile] Exercice 6 - Fiche simple | Reine' 3775839356
Cependant, si tu souhaites encore l'améliorer davantage voici mes conseils:
D'abord, tu peux facilement réduire le nombre de balises utilisées ainsi que le nombre de sélecteurs. Par exemple, tu peux utiliser des balises titres pour tes titres et les sélectionner avec la class de ton conteneur.
Par exemple
Code:
<div class="bg">
   <div class="titre">Grand Titre</div>
On peut plutôt mettre:
Code:
<div class="bg">
   <h2>Grand Titre</h2>
et dans mon css ça ferait:
Code:

  .bg h2 {
    font: 45px 'Kaushan Script';
    color: #ab8cae;
    float: right;
    padding: 10;
    transform: rotate(6deg);
    margin-right: 50;
    margin-top: 5;
    text-shadow: 1px 1px black
  }  
  
Tu peux répéter cette procédure à plusieurs endroits dans ton code. Je te conseille de lire ce tutoriel qui te montre en détail plusieurs balises et leurs utilités.

Deuxième remarque est l'utilisation des tableaux dans ton code. Il faut savoir qu'il n'est plus correct de les utiliser sauf si on souhaite faire un vrai tableau. Il existe aujourd'hui énormément de propriétés qui te permettent de postionner tes éléments beaucoup plus facilement.
D'autant plus que dans ton cas, je ne vois pas l'utilité puisque rien ne s'aligne ce que j'ai trouvé étrange. (Les gens qui utilisent les tableaux s'en servent justement parce que bien souvent ils ne savent pas comment sans).

Comme tu as un bon niveau, je pense que tu es capable d'améliorer ton code par toi même avec les astuces que j'ai donné. Si tu as des questions n'hésites pas !  
Azalée
Modo - Waifu du staff
Date d'inscription : 26/12/2013
Messages : 3970


I N K T O B E R 2 0 1 9 !
Contenu sponsorisé
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum