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
Petit exercice facile



bannière :

Spoiler:

Police : Kaushan Script

Tutoriel :

Les transformations




Spoiler:

Codée par Sun d'amour
Dorea McH
Sexe : Féminin
Date d'inscription : 08/01/2017
Messages : 176
Membre timide
Voir le profil de l'utilisateur
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.

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
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:


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




Spoiler:

Codée par Sun d'amour
margo
Sexe : Féminin
Date d'inscription : 09/03/2013
Messages : 248
Membre timide
Voir le profil de l'utilisateur
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..?
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
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




Spoiler:

Codée par Sun d'amour
margo
Sexe : Féminin
Date d'inscription : 09/03/2013
Messages : 248
Membre timide
Voir le profil de l'utilisateur
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/
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum