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
Maxi-graphiste
Milou
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
Milou
Maxi-graphiste
Date d'inscription : 12/10/2013
Messages : 3810


[FACILE] Exercice 10 - Fiche RP "Japanese Night" Mtci
Newbie
Adèlys
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 ♥️
Adèlys
Newbie
Date d'inscription : 15/05/2017
Messages : 41
Ancien.ne du staff
Batty
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
Batty
Ancien.ne du staff
Date d'inscription : 05/06/2014
Messages : 3513
Newbie
Adèlys
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 !
Adèlys
Newbie
Date d'inscription : 15/05/2017
Messages : 41
Ancien.ne du staff
Batty
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 ^^
Batty
Ancien.ne du staff
Date d'inscription : 05/06/2014
Messages : 3513
Fidèle au poste !
Nanto
Fini ! Ici :

Nanto
Fidèle au poste !
Date d'inscription : 07/06/2016
Messages : 330
Ancien.ne du staff
Sun
@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)
Sun
Ancien.ne du staff
Date d'inscription : 22/12/2016
Messages : 266
Newbie
Emi
Voilà ce que j'ai fais ! :3
Emi
Newbie
Date d'inscription : 17/05/2015
Messages : 94
Modo en stage et designer
Artemis
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
Artemis
Modo en stage et designer
Date d'inscription : 14/01/2017
Messages : 2177


[FACILE] Exercice 10 - Fiche RP "Japanese Night" 1134
Merci Azumii c'est magnifique  plz
Spoiler:
[FACILE] Exercice 10 - Fiche RP "Japanese Night" 51Nr7
Merci Sygea ! **Merci Shigurai !
[FACILE] Exercice 10 - Fiche RP "Japanese Night" J3lo
[FACILE] Exercice 10 - Fiche RP "Japanese Night" Dn89
[FACILE] Exercice 10 - Fiche RP "Japanese Night" Uan6
Merci Fufu :3
Merci Milou !  c: ♥️
[FACILE] Exercice 10 - Fiche RP "Japanese Night" Ly4jFos
Merci xMia et Alek !  [FACILE] Exercice 10 - Fiche RP "Japanese Night" 3775839356
[FACILE] Exercice 10 - Fiche RP "Japanese Night" Essai_Cadeau
[FACILE] Exercice 10 - Fiche RP "Japanese Night" Qz09
Merci Funeral !  [FACILE] Exercice 10 - Fiche RP "Japanese Night" 3775839356
[FACILE] Exercice 10 - Fiche RP "Japanese Night" 1no3
Merci Naütilus. ! :'D
[FACILE] Exercice 10 - Fiche RP "Japanese Night" Signaa10
Merci Reine des Ténèbres !  Coeur 2
[FACILE] Exercice 10 - Fiche RP "Japanese Night" 18041502233812811115668294
Merci Eskimo. !  Coeur

[FACILE] Exercice 10 - Fiche RP "Japanese Night" 447717kdoartemis
Newbie
Emi
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 , ç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 !
Emi
Newbie
Date d'inscription : 17/05/2015
Messages : 94
Newbie
MockingBird
Bonjour !
Je me suis testé sur ce code (qui est beaucoup trop beau, j'adore le rendu) !
Voilà le résultat c:
MockingBird
Newbie
Date d'inscription : 01/08/2019
Messages : 17
Contenu sponsorisé
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum