Teddybear ∞
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1271
Anim - Potterhead lapine
Voir le profil de l'utilisateur
Heyyy tout le monde !
Je viens vous proposer un petit exercice sur une jolie fiche que Funeral m'a grapher ! J'ai hâte de voir vos prouesses sur cette fiche !

Infos pour le fiche :
Police :
- Titre : Bebas Kai
- Textes : Century Gothic
Couleur:
- bordure : #e0b325
- background : #eeeeee
- infos (âge etc):
 - background: #070729
 - color : #c7a194
- titre et sous-titre : #e5b9a8



Merchiiii Naüt ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :

By Moses :

By une personne :

By Milou :
CAHOTIC
Sexe : Féminin
Date d'inscription : 23/08/2018
Messages : 15
Newbie
Voir le profil de l'utilisateur
Hey, alors, voilà mon exercice. Dance 3 j'aimais bien la présentation et du coup, je me suis lancée. Hap et puis, le code pourra garnir ma candidature ici Very Happy  étant donné que je ne peux répondre au commande, dans l'immédiat et que mon ''portfolio'' est à sec Sad

(la grosse différence visuellement est juste l'arrondi en jaune, sinon, la similitude est présente Blabla )
https://images2.imgbox.com/b4/7a/ZRf9zyZY_o.png

Kayl
Sexe : Féminin
Date d'inscription : 12/05/2018
Messages : 200
Ancien.ne du staff
Voir le profil de l'utilisateur
Bonjouuur :D Alors c’est pas mal °° Néanmoins j’ai des petites choses à redire sur le code, sinon ce serait pas drôle xD

Niveau visuel c’est bien, effectivement à part l’arrondi jaune tout est bien ressemblant :D (pour l’arrondi, tu aurais juste pu mettre une hauteur plus grande pour faire encore plus arrondi, mais ça c’est du détail)
Et sinon je sais pas si t’as zappé, ou si t’as juste décidé de faire sans, mais y a un très léger ombrage sur les titres (en blanc, un text-shadow très léger) enfin ça aussi c’est du détail xD Passons plutôt au code °^°

> La première chose que je remarque c’est la balise center. Cette balise est désormais obsolète, et peut être remplacée par un "margin: auto;" dans le CSS des éléments à centrer

> De même, en général il est mieux de ne pas utiliser la balise table, il y a pour cela d’autres façons de faire que tu peux trouver  ici (click), qui explique le fonctionnement du display en inline-block **

> Normalement, on utilise une balise pour chaque type d’élément : au lieu de ne mettre que des div, on peut mettre :
Code:
<p> </p> pour un paragraphe de texte
<h1></h1> à <h6></h6> pour des titres, du plus au moins important

Ce qui permet de nous y retrouver plus facilement : lorsqu’on voit une balise de paragraphe, on sait tout de suite qu’elle correspond à un texte sur le visuel °^° C’est question de conventions et tout ça /paf/

> Pour la bordure entre le physique et le mental, tu aurais pu faire un bloc englobant tout le physique (titre + texte) et lui mettre
Code:
border-right: 3px solid #e5b9a8;
plutôt que de la positionner avec des marges :sisi: C’est plus propre de mettre juste une bordure simple

> J’ai vu quelque part un style="" dans le HTML, en général il vaut mieux éviter et tout mettre dans des class et des id. D’ailleurs, les ID sont bien pratiques, tu peux faire un saut ici (click) pour en savoir plus :D

Voilà globalement c’est tout, ensuite tu pourras utiliser des sélecteurs pour mieux t’en sortir avec toutes ces classes (je te laisse aussi le lien (click) du tuto si jamais)

En tout cas j’espère que ça t’aura fait un bon entraînement, c’est pas mal déjà, y a 2-3 petits trucs à corriger pour le rendre + propre quoi :D
Sygea
Sexe : Féminin
Date d'inscription : 04/04/2016
Messages : 401
Fidèle au poste !
Voir le profil de l'utilisateurhttps://sygea.deviantart.com/
Hello /o

J'essaye de m'améliorer sur le placement, ça a été laborieux mais j'ai à peu près réussi :



Difficultés:
- L'alignement des petites informations sous le titre principal, je n'ai pas trouvé comment faire ;o; le margin auto n'a pas fonctionné
- L'enchaînement entre le dernier bloc des renseignements (année d'étude) avec le premier bloc "physique", j'ai mis un br en désespoir de cause mais comme ils ont tous un inline-block je ne trouvais pas comment faire autrement pour que le physique aille à la ligne tout en disant à son copain caractère de s'aligner à lui ;o;

Voilà, après je pense que le code est largement optimisable, si vous avez le temps je veux bien voir comment  Admirer  (réduire le nombre de class ou de propriétés par exemple, parfois j'ai l'impression d'en mettre beaucoup inutilement)

Merci d'avance !
CAHOTIC
Sexe : Féminin
Date d'inscription : 23/08/2018
Messages : 15
Newbie
Voir le profil de l'utilisateur
Du coup, j'ai fais quelques correctifs, j'avoue que prendre une pause du codage un certain temps, est pas toujours ultra bénéfique pour la peine, j'ai perdu le fil. du coup, c'est un bon moyen de me mettre un peu à jour, ses exercices. Du coup, il est vrai que la variable display facilite la tâche.  Super héro Ensuite, pour les titres/paragraphe, c'est surtout une habitude. je connaissais les variables, mais ça prend un petit peu de temps avant de changer ça, pourtant, j'ai fais le changement malgré tout.  plz Pour la bordure, il est vrai que ça aurait été plus simple en ajoutant le border-(left/right) mais, je trouvais qu'il était plus facilement repérable de cette façon, du moins dans la partie css, du coup, j'avais opté pour cette option.  

Pour la div avec le ''style'' c'est surtout parce que l'image sera modifiable par le membre, du coup, si je met cette partie en css, c'est impossible. plz Dans l'optique d'une fiche administrative, j'aurais mis tout en css, mais je garde en tête que c'est un code pour une fiche de présentation, donc en l’occurrence l'avatar doit être adaptable  Hap

Kayl
Sexe : Féminin
Date d'inscription : 12/05/2018
Messages : 200
Ancien.ne du staff
Voir le profil de l'utilisateur
Holaaa @Sygea :D
Oh très beau remix de design °^°

Le code est bien aussi :D Bon alors chipotons, sinon c’est pas drôle e.e

> Euh euh :rip:
Awih, déjà j’ai vu qu’il y avait des ID à tes blocs de textes Physique et Caractère, le même ID. Or un ID doit être unique, donc il faudrait qu’il n’y en ait pas 2 mêmes dans une même page
D’ailleurs cet ID là n’est pas très utile, tu pourrais simplement remplacer par :

Code:
<div class="description">
      <h2>Titre</h2>
      <p>Ton texte</p>
    </div>

Et le CSS, remplacer le #descr par :

Code:
.description p{
  max-height: 150px;
}

Avec un sélecteur, comme tu l’as fait avec les h2 **

> De la même façon, tu pourrais retirer l’ID de l’histoire (enfin lui ça va, il est unique déjà, c’est juste si tu veux encore réduire l’utilisation des classes et ID). Et mettre un autre sélecteur, comme tu n’as qu’un seul p directement dans la div “fiche”, et remplacer dans ton CSS l’ID #hist par :

Code:
.fiche > p{
  max-height: 210px;
}

Pour plus d’infos sur les sélecteurs je te laisse ce tuto (click)
Ça c’est juste une autre façon de faire, ce que t’as fait est très bien xD
Mais faut que je trouve des trucs à dire sinon c’est pas drôle

> Euh sinon ta fiche est pas centrée ça m’a perturbée :rip: tu pouvais mettre un margin: auto dans ta classe .fiche pour ne pas me perturber e.e

> Ensuite, tes infos “âge”, “date de naissance” etc sont en div, là pareil tu pouvais mettre en span puisque t’as changé le display en inline-block donc ça marchait bien avec des span aussi
En fait, pour régler tes 2 soucis (l’alignement non centré et le “saut de ligne”) j’aurais englobé ces infos avec une div nommée “je” et à l’intérieur, je mets les span comme ceci :

Code:
<div class="je"><span>age: 101 ans</span> <span>date de naissance: 17 dec 1999</span> <span>sexe: F</span> <span>orientation sexuelle: hétérosexuelle</span> <span>année d'étude: première</span></div>

Et le CSS y a quasi rien à changer : au lieu d’avoir seulement une classe .je, tu mets juste ces propriétés dans un .je span (vive les sélecteurs) :

Code:
.je span{
  display: inline-block;
  background-image:linear-gradient(to left, #222222, black);
  justify-content: center;
  margin-top: 5px;
  color: #A80635;
  text-transform: uppercase;
  padding: 5px;
  text-align: center;
  font-size: 10px;
  font-family: verdana;
}


Ah bah globalement c’est tout ce que j’ai à dire /paf/

Donc effectivement, les sélecteurs tu peux en utiliser plus, et à part le dernier point pour régler les petits soucis, je trouve le code plutôt propre °°

Je termine les corrections quand j'ai le temps :rip:
Sygea
Sexe : Féminin
Date d'inscription : 04/04/2016
Messages : 401
Fidèle au poste !
Voir le profil de l'utilisateurhttps://sygea.deviantart.com/
Merci beaucoup @Kayl pour ton passage aussi rapide ! J'ai corrigé tout ce que j'avais compris + lu le tuto que tu m'as link

Par contre, désolée mais j'ai tout saisi pour l'histoire du span xD J'ai d'abord fait comme tu as dit, mais je vois toujours pas comment centrer les blocs, et du coup le margin-top pour espacer les blocs verticalement marche plus comme c'est plus des blocks mais des span ;o;
Du coup j'ai voulu voir si le flex simplifiait pas les choses, bien que je commence tout juste à l'utiliser dans mes cours avec Yuuki, et j'ai au moins réussi à centrer les petits blocs /o Je sais juste pas si c'est très propre de mixer du display inline et du flex dans le même code xD

Navrée d'insister Admirer

En codage c'est souvent mieux de chipoter pour apprendre correctement, et c'est ce que je veux, alors tant mieux tu fais bien Salut
Kayl
Sexe : Féminin
Date d'inscription : 12/05/2018
Messages : 200
Ancien.ne du staff
Voir le profil de l'utilisateur
@Sygea alors attends xD (effectivement vaut mieux éviter de mélanger tous les displays inline-block, flex, position etc xD)

Euh le HTML est bien, c'est ce que j'avais fait
Code:
<div class="je"><span>age: 101 ans</span> <span>date de naissance: 17 dec 1999</span> <span>sexe: F</span> <span>orientation sexuelle: hétérosexuelle</span> <span>année d'étude: première</span></div>

Ensuite le CSS, au tout départ t'avais
Code:
.je{
  display: inline-block;
  background-image:linear-gradient(to left, #222222, black);
  justify-content: center;
  margin-top: 5px;
  color: #A80635;
  text-transform: uppercase;
  padding: 5px;
  text-align: center;
  font-size: 10px;
  font-family: verdana;
}

(ou un truc similaire), j'ai juste ajouté le span derrière le .je pour les cibler eux ; et ils seront pas en inline, mais en inline-block du coup, et normalement ça devrait pas changer grand chose sur ce que t'avais d'avant : au lieu de mettre que des div (en inline-block aussi), tu changes juste le nom de la balise en span dans le HTML et tu l'ajoutes dans le CSS, et les propriétés vont donc rester identiques

Code:
.je span{
  display: inline-block;
  background-image:linear-gradient(to left, #222222, black);
  justify-content: center;
  margin-top: 5px;
  color: #A80635;
  text-transform: uppercase;
  padding: 5px;
  text-align: center;
  font-size: 10px;
  font-family: verdana;
}

Et pour la div .je, on peut lui mettre une propriété "text-align: center;" pour centrer ce qui se trouve dedans

Code:
.je{
text-align: center;
}

Chez moi ça marche bien (ce qui donne donc ceci chez moi : https://i.gyazo.com/dba9359c49c5be55d866f4cac7b771d5.png )


@Cahotic  
Effectivement si c'était juste la balise style pour l'image c'est vrai que c'est une bonne idée xD
À mon avis on peut retirer certaines des balises .element
Mais je regarderai ça plus en détail quand j'aurai fini ma journée de boulot :tululu:
Sygea
Sexe : Féminin
Date d'inscription : 04/04/2016
Messages : 401
Fidèle au poste !
Voir le profil de l'utilisateurhttps://sygea.deviantart.com/
Ah ouiiiiiiiiii
Tout marche !
Merci beaucoup pour ton aide /o
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum