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.
Le deal à ne pas rater :
Google Pixel 7 5G – Smartphone 6,3″ OLED FHD+ 8 Go + 128 Go
316 €
Voir le deal

Aller en bas
Batty
Batty
Ancien.ne du staff
  • Date d'inscription : 05/06/2014
  • Messages : 3514
Maquette d'Exercice pour Page d'Accueil

Créée par : Batty

Informations


Niveau estimé : Facile
Sujet mis à jour en aout 2022

Présentation


Bonjour

Voici un schéma de niveau facile. De base, il n'y a pas d'effet, mais je vous invite à en ajouter selon votre inspiration. Cette page d'accueil a pour but de vous faire pratiquer les bases et de réaliser un joli rendu.

La maquette



[Facile] Page d'accueil #5 - Batty Hkyz4Hw


Compétences suggérées



▶ Bases du HTML : titres <h1>, <h2>, etc., blocs paragraphes <p> ou génériques <div>, listes HTML <ul> et <li>, liens <a> et images <img>...
▶ Bases du CSS : couleurs de fond et de texte, marges, espacements internes, taille de texte, dimensions de blocs...
▶ Flexbox et/ou grid pour positionner des blocs côte à côte
▶ La propriété CSS border-radius pour les coins arrondis
▶ La propriété CSS overflow pour gérer les dépassements
▶ La pseudo-classe :nth-child() pour l'alternance des couleurs de ligne

À titre d’entraînement (uniquement !), vous pouvez également tenter d'obtenir un rendu avec les anciennes méthodes :
▶ les tableaux HTML
▶ La fusion des cellules d'un tableau
ou encore
▶ Le positionnement en CSS

Si vous avez des questions, n'hésitez pas à les poser à la suite ainsi qu'à poster votre rendu et votre code.

Merci d'informer le staff d'Epicode en cas de lien mort !


_______________
Lun 14 Déc 2015 - 1:05
Kukka
Kukka
Newbie
  • Date d'inscription : 06/02/2016
  • Messages : 42
Salut ^-^ J'ai une question... (un peu bête, non très bête...) Il fait faire une fiche ou on insère les tableau c'est sa ?
_______________
Dim 7 Fév 2016 - 16:07
Batty
Batty
Ancien.ne du staff
  • Date d'inscription : 05/06/2014
  • Messages : 3514
tu peux la faire de deux façon. Soit avec un tableau sois avec des positionnement. Si tu débute je te conseille de commencé par les tableaux. J'espère avoir répondu a ta question =)
_______________
Sam 13 Fév 2016 - 16:57
Invité
Anonymous
Invité
    Bon j'ai essayé, par contre c'est pas .. vraiment ? comme le résultat sur le schéma, mais y'a des trucs j'ai pas trouvé comment faire (le haut du bloc de gauche par exemple). Voilà mon code, en hide :

    _______________
    Jeu 1 Sep 2016 - 6:02
    Cheshire Cat
    Cheshire Cat
    Accro au forum
    • Date d'inscription : 15/12/2012
    • Messages : 4814
    Coucou miss !

    Globalement, c'est respecté je dirai au niveau du visuel. Tu as juste mis ta petite touche perso quoi ! :D

    Du coup, ton code (c'est le plus important) :3
    Je trouve que niveau contraintes, c'est respecté. Tu as fais la PA en tableau, tu as fusionné des cellules, arrondi les coins. Par contre, tu n'as pas utilisé de div pour les textes. Temps pis mais en soit c'est pas trop grave !

    Du coup, dès le départ je remarque un oubli ici
    Code:
    <table id="tableau" border="1px" cellSpacing=12 width="650px">

    Il manque des "", c'est quand même important, et en plus tu as mis une majuscule au S qui fausse encore cette partie du code. Sinon, moi j'aurai pas mis autant d'id dès le départ. Les id, perso, je les utilise pour rendre mon code plus "visible", dans le sens où je repère tout de suite à quoi correspond telle chose. C'est plus rapide pour corriger des bugs, etc.

    Maintenant, je t'avoue ne pas trop comprendre cette partie
    Code:
    <th id="cellule" rowspan="20"><h2 class="texte">NOTRE STAFF </h2>
    <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/>
    <br> <h2 class="texte">NOUVEAUTÉS</h2>
          <h4 id="h4">XX.XX.XX NEWS<br>
          XX.XX.XX NEWS<br>
          XX.XX.XX NEWS<br>
          XX.XX.XX NEWS<br>
          XX.XX.XX NEWS<br>
          XX.XX.XX NEWS<br>
          XX.XX.XX NEWS<br>
          XX.XX.XX NEWS<br>
          XX.XX.XX NEWS</h4>
          </th>

    J'utilisais pas trop les TH du temps où je codais en tableau et quand je les vois en template je remarque que c'est surtout utilisé pour les titres de colonne et non pas pour une colonne entière. A ta place, j'aurai mis un td et puis basta.

    Sinon, un rowspan à 7 ça suffit, pourquoi mettre 20 ? T'as juste à compter les cellules tu sais x)

    Je remarque que dans ton CSS, tu utilises plutôt les id comme tu devrais utiliser des class, ce serait plutôt l'inverse en fait. Sinon, sémantiquement parlant, un id est pour un élément unique tandis qu'une class est un élément qui se répète. Pour cette partie

    Code:

          <tr>
    <td id="lien"><a href="https://jsfiddle.net/">LIEN</a></td>
    <td id="lien"><a href="https://jsfiddle.net/">LIEN</a></td>
    <td id="lien"><a href="https://jsfiddle.net/">LIEN</a></td>
      </tr>

    Tu aurais faut par exemple dans ta syntaxe. Ensuite, dans cette même partie, tu aurais pu simplement faire ceci

    Code:
    <tr>
    <td>
    <a href="https://jsfiddle.net/" class="lien">LIEN</a>
    <a href="https://jsfiddle.net/" class="lien">LIEN</a>
    <a href="https://jsfiddle.net/" class="lien">LIEN</a>
    </td>
      </tr>

    Ca évite des colspan que tu n'as pas vraiment l'air de trop maîtriser, surtout que tu as déjà fusionné des cellules juste avant donc te casse pas la tête non plus ^^

    Par contre
    Code:
    <td id="partenaire" cellSpacing=5 cellPadding=5>

    Je sais pas depuis quand on applique des cellspacing et cellpadding aux td mais c'est pas bon du tout. Ca sert à rien et en plus tu as encore fais des fautes de syntaxe pour tes attributs HTML. Garde seulement ton id à la limite, mais enlève le reste. Tu as déjà appliqué un cellspacing dans ta balise table en plus ^^

    Si tu veux centrer tes images dans #partenaire, applique un text-align:center; qui va les centrer si c'est ce que tu souhaites. Oui c'est étrange mais c'est comme ça XD

    Sinon ce que je trouve cool, c'est d'avoir utilisé un p'tit peu les balises de titre. C'est une bonne initiative ici :)

    Il te reste pas mal de trucs à revoir cependant, relis bien les tutoriels sur les tableaux et utilise majoritairement des class plutôt en favorisant les id pour les éléments uniques et non répétés. Ca peut être les crédits pas exemple ^^

    Après ceci
    Code:

      <tr>

      </tr>
          <tr>

      </tr>

    Ca sert à rien, vraiment. Supprime ça x)

    Bon j'ai encore pas mal de trucs à dire je pense, mais je te laisse déjà regarder un peu ça et on verra une fois ton code corrigé :P
    _______________
    Lun 5 Sep 2016 - 12:46
    Invité
    Anonymous
    Invité
      Hey :) Alors déjà, merci à toi ^^ ensuite pour les "..." que j'ai pas inscrit, c'est sur le site où j'apprends à coder qu'ils disent que c'est mieux de ne pas en mettre en fait XD Alors je vois que j'ai été induite en erreur *-* Pour le th en fait c'est une erreur de ma part XD je l'avais même pas remarqué en plus u.u Les sellspacing et padding, là encore c'est sur le site que j'apprends à coder qu'ils inscrivent qu'il faut en mettre ... Pour le rowspan="20", erreur de ma part :/ en fait au début je faisais des tests et j'ai oubliée de changer cet attribut >< Bref, voici le code corrigé :P


      HTML :
      Code:
      <table id="tableau" cellSpacing="12" width="650px">
         <tr>
             <td id="cellule" rowspan="7"><h2 class="texte">NOTRE STAFF </h2>
      <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/>
      <br> <h2 class="texte">NOUVEAUTÉS</h2>
             <h4 id="h4">XX.XX.XX NEWS<br>
             XX.XX.XX NEWS<br>
             XX.XX.XX NEWS<br>
             XX.XX.XX NEWS<br>
             XX.XX.XX NEWS<br>
             XX.XX.XX NEWS<br>
             XX.XX.XX NEWS<br>
             XX.XX.XX NEWS<br>
             XX.XX.XX NEWS</h4>
             </td>
             <td id="titre" colspan="5">BIENVENUE</td>
         </tr>
         <tr>
             <td id="cellule_2" colspan="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae mauris id erat imperdiet malesuada. Suspendisse potenti. Curabitur ac dolor leo. In viverra nunc ac neque rutrum, sagittis pharetra magna sollicitudin. In luctus quam molestie lacus auctor, id sagittis neque lacinia. Aliquam erat volutpat. Donec odio est, viverra vel pretium non, cursus eget dui.</td>
         </tr>
            <tr>
             <td id="cellule_2" colspan="3">Vivamus tincidunt ullamcorper sodales. Phasellus vitae venenatis arcu, quis mollis metus. Etiam ipsum orci, blandit non mauris pulvinar, hendrerit lobortis sem. Sed lorem erat, posuere sit amet lobortis a, sollicitudin laoreet sapien. Suspendisse potenti. Suspendisse sed eros facilisis, scelerisque dui quis, ultrices ex.</td>
         </tr>
            <tr><td>
      <a href="https://jsfiddle.net/" class="lien">LIEN</a>
      <a href="https://jsfiddle.net/" class="lien">LIEN</a>
      <a href="https://jsfiddle.net/" class="lien">LIEN</a></td>
         </tr>
            <tr>
      <td id="partenaire"><a href="http://pokelexya.forumactif.pro/">  <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a><a href="http://pokelexya.forumactif.pro/">  <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a><a href="http://pokelexya.forumactif.pro/"> <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a><a href="http://pokelexya.forumactif.pro/">  <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a><a href="http://pokelexya.forumactif.pro/">  <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a><a href="http://pokelexya.forumactif.pro/">  <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a><a href="http://pokelexya.forumactif.pro/">  <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a><a href="http://pokelexya.forumactif.pro/">  <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a></td>
         </tr>
        <tr><td id="credit">© by Ecleasya</td></tr>
      </table>


      CSS :
      Code:
      #titre {
        color: #808080;
        text-shadow:0px 0px 1px black;
        text-align:center;
        font-size:45px;
        font-weight:bold;
        padding-right:35px;
        font-family:verdana;
        letter-spacing:-2;
      }

      #tableau {
        background-image:url('http://i.imgur.com/XcDecTI.jpg');
      }

      #cellule {
        border-radius:10px 10px 10px 10px;
        width:200px;
        background-color:#fff;
        padding:6px;
        margin-top:-20px;
        padding-bottom:30px;
      }

      #cellule_2 {
        background-color:#fff;
        text-align:justify;
        padding:6px;
        box-shadow: 1px 1px 1px black;
      }

      .lien {
        display:inline-block;
        width:118px;
        height:30px;
        border-radius:8px;
        background-color:#fff;
        text-align:center;
        color:#808080;
        text-shadow: 0px 0px 1px black;
        box-shadow: 1px 1px 1px black;
      }

      a {
        text-decoration:none;
      }

      .texte {
        font-size:23px;
        color:#808080;
        text-shadow:0px 0px 1px black;
      }

      #h4{
        background-image:url('http://i.imgur.com/XcDecTI.jpg');
        color:#fff;
      }

      #image{
        max-width:60px;
        max-height:60px;
        border:2px solid black;
        border-radius:15px 15px 15px 15px;
      }

      #staff{
        visibility:hidden;
      }

      #image:hover{
        opacity:0.6;
      }

      #partenaire {
        padding:5px;
      }

      #credit{
        font-size:15px;
        font-family:verdana;
        color:#fff;
        text-align:center;
      }


      Et voici le Jsfiddle
      _______________
      Mer 21 Sep 2016 - 13:06
      Dorea McH
      Dorea McH
      Membre timide
      • Date d'inscription : 08/01/2017
      • Messages : 182
      J'ai enfin plus ou moins fini! Bon, le rendu est mins bien, assurément, et j'ai des trucs dans mes codes qui me donnent de l'urticaire à moi même, alors je me doute que d'autres vont avoir des commentaires!


      Notre Staff

      Nouveautés
      XX.XX. XXXX phrase
      XX. XX. XXXX phrase
      XX. XX. XXXX phrase
      XX. XX. XXXX phrase
      XX. XX. XXXX phrase
      XX. XX. XXXX phrase
      XX. XX. XXXX phrase
      XX. XX. XXXX phrase
      XX. XX. XXXX phrase
      Bienvenue
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere tincidunt sodales. Nullam ut pretium elit, eu vestibulum turpis. Nulla viverra lacus est, non aliquet ipsum porta vel. In id pellentesque purus, et dignissim risus. Ut vitae placerat lacus. Nullam non lacinia metus. Nam ut purus tempus, fermentum tellus a, posuere tortor. Quisque pellentesque sagittis ipsum et ultricies. Sed vulputate ullamcorper tellus in egestas.
      Lorem2 ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere tincidunt sodales. Nullam ut pretium elit, eu vestibulum turpis. Nulla viverra lacus est, non aliquet ipsum porta vel. In id pellentesque purus, et dignissim risus. Ut vitae placerat lacus. Nullam non lacinia metus. Nam ut purus tempus, fermentum tellus a, posuere tortor. Quisque pellentesque sagittis ipsum et ultricies. Sed vulputate ullamcorper tellus in egestas.  
      lien
      lien
      lien

       


      ©Dory


      _______________
      Mer 16 Aoû 2017 - 20:06
      xLittleRainbow
      xLittleRainbow
      Accro au forum
      • Date d'inscription : 05/06/2015
      • Messages : 780
      Coucou !

      Navrée d'avoir mis du temps à passer par ici ö

      Je vais commencer par commenter un petit quelque chose dans ton CSS au niveau de ta div qui contient l'intégralité du code contenant1. Au lieu de mettre margin-left: auto; margin-right: auto tu peux simplifier le tout en mettant margin:auto ^^ Cela te permettra de centrer ton code par rapport à la page et allégera ton code. Il n'est utile de séparer les marges gauche et droite que lorsque tu souhaites mettre deux valeurs différentes.

      Ensuite, je voudrais t'alerter sur un petit quelque chose que tu n'as apparemment pas pris en compte ici. Que se passe-t-il si les textes dans "Nouveautés" prennent plus de place que ce n'est actuellement le cas ? Avec ton code dans l'état actuel des choses tu te retrouveras avec du texte qui déborde de tous les cadres x) Face à ça tu as plusieurs solutions :
      - utiliser un min-height à la place du simple height. La différence c'est que tu donnes avec la première fonction une hauteur minimale à respecter. Qu'il y ait une hauteur minimale implique qu'une plus grande est possible. Tes cadres s'agrandiront donc en hauteur, respectant la quantité de texte, en fonction de ce qui est tapé.
      - mettre un overflow:hidden. Cette solution est très limitante mais je te la présente quand même parce qu'on a parfois besoin de ce genre de chose. Avec cette fonction et cet attribut toute chose qui déborde du cadre est cachée. Donc même si ton texte est trop long aucun changement au niveau du visuel.
      Pour moi ce sont les deux solutions qui pourraient s'appliquer ici. Après, peut-être que d'autres verront quelque chose à rajouter (:

      Si on veut tatillonner un peu (et je vais le faire parce que ça permet d'apprendre des trucs le tatillonnage) je parlerais un peu du CSS de ta class .lien. On voit que le texte n'est pas très bien centré en hauteur par rapport à la taille du cadre. Pour remédier au problème tu peux utiliser l'astuce du line-height. Cette fonction te permet de déterminer une hauteur de ligne. Si tu donnes à ta ligne la même hauteur que celle donnée à ta div tu places ton texte au centre ^^ Cependant, attention lorsque tu codes des cases pour les liens de cette manière. Avec seulement 4 lettres ça passe très bien mais si tu dois écrire des choses plus longues (Règlement, Annonces, etc) ça ne passera pas. Ce sont des choses à prendre en compte si on ne veut pas se retrouver dans la panade lorsqu'on modifie le code ^.^

      Sinon, attention, tu as mis un point-virgule et non pas un point dans ton CSS pour la class concernant le copyright. Aucun CSS ne s'applique donc puisqu'il y a une faute de syntaxe ^^

      Je pensais avoir terminé mais c'est vrai que dans la série "tatillonnage" j'avais oublié un petit quelque chose °w° Lorsque tu utilises les liens Google Fonts il est bon de penser à fermer les balises fournies en rajoutant un / comme pour une balise img.

      Code:
      <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet"/>

      Globalement je n'ai rien à redire sur la structure du html et même au niveau du CSS je trouve ça très bien que tu aies pu faire un PA comme celle-ci en utilisant les positionnements plutôt qu'un tableau ! Tu peux être contente du travail accompli :D
      _______________
      Ven 25 Aoû 2017 - 19:26
      Dorea McH
      Dorea McH
      Membre timide
      • Date d'inscription : 08/01/2017
      • Messages : 182
      Merci ! Je dois avouer avoir appris l'astuce du line-height entre temps, et ça va m'être bien utile ! Je ne t'explique même pas comment je me suis arrachée les cheveux sur ces textes qui voulaient pas se centrer verticalement ;) Et pour les nouveautés, j'y avait même pas pensé O.o
      Encore merci pour tes conseils/explications
      _______________
      Sam 26 Aoû 2017 - 10:12
      xLittleRainbow
      xLittleRainbow
      Accro au forum
      • Date d'inscription : 05/06/2015
      • Messages : 780
      Contente en tous cas si tu estimes que mon commentaire t'a aidé :D Nous sommes là pour ça.
      _______________
      Dim 27 Aoû 2017 - 16:39
      Tigrlion
      Tigrlion
      Fidèle au poste !
      • Date d'inscription : 22/11/2017
      • Messages : 312
      C'est la première fois que j'utilise la fusion de cellules de tableau et tout, j'ai trouvé ça hyper compliqué, j'me suis un peu perdue à un moment et j'ai failli abandonné à cause de ça, et j'ai pas mal galéré pour d'autres petits trucs aussi, mais j'en suis arrivé à bout ! Voila mon résultat à moi ~

      HTML
      Code:
      <table id="tableau">
               <td rowspan="5" id="cel-1"><div class="petittitre">Notre staff</div><a href="http://epicode.variousforum.com"><img class="img-opacity img-staff" src="http://zupimages.net/up/17/30/6nbj.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity img-staff" src="http://zupimages.net/up/17/30/6nbj.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity img-staff" src="http://zupimages.net/up/17/30/6nbj.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity img-staff" src="http://zupimages.net/up/17/30/6nbj.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity img-staff" src="http://zupimages.net/up/17/30/6nbj.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity img-staff" src="http://zupimages.net/up/17/30/6nbj.png"/></a><div class="petittitre" style="margin-top:15px;">Nouveautés</div><div class="news1">xx.xx.xx New</div><div class="news2">xx.xx.xx New</div><div class="news1">xx.xx.xx New</div><div class="news2">xx.xx.xx New</div><div class="news1">xx.xx.xx New</div><div class="news2">xx.xx.xx New</div><div class="news1">xx.xx.xx New</div><div class="news2">xx.xx.xx New</div><div class="news1">xx.xx.xx New</div></td>
        <td colspan="3" class="cel-2"><span class="bienvenue">Bienvenue</span></td></tr>
                 <tr><td colspan="3"><div class="blocblanc">Texte premier bloc</div></td></tr>
        <tr><td colspan="3"><div class="blocblanc">Texte second bloc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus lectus, dignissim a fermentum vel, dictum id magna. Praesent varius, mi sit amet laoreet gravida, augue eros faucibus urna, hendrerit euismod quam mauris nec purus. Donec sed bibendum tortor. Donec sed luctus mi. Quisque porta felis dui. Pellentesque risus nibh, consequat ac luctus at, tempor tincidunt sem. Vivamus id pulvinar felis.</div></td>
              
             </tr>
             <tr align="center">
               <td class="cel-lien"><a href="http://epicode.variousforum.com">Lien</a></td>
                 <td class="cel-lien"><a href="http://epicode.variousforum.com">Lien</a></td>
                 <td class="cel-lien"><a href="http://epicode.variousforum.com">Lien</a></td>
             </tr>
             <tr>
                 <td colspan="3" class="cel-2"><a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a></td>
        </tr>
        <tr><td colspan="4" align="center"><span class="credits"><a href="http://epicode.variousforum.com" style="color:white;">Tigrlion | Epicode</a></span></td>
             </tr>
          </table>

      CSS
      Code:
      #tableau {
        background-color:#444a73;
        border-spacing: 20px 10px;
      }

      #cel-1 {
        width:200px; padding:5px;
        background-color:white;
        border-radius: 25px;
        border-top-left-radius: 75px;
        border-top-right-radius: 75px;
        text-align:center;
      }

      .cel-2 { width:420px; text-align:center; }

      .petittitre {
        font-family: 'Times New Roman';
        font-size:25px; text-transform:uppercase;
        color:steelblue;
        text-shadow: 0px 0px 4px black;}

      .bienvenue {
        font-family: 'Times New Roman';
        font-size:50px; text-transform:uppercase;
        color:steelblue;
        text-shadow: 0px 0px 4px black;
      }

      .blocblanc {
        background-color:white;
        color:black; text-align:justify;
        padding:5px; height:90px; width:410px;
        overflow:auto;
        font-family:Verdana; font-size:12px;
      }

      .news1, .news2 {
        color:white; font-size:11px;
        font-family:'Times New Roman';
        text-align:left;
        padding:2px;;
        text-transform:uppercase;
      }
      .news1 { background-color:#444a73;}
      .news2 { background-color:steelblue;}

      .cel-lien {
        background-color:white;
        border-radius:15px;
        font-size:25px;
        text-transform:uppercase;
        font-family: 'Times New Roman';
      }

      a {
        text-decoration:none;
        color:steelblue;
      }
      a:hover {  text-shadow: 0px 0px 4px black;
        transition:1s;}

      .img-staff { border:3px solid #444a73;
      border-radius:15px;}

      .img-opacity {opacity:1;}
      .img-opacity:hover {opacity:0.7; transition:1s;}

      .credits { font-family:Verdana;
      font-size:11px; }

      Aperçu sur CodePen : https://codepen.io/anon/pen/XzYOPQ

      J'attends vos commentaires ! [Facile] Page d'accueil #5 - Batty 3775839356
      _______________
      Ven 24 Nov 2017 - 23:15
      Batty
      Batty
      Ancien.ne du staff
      • Date d'inscription : 05/06/2014
      • Messages : 3514
      Hello Tigrlion =)

      Alors si tu a eu du mal avec la fusion des cellule ça ne parais pas puisque tout est bon ! Bravo tu semble avoir bien compris ^^ Si tu a du mal a visualiser quel cellule fusionner je te conseille de prendre un papier et un crayon. Dessine un damier tu visualisera mieux quelles cellule fusionner.

      Ton tableau est bon aussi. Il manque seulement une balise TR juste après la balise TABLE. Tu là probablement supprimer par m'égard puisque la balise fermante était plus loin. Puis tout le reste est nikel !

      Tu semble bien comprendre la différence entre les ID et les class elle sont bien utiliser dans ton code =) Il y à la class "bienvenue" qui aurais pu être un ID mais ce n'est pas mal d'avoir mis une class.

      J'aime beaucoup que tu est "fusionner" .news1 et .news2 dans ton CSS ça évite de répété des information inutilement. Bravo c'est une bonne façon de travailler !

      Un erreur que je voie c'est ceci :

      Code:
      a {
        text-decoration:none;
        color:steelblue;
      }
      a:hover {  text-shadow: 0px 0px 4px black;
        transition:1s;}

      Comme tu là expérimenté ce code changera tout les lien de ta page. à ce moment lè il faudrais utiliser un sélecteur. Je te conseille de lire Ce tutoriel. Mais pour faire court avec tes balise lien il aurais été plus judiceux d'écrire ceci :

      Code:
      .cel-lien a {
        text-decoration:none;
        color:steelblue;
      }
      .cel-lien a:hover {  text-shadow: 0px 0px 4px black;
        transition:1s;}

      Avec ce code on viens spécifier quel lien on ces attributs. Vulgariser, nous disons " Les liens qui ce retrouve dans la class nommé "cel-lien" ne sont pas soulignés et de couleur bleu"

      Ça fonctionne avec tout :

      #Nom img {}
      .nom div {}
      .nom pan {}

      Tu a plus d'information dans le tuto.

      En suivent cette logique tu aurais pue écrire :

      Code:
      .credits a{
      color:white;
      }

      au lieu de mettre style="color:white;" dans ton HTML.

      Finalement, pour le haut arrondi qui n'est pas tout a fait comme le schémas, il existe une astuce qui n'est pas écrit dans le tutoriel (il fraudais l'ajouter d’ailleurs...). Il est possible pour un même sommet lui mettre deux variable pour faire un arrondi spécial:

      Code:
      #example {
        border-radius: 10px/30px; /* valeurs horizontal / valeurs vertical */
      }



      Du coup pour faire la même chose, il aurais fallu écrire :

      Code:
      #example {
         border-radius: 50px 50px 20px 20px/15px 15px 20px 20px;
      }



      En gros tu te débrouille vraiment bien ! Tout ça c'est des petit plus pour avoir des code plus léger et propre =)
      _______________
      Ven 1 Déc 2017 - 20:08
      Tigrlion
      Tigrlion
      Fidèle au poste !
      • Date d'inscription : 22/11/2017
      • Messages : 312
      Merci pour les commentaires, Batty ! ♥️

      Ouais, c'est au niveau de quelles cellules fusionner que je me perds un peu, ça m'étonne même pas qu'un TR ait disparu tellement j'ai touché aux cellules de ce tableau avant de parvenir au résultat que je voulais XD Je tenterais ta technique du damier, ça devrait aider !

      Je connaissais pas du tout les sélecteurs ! Ça a l'air super utile, je vais aller voir ça ! :o

      Je me disais bien qu'il devait exister un truc comme ça pour les border-radius, mais ouais, le tuto en parlait pas, j'ai pas cherché plus loin, je commençais à me demander si c'était pas une image qu'il fallait mettre en background pour obtenir ça... C'est un peu rassurant de voir que non, on doit pouvoir faire pleins de trucs cools avec ça, merci pour l'explication ! x'3
      _______________
      Ven 1 Déc 2017 - 22:09
      Artemis
      Artemis
      Admin & serial codeuse - 0% de méchanceté
      • Date d'inscription : 14/01/2017
      • Messages : 3571
      Je n'ai jamais utilisé les tableaux car on m'a toujours dit que sémantiquement parlant c'était incorrect, donc c'est totalement inconnu pour moi :o Je jetterai un oeil aux tutos pour en apprendre davantage et me frotter à cet exercice, eheh. Merci pour l'astuce des border-radius cependant, je savais pas du tout qu'on pouvait faire ça ! xD
      _______________


       
      Sam 2 Déc 2017 - 12:31
      Batty
      Batty
      Ancien.ne du staff
      • Date d'inscription : 05/06/2014
      • Messages : 3514
      @Shaynee l'utilisation des tableau est en effet une vieille façon de faire qui est préférable de laisser de côté. Normalement les tableaux devrais contenir seulement des informations (du texte) et non servir de structure. Mais cette exercice reste tout de même une bonne pratique pour apprendre les tableaux et la manipulation des div/span.

      Même si les tableau ne serve plus pour la structure d'un site internet de nos jour, il est bien de les connaitre puisque les Template de FA sont encore en tableau (du moins si tu utilise le phpBB2) Donc tu pourra te débrouiller à l'intérieur du Template.

      Tu peux tout de même faire l'exercice en utilisent les méthode de positionnement qui sont plus a jour.
      _______________
      Mar 12 Déc 2017 - 15:08
      Meiywa
      Meiywa
      Newbie
      • Date d'inscription : 19/01/2018
      • Messages : 43
      Hello, j'ai tenté moi aussi [Facile] Page d'accueil #5 - Batty 2691722282
      Aperçu du code [Facile] Page d'accueil #5 - Batty 2979024130

      HTML:
      CSS:
      _______________
      Sam 27 Jan 2018 - 20:10
      Batty
      Batty
      Ancien.ne du staff
      • Date d'inscription : 05/06/2014
      • Messages : 3514
      Bonjour miss =)

      Premièrement bravo d'avoir relever le défi et ce sans tableaux =)

      Alors le premier truck que je remarque dans ton CSS c'est que tu ajoute toujours la balise devant ton nom de ID ou class. Or ce n'est pas pas nécessaire... je ne sais pas comment t'expliquer ça x) mais en fait ton CSS s'en fous que #pageAcceuil soit une DIV il le voie bien. (ok j'ai vulgariser au max ahah) Ensuite ça pourais être contraignent car ta class tu pourais la mettre sur une balise DIV et paragraphe, mais si tu met div avant ton nom de class tu dit : "seul les div avec le nom de class X vont avoir ce CSS". C'est parfois utile, mais dans des cas précis... pas toujours. Tu comprend ? J'ai pas l'impression d'être claire ._.

      En contre parti, on aurais pue utiliser le nom des balise dans la section staff pour réduire le nombre de ligne de code. (oui oui les programmeurs ont est lâches xD Moins il y à d'écriture dans un code mieux c'est !) Du coup au lieu de mettre une class à toute tes image tu aurais pue mettre dans ton CSS #imgStaff img qui dit " toute les images qui ce trouve à l'intérieur de imgstaff vont avoir ce CSS. Bon tout ça c'est du chipotage ce que tu a fait n'est pas mal mais t'en qu'à être là pourquoi ne pas te donner cette astuce =) En fait c'est la même chose que tu à fait avec tes liens.

      Encore dans tes images de staff au lieu de décaler votre bloc pour centré les images pourquoi ne pas avoir utiliser text-align:center; ? Les images sont des élément inline donc ils peuvent être centré comme le texte.

      Ensuite, le positionnement en float c'est bien mais c'est pas la meilleur... normalement on essaie de ne pas trop mettre de marge négative. Je te conseille le positionnement avec relative et absolute ou même avec les display.

      Finalement, tu à utiliser une seul fois la balise paragraphe "p", mais il aurais été plus judicieux de l'utiliser pour les bloc blanc que ton copyright. le nom de la balise le dit elle est la pour des paragraphe, or deux mots n'est pas un paragraphe.

      Voilà ! J'ai vraiment pointer les "défauts" pour que tu apprenne quelque chose et que tu progresse, mais sache que ton code est vraiment bien =) c'était un bon exercice !
      _______________
      Sam 27 Jan 2018 - 21:12
      Meiywa
      Meiywa
      Newbie
      • Date d'inscription : 19/01/2018
      • Messages : 43
      Un grand merci pour tes conseils... J'espère pouvoir les appliquer au mieux dans un prochain défi [Facile] Page d'accueil #5 - Batty 3775839356 J'espère donc arriver à un code plus propre (a)
      _______________
      Sam 27 Jan 2018 - 22:28
      Contenu sponsorisé
        _______________
        Revenir en haut