Revenir en haut Aller en bas
Epicode
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-20%
Le deal à ne pas rater :
Super Mario 3D-All Stars – Jeu Nintendo Switch
35.99 € 44.99 €
Voir le deal
-66%
Le deal à ne pas rater :
DORMIPUR Oreiller à mémoire de forme MEMOVITA 60×60 cm
10.09 € 29.91 €
Voir le deal

Aller en bas
Reine des Ténèbres
Reine des Ténèbres
Ancien.ne du staff
  • Date d'inscription : 15/08/2017
  • Messages : 3183
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.
_______________
Jeu 19 Oct 2017 - 14:21
Dorea McH
Dorea McH
Membre timide
  • Date d'inscription : 08/01/2017
  • Messages : 182
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!
_______________
Ven 9 Fév 2018 - 23:27
Reine des Ténèbres
Reine des Ténèbres
Ancien.ne du staff
  • Date d'inscription : 15/08/2017
  • Messages : 3183
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
_______________
Jeu 15 Fév 2018 - 18:53
Dorea McH
Dorea McH
Membre timide
  • Date d'inscription : 08/01/2017
  • Messages : 182
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!
_______________
Lun 26 Fév 2018 - 18:00
Reine des Ténèbres
Reine des Ténèbres
Ancien.ne du staff
  • Date d'inscription : 15/08/2017
  • Messages : 3183
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
_______________
Lun 26 Fév 2018 - 18:12
Ayfoth
Ayfoth
Newbie
  • Date d'inscription : 27/10/2020
  • Messages : 47
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
_______________
Jeu 5 Nov 2020 - 18:01
Void
Void
Membre timide
  • Date d'inscription : 20/09/2013
  • Messages : 117
Bonjour bonjour !
Je me suis prêté à l'exercice, avec les habituels couacs entre le rendu dans le logiciel et le rendu sur forumactif xD Pour le positionnement j'ai obté pour un display:flex et des margins pour corriger le tir de la transition. Par contre je n'ai pas réussi à faire les ovales sur la scrollbar ;-;


Nom et Prénom
  • Âge : lorem
  • Genre : lorem
  • Origine : lorem
  • Études : lorem
  • Groupe : lorem
  • Particularités : lorem ipsum dolor sit amet, consectetur adipiscing elit.
Description
Physique
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Mentale
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Histoire
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Par Void sur Epicode
Basé sur la maquette de Reine des Ténèbres


Le HTML :
Code:

<div class="container">
    <div class="infor">
        <div class="title">Nom et Prénom</div>
        <div class="description">
              <ul>
                   <li><b>Âge : </b>lorem</li>
                   <li><b>Genre : </b>lorem</li>
                   <li><b>Origine : </b>lorem</li>
                   <li><b>Études : </b>lorem</li>
                   <li><b>Groupe : </b>lorem</li>
                   <li><b>Particularités : </b>lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
             </ul>
       </div>
  </div>
  <div class="vavatar">
       <img class="vava" src="https://zupimages.net/up/21/39/l987.png">
  </div>
  <div class="bloc">
       <div class="title">Description</div>
       <div class="description">
           <div class="subtitle">Physique</div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

           <div class="subtitle">Mentale</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </div>
    </div>
  <div class="bloc">
    <div class="title">Histoire</div>
       <div class="description">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
    <div class="credits">Par Void sur Epicode<br>Basé sur la maquette de Reine des Ténèbres</div>
</div>

Le CSS :
Code:
.container {
    height: 550px;
    width: 480px;
    background-color: #dde3e3;
    border-radius: 100px 50px 100px 50px;
    border: 2px dashed #004b6f;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.title {
    background-color: #004b6f;
    width: 200px;
    height: 40px;
    border-top-left-radius : 120px 25px;
    border-top-right-radius : 60px 15px;
    border-bottom-left-radius : 60px 15px;
    border-bottom-right-radius : 120px 25px;
    text-align: center;
    font-family: 'Architects Daughter', cursive;
    color: #ff99ca;
    font-size: 25px;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
    line-height: 35px;
}

.subtitle {
    width: 185px;
    height: 25px;
    font-family: 'Architects Daughter', cursive;
    background-color: #f5f5f5;
    color: #004b6f;
    border-radius: 80px / 15px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 23px;
   margin-bottom: 10px;
}

.infor, .bloc {
    height: 200px;
    width: 170px;
}

.bloc {
    margin: 15px 40px 10px 10px;
}

.infor {
    margin: 30px 10px 0px 0px;
}

.description {
    height: 190px;
    width: 200px;
    overflow-y: scroll;
    text-align: justify;
    font-family: 'Arial';
    font-size: 14px;
    padding: 25px 10px 0px 0px;
}

.description ul li b {
    font-family: 'Architects Daughter', cursive;
    font-size: 18px;
}

.description::-webkit-scrollbar {
    width: 3px;
    background-color: #004b6f;
}

.description::-webkit-scrollbar-thumb {
    background-color: #f5f5f5;
    border-radius: 100px / 100px;
}

.description::-webkit-scrollbar-track {
   background-color: #004b6f;
}

.vavatar {
    height: 200px;
    width: 200px;
    border-radius: 100px 50px 100px 50px;
    border: 2px solid #ff99ca;
    margin: 0px 0px 10px 40px;
}

.vava {
    border-radius: 100px 50px 100px 50px;
    padding: 3px;
}

.credits {
    font-family: 'Arial';
    font-size: 9px;
    color: #004b6f;
    text-align: center;
    line-height: 10px;
    margin-top: 15px;
}
_______________
Sam 2 Oct 2021 - 5:11
Sunhae
Sunhae
Codeur.se
  • Date d'inscription : 30/10/2012
  • Messages : 779
Salut salut @Void !
Ton code est très propre et je n'ai repéré aucune coquille  Coeur 2
Mais j'ai quand même quelques remarques à faire.

- Déjà, je ne sais pas sur quel logiciel/site tu as codé et si du coup ton affichage est différent, mais les blocs .description ont une hauteur trop importante et empiète sur les blocs d'en dessous. Sur Epicode, ça n'arrive pas parce qu'il y a un box-sizing: border-box; qui s'applique à toute les divs: ce qui veut dire que la largeur et la hauteur seront celles indiquées par width et height respectivement et ne seront pas impactées par le padding. Mais si tu n'as pas ce box-sizing: border-box, le padding ajoute des pixels (dans le cas de .description, cela ajoute 25px de hauteur et 10px de largeur). Et ça fini par empiéter sur les autres blocs !

Pour continuer sur les largeurs et hauteurs, il aurait fallu une largeur adaptée pour .infor et .bloc pour que, déjà, le contenu ne dépasse pas des contenants, et pour ne pas avoir à mettre des margin. Par exemple, la balise .bloc à une largeur définie de 170px mais contient elle-même la balise .description qui a une largeur supérieure, soit de 200px (pas très logique) ;

- Il me semble qu'il manque un petit overflow: hidden; à .vavatar pour empêcher l'image de dépasser ;

- Je vois que tu as utilisé les balises liste  <li> et <ul>, ce qui est un bon point; pour continuer sur les balises sémantiques, n'hésite pas à utiliser les balises titre <h1> à <h6> et les balises paragraphe <p> ;

- Il manque le lien vers l'hébergement de la police "Architects Daughter" ; (seulement dans le code que tu donnes)

Par contre je n'ai pas réussi à faire les ovales sur la scrollbar ;-;
Ce n'est pas exactement un arrondis, plus un dégradé (enfin je le vois comme ça). Un solution pour avoir ce rendu (sur Chrome), c'est du coup de remplacer la couleur du background par un dégradé. Pour cela, tu as la propriété gradient. Sur la maquette, c'est un dégradé du centre vers l'extérieur de #F5F5F5 vers #61B1B8, ce qui donne :
Code:
.description::-webkit-scrollbar-thumb {
    background: radial-gradient(circle, #F5F5F5 90%, #61B1B8 100%);
}

ensuite, tu as une bordure de 1px dégradée autour de cette barre dégradée, que tu peux ajouter en utilisant la propriété border-image. Sur la maquette, ça ressemble à un dégradé du haut vers le bas de #00858C puis #F5F5F5 et retour a #00858C, ce qui se traduit par:
Code:
.description::-webkit-scrollbar-thumb {
    border: 1px solid;
    border-image: linear-gradient(to top, #00858C, #F5F5F5, #00858C) 1;
}

On a donc au final:
Code:
.description::-webkit-scrollbar-thumb {
    background: #F5F5F5; /* au cas où la navigateur ne supporte pas gradient */
    background: radial-gradient(circle, #F5F5F5 90%, #61B1B8 100%);
    border: 1px solid;
    border-image: linear-gradient(to top, #00858C, #F5F5F5, #00858C) 1;
}

C'est un résumé très rapide, je t'ai mis des liens vers de courtes explications sur chaque propriétés mais si tu veux plus d'explications/précisions, n'hésite pas (:

Je crois avoir fait le tour. Encore une fois, si quelque chose n'est pas clair, dis-le moi, je développerais plus en détail. o/
_______________


Jeu 14 Oct 2021 - 21:21
Contenu sponsorisé
    _______________
    Revenir en haut