[INTERMÉDIAIRE] Exercice 2 - Fiche présentation

Ori
Sexe : Féminin
Date d'inscription : 07/11/2015
Messages : 70
Voir le profil de l'utilisateur
Newbie
Bonjour à tous les petits et grands codeurs ! C'est encore moi !

Un schéma de fiche de présentation un peu plus compliqué cette fois. Si vous êtes inspirés n'hésitez pas à reprendre le schéma et à le modifier pour un code plus original.

J'ai utilisé :

Police : Time new roman et Trajan Pro (titres)
Couleurs : #bcbcbc
Images : fleurs, icon

Aperçu :

[INTERMÉDIAIRE] Exercice 2 - Fiche présentation Bfr5
Batty
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3514
Voir le profil de l'utilisateur
Ex-admin gangsta du Québec
Merci pour le partage ! Je suis sur que ton schémas en inspira plus d'un =3

Voici quelque tuto qui pourrons vous aider !

Le positionnement float et ralative/absolute
Positionnement float
La différence entre DIV et SPAN
Les listes

J'ajoute ton schémas au répertoire !

Tetsu
Sexe : Féminin
Date d'inscription : 12/08/2018
Messages : 12
Voir le profil de l'utilisateur
Newbie
Bonsoir [INTERMÉDIAIRE] Exercice 2 - Fiche présentation 3775839356 J'ai trouvé cette fiche de présentation assez jolie alors je me suis lancée [INTERMÉDIAIRE] Exercice 2 - Fiche présentation 665834366

Kayl
Sexe : Féminin
Date d'inscription : 12/05/2018
Messages : 200
Voir le profil de l'utilisateur
Ancien.ne du staff
Bonsoir :D
Ooh pas mal °^° Alors, que peut-on encore améliorer ? :hum:

> La balise center est obsolète, et il vaut mieux ne plus l’utiliser :sisi: On peut la remplacer dans le CSS par
Code:
margin: auto;
Dans l’élément qu’il faut centrer (ici, rajouter donc margin: auto; dans ton .groscadre)

> Alors, l’image en cercle déjà, je vois un style= °° De manière générale, mieux vaut éviter et à la place, mettre un ID pour différencier un élément qui aurait la même classe : je t’envoie sur ce tuto (click)
De cette façon, tu aurais eu dans ton code :

Code:

<img src="https://www.zupimages.net/up/18/11/sros.png" class="iconimg" id="imghaut"/>

.iconimg {
  position: absolute;
  z-index: 2;
  border-radius: 100px;
  -webkit-border-radius: 100px;
}

#imghaut{
  top: 50px;
  left: 185px;
}

> Ensuite alors j’ai vu que tu as utilisé du display inline-block en plus des positionnements relative/absolute, ce qui n’est pas utile : une chose de pratique, tu peux choisir entre les deux o/ (ici tu peux virer ce display: inline-block qui sort de nulle part, et ça changera rien :D )

> Sinon, il existe d’autres balises que les div et span pour mieux structurer :
Code:

<p></p> pour un paragraphe
<h1></h1> à <h6></h6> pour des titres

Avec ces balises, tu peux aussi mieux faire des sélections pour réduire tes classes : par exemple pour l’histoire, tu as :

Code:
<div class="cadreh"><span class="titres">Histoire</span>
    <div class="txt" style="width:264px; height: 295px;">Texte</div></div>

Que tu pourrais remplacer par
Code:
<div class="cadreh"><h2>Histoire</h2>
    <p>Texte</p></div>

Et dans le CSS :
Code:
.cadreh {
  position: absolute;
  ...
}

.cadreh h2{
...
}

.cadreh p{

}

Ce qui réduit vachement le code dans l’HTML °°
Après si tous les titres sont identiques, tu peux aussi faire

.groscadre h2{

}

Et comme ça tu dis à ton code "tous les h2 contenus dans la classe groscadre"

> Sinon pour s’entraîner uniquement avec les div/span c’est bien, t’as compris leur utilisation et tout :D

> De même pour les styles qui se trouvent dans certaines balises de textes, tu peux faire des ID avec (c’est une des possibilités)

> Ensuite, tu as une div pour la bordure °° Déjà je sais pas pourquoi elle est placée au-dessus du bloc "caractère" si c’est pour la mettre entre "caractère" et "physique", dans ce cas autant la mettre dans le HTML, entre les blocs "caractère" et "physique" non ?
Sinon tu aurais aussi pu utiliser la balise hr
Code:
<hr />
Qui n’a pas besoin de fermeture (comme la balise br) et qui permet de mettre juste une ligne, que tu définis ensuite dans ton CSS comme ceci :

Code:
<hr class="barreb" />


(Ou alors la mettre en border-bottom du bloc texte caractère)

> Et pour les derniers éléments, le bloc "en vrai" et la dernière image, pareil tu peux utiliser des ID

Voilà voilà, si tu veux tu peux retravailler la fiche et voir les tutos, en tout cas c’est déjà pas mal :D À part les ID en fait (qui te sauveront la vie) y a pas grand chose
Après je chipote beaucoup, mais c’est pour essayer d’atteindre la perfection //PARPAING//
Wonder
Sexe : Féminin
Date d'inscription : 02/02/2018
Messages : 75
Voir le profil de l'utilisateur
Newbie
Bonsoir Salut J'ai tenté le coup à mon tour, en espérant pas avoir fait trop de bêtises avec le positionnement parce que.. well je tâtonne x')
J'ai pas réussi à avoir le même rendu que le modèle pour la liste avec "nom prénom; âge etc" mais je sais pas comment réduire la distance entre le texte et la barre owo' + la barre hr est pas super mais j'ai pas réussi à lui appliquer une couleur unie, je dois mal m'y prendre x.x

Sun
Sexe : Féminin
Date d'inscription : 22/12/2016
Messages : 266
Voir le profil de l'utilisateur
Ancien.ne du staff
Hellow toi ! @Wonder
Premièrement, je dois dire qu'à première vue, ton code est bien foutu, bravo ! x)
Bien sûr, il y a deux trois petites choses à dire, mais bon x)

Commençons par tes questions :
• L'espace entre la barre et les infos "nom, prénom, âge, etc" :
Faut jouer sur le padding :sisi: Quand il y a un espace entre le texte et la bordure, logiquement c'est une question de padding, là apparemment il s'est mis à 15px par défaut je crois xD Si tu notes padding: 5px, ça donne un rendu similaire au schéma x)
• La barre hr :
Si ça rend pas comme tu veux, tu lui mets simplement des paramètres dans le css, et pas forcément besoin de class (même si c'est toujours mieux au cas où il y aurait un autre hr sur la même page). Pour que ça rende comme sur le schéma, j'ai mis ceci :
Code:
hr{
  background: #FFF;
  height: 1px;
  border: none;
}

À côté de ça, j'ai juste un petit souci avec ton code :
Code:
<div class="icon haut" style="background-image:url('https://www.zupimages.net/up/18/11/sros.png'); background-size:cover;"></div>
Il y a un style, c'est à virer :rip: Après, c'est vrai qu'avec un background, c'est plus compliqué, mais il y a une technique x) Ceci dit, là t'as même pas besoin de background, étant donné que ton hover n'est qu'une simple transformation d'image. Tu pourrais donc faire ceci :
Code:
<img class="icon haut" src="https://www.zupimages.net/up/18/11/sros.png"/>
Ça marche tout aussi bien, et t'as même pas besoin de changer ta class :sisi:


Et je pense que c'est tout ce qu'il y avait à dire, en espérant que ma correction te sera utile x)
Wonder
Sexe : Féminin
Date d'inscription : 02/02/2018
Messages : 75
Voir le profil de l'utilisateur
Newbie
@Sun [INTERMÉDIAIRE] Exercice 2 - Fiche présentation 771475364
Merci beaucoup d'avoir pris le temps de lire, déjà, et pour tes corrections qui me sont indeed bien utiles ;D On m'avait effectivement déjà dit que le style c'était pas une idée top mais je voyais pas comment faire autrement pour le coup, l'idée de l'img class m'est pas du tout venue à l'esprit du coup grâce à ton aide, un nouveau monde s'ouvre à moi, c'est beau [INTERMÉDIAIRE] Exercice 2 - Fiche présentation 3488708190 (Moi ? Dans l'excès ? Jamais)
+ Awai le padding c'était pourtant bien simple [INTERMÉDIAIRE] Exercice 2 - Fiche présentation 3313101865 & je pense indeed mettre une class pour les hr, des fois qu'il y en aie plusieurs comme tu dis.
Encore merci pour ton temps, je ferai de mon mieux pour les exercices suivants o/
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3144
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
Spoiler:
Coucou :3
Ta fiche est plutôt réussie bravo.

Alors, je commence par ce que tu as spécifié comme souci pour ton code.
Les listes ordonnées et non ordonnées ont une mise en forme spéciale par défaut. Ce sont des blocs avec un espacement en haut et en bas et indentées par rapport au contenu de la page. Le CSS par défaut d'une liste ul est comme suite :
Code:
ul {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1 em;
    padding-left: 40px;
}

Donc pour enlever l'espace il faut ajouter un padding-left à la liste, de valeur 0 ou une petite valeur pour garder un peu d'espace quand même.

Pour changer la couleur de hr, tu peux utiliser la propriété border, par exemple :
Code:
hr {
  border: 1px solid white;
}
Va mettre la ligne en blanc.

Maintenant pour les remarques sur le code :
Code:
<div class="icon haut" style="background-image:url('https://www.zupimages.net/up/18/11/sros.png'); background-size:cover;"></div>
Dans le codage il y a deux sortes d'images : les images qui font partie du contenu de la page et qui ont donc un  "sens" et les images décoratives qui n'ont aucune importance par rapport au contenu comme les fleurs dans la fiche. Les images décoratives sont mise en arrière plan via le CSS vu que c'est le langage responsable sur tout ce qui est déco et style. Par contre les images de contenu sont mises dans le HTML.
Je peux voir que tu as bien compris la différence vu que tu as mis les fleurs en CSS et l'icône dans le HTML, ce qui est super, par contre le problème c'est que tu les as inséré en arrière-plan via style, ce qui revient à réduire le sens de l’icône en image décorative alors que ce n'est pas le cas. Ici il sera plus judicieux d'insérer les icônes via la balise img vu que c'est ainsi qu'on insère une image en HTML.
Je ne sais pas si ce que j'ai dit est clair pour toi, en gros, techniquement tu peux utiliser la balise img ou la propriété background pour insérer une image ça donnera le même résultat visuel mais sémantiquement ce n'est pas la même chose, l'outil utilisé dépendra donc de si l'image fait partie du contenu de la page ou non.

Code:
<span>Petite citation</span></br>
  <div class="bloc1 cara">CARACTÈRE</br>
    <p> texte... </p>
div et p sont des blocs et donc ils se mettront toujours sur une nouvelle ligne, ici les br sont superflus.
De même pour la partie physique.

Je passe au CSS :

Code:
.fond span{
  margin:10px;
}
span et margin ne vont pas ensemble :p, une span est un élément inline et donc ne peux pas avoir une marge. Tu peux mettre une marge haute à ton bloc qui suit la span si tu veux augmenter l'espace entre les deux.

z-index gère les superpositions entre deux blocs positionnés. Ici seul ton icône est en absolu donc elle sera toujours en avant, tu n'auras donc pas besoin du z-index ici.

Sinon pour quelqu'un qui tâtonne tes positionnements sont bons, pas de soucis :p

Voilà je crois que c'est tout, bravo :3

Edit : Oh non Sun méchante Sun xD.
J'ai la page de ton exo ouverte depuis hier mdr, j'ai oublié d'actualiser pour voir si quelqu'un est déjà passé. Bon je laisse ma correction en spoiler au cas où tu voudrais la lire quand même @wonder, bien que ça doit surement être la même chose :3




Spoiler:

Codée par Sun d'amour  [INTERMÉDIAIRE] Exercice 2 - Fiche présentation 3775839356
Sun
Sexe : Féminin
Date d'inscription : 22/12/2016
Messages : 266
Voir le profil de l'utilisateur
Ancien.ne du staff
Contente de t'avoir aidée Wonder x)
Aw merde Reine, j'suis désolée D:
Ceci dit ta correction ne sera pas inutile étant donné que ce que tu as pointé à la fin, je ne l'avais pas remarqué. Comme quoi, deux têtes valent toujours mieux qu'une x)
Reine des Ténèbres
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 3144
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com
Designer - Rose des sables
Designer - Rose des sables
Ah non t'inquiète pas Sun, c'est ma faute x)
Et oui c'est justement parce que ça m'a semblé un peu utile que je l'ai gardé :3
Bienvenue dans l’équipe :3




Spoiler:

Codée par Sun d'amour  [INTERMÉDIAIRE] Exercice 2 - Fiche présentation 3775839356
Wonder
Sexe : Féminin
Date d'inscription : 02/02/2018
Messages : 75
Voir le profil de l'utilisateur
Newbie
Oh hey @Reine des Ténèbres [INTERMÉDIAIRE] Exercice 2 - Fiche présentation 771475364

Merci d'avoir également posté ta correction, il y a effectivement quelques éléments supplémentaires qui me permettent de mieux comprendre comment m'y prendre donc je ne peux qu'être ravie Happyness
Notamment pour le z-index j'avais pas capté que si l'icon était le seul en absolute il serait forcément devant, ça m'évitera de mettre du code inutile à l'avenir -nods-
Du coup encore merci -et aaaa tant mieux si je commence à m'entendre avec le positionnement- et je ferai au mieux pour les exercices suivants **
Contenu sponsorisé
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum