Le Deal du moment :
NIKE : 25% SUR TOUT LE SITE
Voir le deal
-29%
Le deal à ne pas rater :
Prix cassé sur le PC portable LENOVO IDEAPAD 3 15ADA05
499.99 € 699.99 €
Voir le deal

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


Aller en bas

Reine des Ténèbres
Ancien.ne du staff

http://www.epicode-entraide.com
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.
Reine des Ténèbres
Date d'inscription : 15/08/2017
Messages : 3183

Dorea McH
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!
Dorea McH
Date d'inscription : 08/01/2017
Messages : 182

Reine des Ténèbres
Ancien.ne du staff

http://www.epicode-entraide.com
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
Reine des Ténèbres
Date d'inscription : 15/08/2017
Messages : 3183

Dorea McH
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!
Dorea McH
Date d'inscription : 08/01/2017
Messages : 182

Reine des Ténèbres
Ancien.ne du staff

http://www.epicode-entraide.com
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
Reine des Ténèbres
Date d'inscription : 15/08/2017
Messages : 3183

Ayfoth
Newbie

Coucou j'ai fait ce petit exercice :

CSS
Code:
.fiche{
        --police-titre: 'Architects Daughter', cursive;
        --police-texte: 'Arial';
        --main-bg-color: #dde3e3;
        --titre-bg-color: #a1b0b0;
        --titre-color: #ffa5af;
        --sstitre-bg-color: #f5f5f5;
        --sstitre-color: #00858d;
        --border-color: #00858d;
        width: 600px;
        height: 600px;
        overflow: hidden;
        background-color: var(--main-bg-color);
        border: 2px var(--border-color) solid;
        border-radius: 100px 50px 100px 50px;
        padding-right: 5px;
    }
    .titre{
background-color: var(--titre-bg-color);
font-family: var(--police-titre);
color: var(--titre-color);
border-radius: 150px 50px 150px 50px;;
width: 250px;
margin-left: 50px;
margin-top: 35px;
text-shadow: 1px 1px 1px black;
text-align: center;
    }

    .titre:last-of-type{
        position: absolute;
        left: 280px;
       top: 240px;
    }

    #caracteristique{
        width: 250px;
        height: 130px;
        overflow: auto;
        scrollbar-color: #f5f5f5 #00858d;
  scrollbar-width: thin;
  font-family: var(--police-texte);
margin-left: 30px;
    }

#avatar{
    border: 2px var(--border-color) solid;
    width: 200px;
    height: 200px;
    padding: 5px;
    border-radius: 100px 50px 100px 50px;
    position: absolute;
      top: 20px;
      left: 350px;
}
    #avatar img{
      width: 200px;
      height: 200px;
      border-radius: 100px 50px 100px 50px;
    }

    .sstitre{
        background-color: var(--sstitre-bg-color);
font-family: var(--police-titre);
color: var(--sstitre-color);
border-radius: 150px 50px 150px 50px;;
width: 250px;
margin-left: 50px;
margin-top: 25px;
text-align: center;
    }

    
    #contenu{
        width: 250px;
        height: 180px;
        overflow: auto;
        scrollbar-color: #f5f5f5 #00858d;
  scrollbar-width: thin;
  font-family: var(--police-texte);
margin-left: 50px;
    }

    #contenu:last-of-type{
        width: 250px;
        height: 220px;
        overflow: auto;
        scrollbar-color: #f5f5f5 #00858d;
  scrollbar-width: thin;
  font-family: var(--police-texte);
position: absolute;
top: 360px;
left: 280px;
    }

    #credits{
      position: relative;
      left: 170px;
      top: 5px;
      opacity: 0.5;
    }

HTML
Code:
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
<div class="fiche">
    <h1 class="titre">
Nom et Prénom
    </h1>
    <div id="caracteristique">
        <ul>
            <li><b>Age : </b>XX ans</li>
            <li><b>Date de naissance : </b>00/00/00</li>
            <li><b>Pays : </b>votre choix</li>
            <li><b>Type / Sang : </b>votre choix</li>
            <li><b>Camps : </b>votre choix</li>
            <li><b>Option 1 : </b>XXXXX</li>
            <li><b>Option 2 : </b>XXXX</li>
        </ul>
    </div>
    <div id="avatar">
        <img src="https://cdn.discordapp.com/attachments/759289628103802883/773813817003606026/moonlight_by_tamplierpainter_de80tgi-fullview.png" />
    </div>
    <h1 class="titre">
        Caractéristiques
            </h1>
            <h2 class="sstitre">Aspect physique</h2>
<div id="contenu">
    Quisque at eleifend dolor. Suspendisse hendrerit enim et nulla pulvinar semper. Maecenas dictum convallis rhoncus. Donec suscipit porta mollis. Donec neque libero, scelerisque eget enim id, porttitor laoreet diam. Pellentesque sollicitudin, mi at aliquet aliquet, purus arcu suscipit odio, quis finibus ex arcu sit amet velit. Cras lectus turpis, sodales at ex id, sodales faucibus lacus. Ut sed efficitur arcu. Aliquam pellentesque ornare gravida. Suspendisse hendrerit mollis tempor. Donec blandit, turpis vel finibus egestas, tellus orci ullamcorper nibh, id rutrum nibh tellus vitae nisi. Phasellus sit amet nunc mauris. Suspendisse convallis consectetur lorem, lobortis consectetur nisl tristique a. Aliquam erat volutpat. Praesent tempus ligula viverra tristique varius.
</div>
<h1 class="titre">
    Histoire
        </h1>
        <div id="contenu">
            Quisque at eleifend dolor. Suspendisse hendrerit enim et nulla pulvinar semper. Maecenas dictum convallis rhoncus. Donec suscipit porta mollis. Donec neque libero, scelerisque eget enim id, porttitor laoreet diam. Pellentesque sollicitudin, mi at aliquet aliquet, purus arcu suscipit odio, quis finibus ex arcu sit amet velit. Cras lectus turpis, sodales at ex id, sodales faucibus lacus. Ut sed efficitur arcu. Aliquam pellentesque ornare gravida. Suspendisse hendrerit mollis tempor. Donec blandit, turpis vel finibus egestas, tellus orci ullamcorper nibh, id rutrum nibh tellus vitae nisi. Phasellus sit amet nunc mauris. Suspendisse convallis consectetur lorem, lobortis consectetur nisl tristique a. Aliquam erat volutpat. Praesent tempus ligula viverra tristique varius.
        </div>
<span id="credits">Exercice Fiche n°1 Epicode par Ayfoth</span>

</div>

Aperçu
Ayfoth
Date d'inscription : 27/10/2020
Messages : 47

Contenu sponsorisé


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum