[Intermédiaire] Exercice #1 - Fiche - Reine des Ténèbres

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
Bonjour,

Je vous présente le schéma de la fiche que j'ai faite hier comme exercice.
C'est d'un niveau facile à intermédiaire à coder sans tableaux.
Vous êtes libre d'ajouter des effets, changer les couleurs, l'image etc.

[Intermédiaire] Exercice #1 - Fiche - Reine des Ténèbres 18060104403912811115740608

Avatar : 200x200
Font : Architects Daughter, Arial.
Tutoriel : positionnement
Couleurs : (modifiables)
-- Fond : #dde3e3
-- Titres :
----- Fond : #a1b0b0
----- Text : #ffa5af
-- Sous-titres :
----- Fond : #f5f5f5
----- Text : #00858d
-- Bordures : #00858d
-- Barre de défilement : #00858d / #f5f5f5
Je rappelle que les propriétés liées aux barres de défilement ne sont pas prise en charge par Firefox.




Spoiler:

Codée par Sun d'amour  [Intermédiaire] Exercice #1 - Fiche - Reine des Ténèbres 3775839356
Dorea McH
Sexe : Féminin
Date d'inscription : 08/01/2017
Messages : 176
Voir le profil de l'utilisateur
Membre timide
Salut salut! J'ai essayé de faire ça en rajoutant quelques effets hover (même si celui de l'image est pas génial :/). Par contre je ne sais pas comment gérer la barre de défilement (changer sa couleur, l'afficher par défaut) et j'avais un peu la flemme de chercher tout ça ce soir... Merci d'anvance de me dire ce qu'il manque/ ce qui n'est pas correct!
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
Coucou, @Dorea McH.

Pour cet exo ton rendu est correct et cette fois à part un petit espace dans l'image, ce n'est pas déformé c'est cool ! On voit bien que tu progresses. De plus les class sont compréhensibles c'est super !

Donc comme je l'ai dit, pour l'image, elle est un peu déformée à cause de ça
Code:
.imgex5 {
  display: block;
  border-radius: 45% 25%;
  width: 194px;
  height: 190px;
}

> Ton image est toute seule dans un bloc que tu as appelé blociex5, tu n'as donc pas besoin du display : block.
> L'image est carrée de 200x200 si tu la redimensionnes à 190px tu risques d'avoir un décalage de 10px par rapport à la bordure droite et basse. Tu vas devoir donc centrer ton image par text-align horizontalement et par line-height verticalement. Et pour éviter cela il suffit de fixer les proportions de l'image à 200px.

Code:
.blocex5 {
  oveflow: scroll;
}
Attention aux fautes de frappe tu as oublié un r dans overflow du coup tu ne vois pas la scroll. La valeur scroll fait que tu auras une barre de défilement horizontale et une verticale fixes, même si le texte ne dépasse pas ce qui est très moche. Il est plus esthétique d'utiliser la valeur "auto" plutôt que "scroll", overflow: auto; fait que la barre n’apparaitra que si c'est nécessaire.

Code:
.b {
  font-weight: bold;
}

"." est nécessaire pour les sélecteurs de class comme "#" l'est pour les sélecteurs d'id. "b" est une balise, le sélecteur de balise s'écrit sans signe, c'est à dire de cette façon :
Code:
b {propriété:valeur}
div {propriété:valeur}
img {propriété:valeur}
b est la balise HTML qui permet de mettre en gras par défaut donc tu n'as pas à le préciser dans le CSS sauf si tu veux changer l'effet par défaut de la balise.

La liste non ordonnée est un bloc par défaut, tu n'as pas besoin de la mettre dans une div et donc tu peux mettre directement :
Code:
<ul class="blocex5">

De plus ça va t'aider à te débarasser de ça :
Code:
<div style="clear: both;"></div>
Je vois que tu as ajouté une balise vide pour remettre les éléments dans le flux. Quand tu choisis de séparer le CSS du HTML il faut le faire jusqu'au bout. Il faut donc enlever cette partie.
Ici on veut réinitialiser la position des éléments à partir du bloc qui suit la liste, tu peux lui ajouter une class pour lui attribuer la propriété clear comme tu peux le cibler par rapport à la liste ce qui sera plus simple et plus court que de rajouter une class :
Code:
ul + div {
  clear: both;
}
Ceci veut dire "la div qui suit directement une liste ul" plus d'infos ici
C'est tout pour cet exercice, bon courage [Intermédiaire] Exercice #1 - Fiche - Reine des Ténèbres 3775839356




Spoiler:

Codée par Sun d'amour  [Intermédiaire] Exercice #1 - Fiche - Reine des Ténèbres 3775839356
Dorea McH
Sexe : Féminin
Date d'inscription : 08/01/2017
Messages : 176
Voir le profil de l'utilisateur
Membre timide
Merci pour tes explications! je n'avais jamais utilisé la balise b avant, donc c'était la grande expérimentation ;)
Au niveau des listes, merci pour l'astuce! j'ai encore plein de choses à apprendre et pour le moment j'ai tendance à faire des div vides pour rétablir le flux (au moins je le rétablis hein [Intermédiaire] Exercice #1 - Fiche - Reine des Ténèbres 2702986051 )
Encore merci!
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
Tu fais du bon travail, t'inquiètes :3

Bon courage pour la suite, n'hésite pas à expérimenter d'autres choses et à tester d'autres exercices :3
C'était un plaisir [Intermédiaire] Exercice #1 - Fiche - Reine des Ténèbres 3775839356




Spoiler:

Codée par Sun d'amour  [Intermédiaire] Exercice #1 - Fiche - Reine des Ténèbres 3775839356
Contenu sponsorisé
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum