Revenir en haut Aller en bas
Epicode
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment :
LEGO® Ideas 21320 – Les fossiles de ...
Voir le deal
49.99 €

Aller en bas
Milou
Milou
Graphiste
  • Date d'inscription : 12/10/2013
  • Messages : 4099
Coucou ! Voilà un petit schéma de fiche, j'espère qu'il pourra vous servir :) Les infos sont sur l'image, taguez-moi si il vous manque des données ^^ J'ai indiqué une hauteur maximale sur ma maquette, mais vous pouvez faire en sorte que le cadre s'allonge avec le texte, l'image d'en-tête le permet normalement ;)

[FACILE] Exercice 10 - Fiche RP "Japanese Night" FI8apJb
Images nécessaires:
[FACILE] Exercice 10 - Fiche RP "Japanese Night" ATtiKlp[FACILE] Exercice 10 - Fiche RP "Japanese Night" VUqjSSv
_______________



Mar 26 Juin 2018 - 15:18
Adèlys
Adèlys
Newbie
  • Date d'inscription : 15/05/2017
  • Messages : 42
Hey ! C'est le premier exercice que je fais, mais j'ai essayé de faire au mieux :D
Je savais pas si le titre devait être de la taille du cadre du texte ou de la taille du fond, donc j'ai fait selon ce que je trouvais le plus pratique (flemmarde/20)
Pareil, vu que je suis une flemmarde, j'ai fait en sorte que le fond et le cadre du texte s'adapte selon la taille du texte.

Je mets le lien vers le code en hide, vu que les gens peuvent le modifier à leur guise dès qu'ils y ont accès, je préfère pas qu'ils cassent tout ^^'
(Et de toute façon, je viens de voir dans les règles de la section qu'il fallait faire comme ça 8D Comme c'est pratique !)



Voilà ♥️ Des bisous ♥️
_______________
Mar 26 Juin 2018 - 17:23
Batty
Batty
Ancien.ne du staff
  • Date d'inscription : 05/06/2014
  • Messages : 3514
Hello @Adèlys !

Alors premièrement ton code est très bien =D mais comme le but des exercice est de vous aider a vous amélioré j'ai chercher toute les petite erreur et/ou les chose que j'aurais fait autrement.

Alors premièrement, pour ton image de fond tu a utiliser " background-size: cover;" ce qui en soit n'est pas mal, mais la valeur "cover" demande a notre image de prendre toute l'espace possible à l'intérieur de notre bloc tout en gardent un ratio proportionnelle pour ne pas déformer l'image. Du coup lorsque la fiche est plus longe (car il y a plus de texte a l'intérieur) l'image s'étire vers le bas et la droite. Donc notre image est tronquer. Personnellement j'aurais préféré utiliser "background-size: 100% auto;" pour que mon image prenne toute la largeurs de ma fiche et qu'elle garde sa valeur original en hauteur. de toute façons, l'image est dégrader vers un couleur unis que tu a mis en background du coup on ne voie pas de démarcation entre l'image et le fond. Même que dans ce cas précis avec cette image précise je n'aurais pas mis de "background-size: 100% auto;" puisque l'image est déjà a la bonne taille =P

Ensuite dans ta div nommé .bl1 tu a mis height: 100%;. J'imagine que tu souhaitait que cette div prenne toute l'espace en hauteur à l'intérieur de ton conteneur. Comme un width: 100%; peut le faire. Par contre le height n'agit pas de la même façon. Il prend toute la hauteur de la fenêtre et on obtiens Ceci . Ce qui n'est surment pas le résultat voulu. Du coup moi je n'aurais tout simplement pas spécifier de hauteur. Ainsi, cette div va s'étiré selon sont contenue. C'est son comportement par défaut.

Voilà ! c'est en gros les seul chose que j'aurais modifier/fait autrement. Du coup c'est un très bon code =P
_______________
Mer 27 Juin 2018 - 15:15
Adèlys
Adèlys
Newbie
  • Date d'inscription : 15/05/2017
  • Messages : 42
Hoho, comme je suis contente ! On m'a dit que mon code était bien **
Bon après c'est une simple fiche, comment je me débrouillerai avec des templates ? ;-;

C'est vraiment pas bête pour le background. J'ai tellement l'habitude d'utiliser le cover pour ce genre de choses que je n'ai pas fait gaffe !

Haaaaan, oui exact. Du coup, bye bye height:100% 8D

Bah merci beaucoup ! Ca va m'être très utile !
_______________
Jeu 28 Juin 2018 - 16:19
Batty
Batty
Ancien.ne du staff
  • Date d'inscription : 05/06/2014
  • Messages : 3514
Je suis sur que tu peux réussir avec les Template si tu fait ça comme il le faut et sans te précipiter ;)

Je te conseille de faire ton code au côté en premier lieu. Fait la mise en page comme une fiche. Une fois que c'est à ton goût utilise le tuto a propos de ce Template et positionne les balise : {BALISE} au bon endroit en faisant gaffe à ne pas supprimer les boucle (c'est les commentaire en orange). Finalement tu remplace le tableau de FA par ton code tout neuf.

Si tu le souhaite je peux t'aider a faire ton premier template. Sélectionne un exercice, monte ton code en "fiche" et tag moi je te donnerais un mini cours et te guiderais =P

Une fois qu'on la fait une fois et qu'on a compris c'est simple ^^
_______________
Jeu 28 Juin 2018 - 18:44
Nanto
Nanto
Fidèle au poste !
  • Date d'inscription : 07/06/2016
  • Messages : 334
Fini ! Ici :

_______________
Sam 11 Aoû 2018 - 20:26
Sun
Sun
Ancien.ne du staff
  • Date d'inscription : 22/12/2016
  • Messages : 266
@Nanto
Bonjour toi :D Ça rend vachement bien, mais pour commencer je te laisserai corriger ta fiche avec les balises comme je te l'ai expliqué dans ton autre exercice (ici), on verra ensuite s'il reste deux-trois petits trucs à corriger x)
_______________
Dim 9 Sep 2018 - 13:46
Emi
Emi
Newbie
  • Date d'inscription : 17/05/2015
  • Messages : 95
Voilà ce que j'ai fais ! :3
_______________
Ven 1 Mar 2019 - 16:57
Artemis
Artemis
Admin & serial codeuse
  • Date d'inscription : 14/01/2017
  • Messages : 3015
Coucou @Emi ! [FACILE] Exercice 10 - Fiche RP "Japanese Night" 3775839356
Alors, si le rendu est plutôt similaire, ton code gagnerait à être plus propre. Je vois que le positionnement te pose problème (ou que tu ne connais pas encore ces propriétés-là) car tu positionnes en margin, et ça cépabien. 8D En effet, les margins ne servent pas à positionner des blocks, mais, comme leur nom semble l'indiquer, à créer de petites marges entre les blocks afin de les espacer de quelques pixels, par exemple. Là, tu places tes blocks avec de très gros margins négatifs, ce qui n'est pas fait pour. ;)

Ensuite, je vois du CSS dans le HTML. Pourtant, tu as séparé la plupart du CSS, alors pourquoi ne pas l'avoir fait en entier ?

Code:
<span style="font-size:60px; font-family: 'Kristi', cursive; color:#F7DC6F;padding:10px;text-shadow: 1px 1px 2px black;">Titre du RP</span>

Même si ce n'est pas faux en soit, c'est pas propre (et donc pas lisible). Ce n'est pas grave si tu ne sais pas tout à fait cibler tes balises avec le CSS (c'est sans doute pour ça que tu as opté pour le mettre directement dans le HTML), mais tu verras qu'avec les sélecteurs, on peut cibler précisément les balises ! Je te donnerai le lien du tuto à la fin du post, mais vas-y à ton rythme, une chose à la fois, l'idée n'est pas de t'assommer de jargon mais de te donner quelques conseils. :3

Ensuite, ce morceau de code :

Code:
<div class="cadretexte"><div class="texte">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt venenatis euismod.
</div></div>

Tu n'as pas vraiment besoin de créer deux balises pour mettre en place ton texte. Tu peux le mettre dans une balise p, par exemple, qui est une balise block (comme les div) et donc fusionner le CSS de cadretexte et texte :

Code:
.cadretexte {
  margin: -10px 10px 10px;
  width:300px;
  height:600px;
  background-color : rgb(255, 255, 255,50%);
  display:inline-block;
  vertical-align:top;
}
.texte {
  font-family:Times new roman;
  font-size: 11px;
  height:580px;
  color:#ffffff;
  padding:4px;
  text-align:justify;
  overflow:auto;
  display:inline-block;
  margin:5px;

comme ceci :

Code:
.cadretexte {
  margin: -10px 10px 10px;
  width:300px;
  height:600px;
  background-color : rgb(255, 255, 255,50%);
  vertical-align:top;
  font-family:Times new roman;
  font-size: 11px;
  color:#ffffff;
  padding:4px;
  text-align:justify;
  overflow:auto;
  display:inline-block;

Tu verras que le résultat est le même. <3

Je vois également que tu places très souvent la valeur inline-block dans tes blocks, or on l'utilise souvent pour mettre deux blocks côte à côte par exemple, ce qui n'est pas le cas ici... Essaye de retirer ces valeurs, tu verras que rien ne change. Si tu as du mal à savoir exactement à quoi ça sert et ce que ça fait, pas d'inquiétude, c'est expliqué dans les tutos que je vais te passer. c:

Enfin, voici quelques tutos qui vont t'être super utiles, je n'en doute pas, et qui vont te faciliter la vie à l'avenir 8D
Ce tutoriel te récapitule les balises et t'explique leurs fonctions. Cela va t'aider à avoir un html plus lisible en utilisant sémantiquement les balises ! Et tu verras qu'avec plus de sémantique, il est beaucoup plus simple de cibler les éléments dans le CSS (en effet, c'est plus facile de cibler une balise p bien utilisée qu'une énième div sans trop de signification sémantique). Happyness

Ce tutoriel sur le positionnement te permettra, tout d'abord, de connaître d'autres manières de positionner tes éléments. Tes images par exemple, auraient pu être placées en absolute (c'est une autre manière de sortir les éléments du flux, un peu comme le float, sauf que positionner en float cépa top, mais ça, le tuto te l'expliquera 8D)

Et pour finir (mais c'est facultatif à ton niveau, c'est vraiment à titre informatif, pour commencer à appréhender les sélecteurs, donc no stress si tu comprends pas !) Une bonne introduction aux sélecteurs afin de voir qu'il est possible de cibler un élément dans ton HTML sans forcément utiliser de class ou d'intégrer le style directement dans la balise. (;

En tout cas, c'est un très bon début ! Ne te décourage pas face à ce petit pavé, moi aussi, en débutant, je positionnais en margins, mon code était plein de div et de spans pas joulis et finalement, avec un peu de pratique, ça vient tout seul ! Bon, j'ai arrêté les cours sur le forum mais si tu as des questions, n'hésite pas à venir en MP [FACILE] Exercice 10 - Fiche RP "Japanese Night" 3775839356
_______________


 
Dim 3 Mar 2019 - 10:45
Emi
Emi
Newbie
  • Date d'inscription : 17/05/2015
  • Messages : 95
Coucou ! Alors tout d’abord je te remercie d’avoir analysé mon codage ! Effectivement je débute TOTALEMENT donc ça ne me fera pas de mal xD

C’est vrai que j’aurai pu tout séparé, je t’avoue que je sais pas trop pourquoi j’ai mis un <span style>, ça me paraissait “mieux” vu que c’était juste pour le titre.

Pour le cadre texte et le texte, je n’ai effectivement pas pensé à tôt rassembler. J’avais peur qu’avec mes margin etc ça bougerai tout ! (Avec tous les margin que j’ai mis effectivement xD)

En tout cas merci pour tous ces bons conseils, je vais les appliquer et aller jeter un œil à tous ces tutoriels ! Et j’ai quelques questions donc pour ne pas polluer tout le topic ici je vais t’envoyer tout ça en MP. x3

Merci beaucoup encore une fois !
_______________
Dim 3 Mar 2019 - 11:14
MockingBird
MockingBird
Newbie
  • Date d'inscription : 01/08/2019
  • Messages : 82
Bonjour !
Je me suis testé sur ce code (qui est beaucoup trop beau, j'adore le rendu) !
Voilà le résultat c:
_______________
Lun 5 Aoû 2019 - 18:03
Avalonne
Avalonne
Newbie
  • Date d'inscription : 13/07/2021
  • Messages : 27
Bonjour !

J'ai fait ce petit exercice car j'aimais bien le thème du code et je n'ai jamais essayé de faire de la décoration avec plusieurs images ! La seule chose j'ai bloqué c'était sur les lanternes, j'ai pas réussi à les faire superposer aux avatars D:  

HTML:


CSS:



Rendu:

_______________
Mer 14 Juil 2021 - 14:57
'Christa
'Christa
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 733
Hello @Avalonne !

Je m'en viens te donner quelques petits conseils pour améliorer ton code après cette tentative tout à fait honorable ^^

Mes remarques relatives à ton précédent exercice s'appliquent ici également, notamment en ce qui concerne les largeurs (et hauteurs) et l'utilisation des balises de titre plutôt que des balises <div>.

Ce qui me chagrine dans cette tentative, c'est qu'il y a moins ce bel agencement des blocs que l'on voit dans la maquette. Ton bloc de texte est collé à droite, le bloc des avatars n'est pas centré dans la deuxième "colonne". Tu pouvais attribuer une marge interne (un padding) à ton bloc conteneur principal, et pour les deux conteneurs enfants (les colonnes), vu qu'ils sont flexibles, attribuer à celui de droite la largeur de l'image des lanternes (et une marge côté gauche) et laisser à flexbox le soin d'ajuster la largeur du bloc de gauche avec un petit flex:1.

Il y a un vieux tutoriel sur flexbox sur Epicode (qui gagnerait à être mis à jour) mais si tu es à l'aise avec l'anglais, ma bible est cet article de CSS Tricks que je ressors dès que je sais plus où j'en suis. Les illustrations sont fabuleuses pour se faire une idée !

J'allais dire que y'avait trop de flexbox, mais en réalité c'était effectivement utile partout, même si tu n'as pas tout exploité idéalement :
- Sur toute la fiche, pour avoir les deux colonnes de contenu côte à côte (en gardant en mémoire que ce flex-direction:row; n'est pas utile)
- Sur la colonne de droite, pour s'assurer que le conteneur du texte prenne bien toute la hauteur sans avoir à calculer la hauteur parfaite

- Sur la colonne de gauche, pour ajuster son contenu verticalement à partir du bas et centrer le tout horizontalement
(pas besoin de marges pour éloigner du bord haut ! ON NE POSITIONNE PAS AVEC DES MARGES (╬▔皿▔)╯)


Concernant les lanternes, tu avais plusieurs façons de gérer leur affichage. Une façon "classique" est de rajouter dans la fiche un bloc contenant l'image des lanternes et de le positionner en absolu en haut à droite. Une autre façon (que j'aurais faite) aurait été d'utiliser le pseudo-élément ::after sur ton conteneur principal, par exemple de cette façon :

(désolée, lecteurs de passage, je mets en hide, vous en saurez plus sur cette solution après avoir posté vos essais XD)

Pour l'essentiel, sur le code complet de cette fiche, tu n'avais besoin de spécifier qu'une hauteur et deux largeurs pour avoir un code fonctionnel :) Pour la hauteur des blocs de texte, il vaut mieux jouer avec la propriété line-height ! (en utilisant l'unité em pour avoir de bons résultats)

Voilà voilà, je pense que j'ai dit l'essentiel, à toi de voir si tu veux essayer de faire mieux ! Ordi
_______________


[FACILE] Exercice 10 - Fiche RP "Japanese Night" 14n2 [FACILE] Exercice 10 - Fiche RP "Japanese Night" Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[FACILE] Exercice 10 - Fiche RP "Japanese Night" 7WZJTfh
Ven 16 Juil 2021 - 2:19
Avalonne
Avalonne
Newbie
  • Date d'inscription : 13/07/2021
  • Messages : 27
Ahah encore merci d'avoir pris le temps pour cette exercice !

Beaucoup de chose lié à l'autre exercice comme tu dis ! Donc j'ai pas pu les appliquer ici mais j'en prends toujours note !

Je prends aussi en compte les solutions pour la superposition des images pour la prochaine fois. Je ne savais pas trop comment faire je dois l'avouer ! Je ne connaissais pas du tout l'élément :after non plus je vais devoir regarder ce que ça fait !

Pour les :auto je vais essayé ça des mon prochain code.

Je te remercie encore du temps passé pour mon exercice !
_______________
Ven 16 Juil 2021 - 9:30
Lili Rose
Lili Rose
Newbie
  • Date d'inscription : 07/08/2021
  • Messages : 14


Voilà le code pour ton exercice ! Il y un truc qui cloche, si tu pouvais me dire ce que c’est, ça serait vraiment top ! Merci !
_______________
Mar 10 Aoû 2021 - 2:34
Contenu sponsorisé
    _______________
    Revenir en haut