Hey !

Donc comme je te l'ai dis dans mon mp, j'ai codé le joli schéma que tu proposais, ce n'est pas à 100% ressemblant au niveau de certaines choses, mais c'est le mieux que j'ai pu faire. C'est la seconde page d'accueil que je code, donc il y a sûrement quelques erreurs.



Bonne journée ! ~

Bonsoir bonsoiiiir!
Voici ma PA x3

Spoiler:

Yai, nice work !
Désolée du coup Estyriale, j'ai pas répondu, mais du coup le problème est réglé ! Je pense que tu aurais peut-être du agrandir la taille des news, mettre le texte en arial (mais bon, c'est un détail) et ajouter un padding sur le contexte, pour aérer le tout :)
Et Little Gecko, rien à redire ! C'est superbe, et j'aime beaucoup l'effet que tu as mis aux Tops Sites (après, je vois que ton code est plutôt complet, donc il aurait fallu mettre des liens sur les prédefs et sur les tops sites mais bon c'est un détail)

Juste, je vois que vous l'avez fait en tableau (et je comprends), mais mon grand maître du codage (aka Nirvage) m'a appris qu'il fallait mieux faire avec des float et des margin plutôt qu'avec des table. MAIS BON C'EST PAS SI GRAVE QUE CA, bravo les petits chats

Hey !

C'est vrai qu'en y regardant de plus près, les news sont un peu petites donc je vais voir pour modifier ça et rajouter le padding au contexte ! Ehehe, j'avoue que le mieux c'est les margin et float, mais j'avais envie de me faire un petit entraînement mélangeant page d'accueil et tableaux !



J'espère que tu feras d'autres schémas.

Ooohw cool! Merci j'ai adoré faire ce schéma !
Et oui c'est vrai j'ai pas pensé à faire de floats & margin o/

Hello !

Voilà ma version ici : https://codepen.io/Cendre/pen/yLyPwPv

Et voilà ma version :



Je n'ai pas retrouvé les bonnes couleurs et la vraie police :/

Coucou vous deux !
Je viens "corriger" vos codes, même si je n'ai pas grand-chose à redire car vous vous êtes très bien débrouillé.

@Khendra : je trouve que ton code est très propre, ça fait plaisir de voir des balises sémantiques (même si t'aurais pu mettre une balise p pour le contexte mais je chipote 8DD) ! La seule chose qui me turlupine, c'est la présence de display: inline-block sur des blocs de toute façon placés avec le flexbox...? Essaye de les retirer, tu verras que rien ne change puisque leur bloc parent les place déjà. c: Sinon, c'est parfait ! Continue comme ça et n'hésite pas à faire d'autres exercices.

@Lzzy : Je crois que la vraie police était Oswald (tu peux la trouver sur googlefont). :3 Ceci dit, je trouve que tu te débrouilles super bien ! Personnellement, je pense que les PA sont plus difficiles à coder que des templates, car il y a beaucoup plus d'éléments à placer, et tu t'en es super bien sortie. c: J'ai quelques petites remarques cependant, juste de la syntaxe et un conseil, rien de bien transcendant mais ça te permettra de perfectionner tes prochains codes !

J'ai vu passer des valeurs du type

Code:

top: 0px;
left: 0px;
width: 175px;
padding: 9px 0px;

Note que, quand la valeur est de 0 pixels, tu n'as pas besoin de préciser le "px", 0 étant une valeur nulle. Tu pouvais donc écrire ceci

Code:

top: 0;
left: 0;
width: 175px;
padding: 9px 0;

sans que ça n'altère quoique ce soit. C'est plus correct d'écrire ainsi. c:

Et enfin, je te conseille de jeter un coup d'oeil à ce tutoriel : https://www.epicode-entraide.com/t12650-le-positionnement-avec-display-flexbox
Je vois en effet que tu positionnes à l'aide du inline-block (ce qui est tout à fait correct soit dit en passant), mais n'hésite pas à te plonger dans des méthodes de positionnement plus récentes et plus pratiques ! Le flexbox peut t'épargner bien des lignes de codes, et vu le niveau que tu sembles avoir, tu m'as l'air tout à fait prête à sauter le pas.

Coucou je te rends un code hésite pas à me corriger j'ai peut etre trop abusé du position absolute xD

Aperçu
Rajout d'un hover sur les liens

CSS

Code:


<style>
#pa{
    
    --bleu-foncé: #71899e;
    --jaune: #e5e6c9;
    --bleu-clair: #afd2df;
    width: 850px;
    height: 650px;
    overflow: hidden;
    background-color: #99a7b3;
}

#bienvenue{
    width: 600px;
    height: 40px;
    position: absolute;
    text-align: center;
    color: var(--bleu-foncé);
    text-transform: uppercase;
  
}

#bienvenue #bloc-bleu-foncé{
width: 35%;
height: 100%;
background-color: var(--bleu-foncé);
position: absolute;
top: 0px;
}

#bienvenue #bloc-jaune{
    width: 70%;
    height: 100%;
    background-color: var(--jaune);
    position: absolute;
    top: 0px;
    left: 36%;
}

#bloc-jaune h1{
    position: relative;
    top: -50%;
}

#bienvenue #bloc-bleu-clair{
width: 35%;
height: 100%;
background-color: var(--bleu-clair);
position: absolute;
top: 0px;
left: 106.6%;
}

#staff{
    width: 162px;
    height: 300px;
   position: absolute;
   top: 60px;
    left: 2%;
  
}

#staff #staff1 {
    text-transform: uppercase;
    text-align: center;
      display: block;
      width: 100%;
      height: 25%;
      background-image: url('https://via.placeholder.com/160x75');
}

#staff #staff2 {
    text-transform: uppercase;
    text-align: center;
      display: block;
      width: 100%;
      height: 25%;
      background-image: url('https://via.placeholder.com/160x75');
}

#staff #staff3{
    text-transform: uppercase;
    text-align: center;
      display: block;
      width: 100%;
      height: 25%;
      background-image: url('https://via.placeholder.com/160x75');
}

#staff  p{
    position: relative;
    top: 25%;
    opacity: 0;
    color: var(--jaune);
    font-weight: bold;
}

#staff p::first-line{
    font-size: 150%;
}

 #staff  #staff3:hover {
    background-image: none;
}

#staff  #staff1:hover {
    background-image: none;
}

#staff  #staff2:hover {
    background-image: none;
}

#staff  #staff1:hover p, #staff2:hover p, #staff3:hover p{
    opacity: 1;
}

#staff a{
    text-decoration: none;
    color: var(--jaune);
    font-weight: bold;
}




#contexte{
    width: 435px;
    height: 280px;
    overflow: auto;
     margin-right: 3%;
    background-color: var(--jaune);
    position: absolute;
    top: 60px;
    left: 15%;
    text-align: justify;
    color: var(--bleu-foncé);
    padding: 10px;
    scrollbar-width: none;
}

#predefini{
    width: 170px;
    height: 300px;
    position: absolute;
    top: 60px;
    right: 37%;
}

#predefini img{
    margin-bottom: 10px;
    margin-left: 3px;
    
    
}



#liens{
    width: 820px;
    height: 50px;
    overflow: auto;
    background-color: var(--jaune);
    position: absolute;
    bottom: 220px;
    left: 2%;
    text-transform: uppercase;
    color: var(--bleu-foncé);
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    padding-top: 20px;
    text-shadow: 1px 1px 1px var(--bleu-foncé);
}

#liens a{
    text-decoration: none;
    color: var(--bleu-foncé);
    
}

#liens a:hover {
    color: var(--bleu-clair);
}

#news{
    width: 310px;
    height: 140px;
    background-color: var(--bleu-foncé);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    position: absolute;
    bottom: 75px;
    left: 2%;
}

#news li{
    list-style-type: none;
    color: var(--jaune);
    font-weight: bold;
    position: relative;
    top: -10px;
    left: -25px;
}

#topsite{
    width: 500px;
    height: 140px;
    position: absolute;
    bottom: 75px;
    left: 25.8%;
}

#topsite img{
    width: 140px;
    height: 140px;
    margin-right: 2px;
    margin-left: 20px;
}

#partenaires{
    width: 820px;
    height: 70px;
    background-color: var(--bleu-clair);
    position: absolute;
    bottom: 2px;
    left: 2%;
    overflow-y: auto;
    scrollbar-width: none;
    display: inline;
}

#partenaires img{
    margin-top: 10px;
    margin-left: 2px;
    
   -webkit-animation: slide-out-left 10s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
           animation: slide-out-left 10s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;

}

/* ----------------------------------------------
 * Generated by Animista on 2020-11-11 9:45:17
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-left
 * ----------------------------------------
 */
 @-webkit-keyframes slide-out-left {
    0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
 50% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 1;
  }
  100%{
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
 50% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 1;
  }
  100%{
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

</style>


HTML

Code:


<div id="pa">
 <div id="bienvenue">
  <div id="bloc-bleu-foncé"></div>
  <div id="bloc-jaune"><h1>Bienvenue !</h1></div>
  <div id="bloc-bleu-clair"></div>
 </div>
 <div id="staff">
     <span id="staff1"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></span>
     <span id="staff2"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></span>
     <span id="staff3"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></span>
 </div>
 <div id="contexte">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit, massa convallis facilisis rhoncus, dui massa commodo nisl, quis mollis nibh odio in lectus. Vestibulum pellentesque porttitor odio a tristique. Praesent scelerisque ullamcorper purus, in tincidunt nunc ultrices in. Aliquam vitae mollis nunc, tempus congue lectus. Duis mi neque, hendrerit ut egestas varius, faucibus sit amet turpis. Donec aliquet, felis ac laoreet pellentesque, est metus commodo metus, sed accumsan nisi ligula ut tortor. Etiam id condimentum eros. Mauris ornare, felis id facilisis iaculis, augue metus aliquet lectus, at aliquet mauris enim eget mauris. In eu orci ac nulla pellentesque iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit, massa convallis facilisis rhoncus, dui massa commodo nisl, quis mollis nibh odio in lectus. Vestibulum pellentesque porttitor odio a tristique. Praesent scelerisque ullamcorper purus, in tincidunt nunc ultrices in. Aliquam vitae mollis nunc, tempus congue lectus. Duis mi neque, hendrerit ut egestas varius, faucibus sit amet turpis. Donec aliquet, felis ac laoreet pellentesque, est metus commodo metus, sed accumsan nisi ligula ut tortor. Etiam id condimentum eros. Mauris ornare, felis id facilisis iaculis, augue metus aliquet lectus, at aliquet mauris enim eget mauris. In eu orci ac nulla pellentesque iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit, massa convallis facilisis rhoncus, dui massa commodo nisl, quis mollis nibh odio in lectus. Vestibulum pellentesque porttitor odio a tristique. Praesent scelerisque ullamcorper purus, in tincidunt nunc ultrices in. Aliquam vitae mollis nunc, tempus congue lectus. Duis mi neque, hendrerit ut egestas varius, faucibus sit amet turpis. Donec aliquet, felis ac laoreet pellentesque, est metus commodo metus, sed accumsan nisi ligula ut tortor. Etiam id condimentum eros. Mauris ornare, felis id facilisis iaculis, augue metus aliquet lectus, at aliquet mauris enim eget mauris. In eu orci ac nulla pellentesque iaculis.
 </div>
 <div id="predefini">
 <p> <a href=""><img src="https://via.placeholder.com/80x80" /></a> <a href=""><img src="https://via.placeholder.com/80x80" /></a><br />
   <a href=""><img src="https://via.placeholder.com/80x80" /></a> <a href=""><img src="https://via.placeholder.com/80x80" /></a><br />
   <a href=""><img src="https://via.placeholder.com/80x80" /></a> <a href=""><img src="https://via.placeholder.com/80x80" /></a></p>
 </div>
 <div id="liens">
<a href="">Lien</a> - <a href="">Lien</a> - <a href="">Lien</a> - <a href="">Lien</a> - <a href="">Lien</a> - <a href="">Lien</a> - <a href="">Lien</a> - <a href="">Lien</a>
 </div>

 <div id="news">
<ul><li>xx.xx.xx : ceci est une news </li>
    <li>xx.xx.xx : ceci est une news</li>
    <li>xx.xx.xx : ceci est une news</li>
    <li>xx.xx.xx : ceci est une news</li>
    <li>xx.xx.xx : ceci est une news</li>
    <li>xx.xx.xx : ceci est une news</li>
    <li>xx.xx.xx : ceci est une news</li></ul>
 </div>

 <div id="topsite">
<a href=""><img src="https://via.placeholder.com/140x140" /></a><a href=""><img src="https://via.placeholder.com/140x140" /></a><a href=""><img src="https://via.placeholder.com/140x140" /></a>
 </div>
 <div id="partenaires">
<img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" /><img src="https://via.placeholder.com/100x50" />
 </div>
</div>

Coucou,
Je sais pas coder donc je peux pas te corriger, par contre je peux te signaler que ça déconne quelque part avec un screenshot :

Han chrome aime pas mes positionnement apparemment.

Bonjour !
J'ai jeté un oeil à ton code, donc je viens te faire un petit retour !
L'erreur principale que je vois et qui explique le bug que rencontre Clyde, c'est que tu n'as pas attribué de position relative à ton bloc conteneur. Si tu oublies de faire ça, les blocs positionnés en absolus vont se placer par rapport  au body, qui lui dépend totalement de la taille de l'écran de chacun !

Code:

#pa {
--bleu-foncé: #71899e;
    --jaune: #e5e6c9;
    --bleu-clair: #afd2df;
    width: 850px;
    height: 650px;
    overflow: hidden;
    background-color: #99a7b3;
    position: relative;
}

De cette manière, il faut revoir tous les positionnements pour qu'ils collent à leur bloc parent...
Comme je te l'ai expliqué sur le Discord, on ne code habituellement  pas ce genre de chose avec la méthode relative/absolute, qui est réservée pour des éléments qu'on sort délibérément du flux. Je comprends que tu veuilles t'entraîner là-dessus, mais cela aurait été davantage pertinent d'en profiter pour travailler le z-index, qui est une des fonctionnalités inhérente à ce mode de positionnement, et que cette maquette-ci ne permet pas de faire.

Pour le reste, ça m'a l'air pas mal ! Tu sembles connaître les sélecteurs de base. Ca manque de propreté niveau HTML (les blocs qui servent de deco, j'aurais codé ça avec des before et after pour éviter d'encombrer le HTML qui fait seulement office de balisage, normalement), mais je vois que tu connais les balises et leur sémantique. Continue comme ça !

Hello :)

A noter également, pour accompagner les remarques d'Artémis, qu'en HTML on essaie de séparer le fond de la forme. Il s'agit donc de nommer les éléments non pas par leur apparence, mais par leur fonction, à quelques exceptions près.

Pour expliquer plus clairement, ces "bloc-bleu-clair" et autres "bloc-jaune", que se passe-t-il si tu décides soudainement de changer les couleurs ? On a alors une disparité entre le nom des blocs, et leur aspect. Et renommer ces éléments impliquerait de modifier tant le CSS que le HTML, ce qui prend un peu de temps que l'on aurait pu économiser.

En ce qui concerne ton usage des classes et identifiants, tu abuses un peu trop des identifiants. Souviens toi qu'un identifiant ne peut être utilisé qu'une seule fois dans toute une page. Certes, rien n'interdit de s'en servir si tu es sûr et certain qu'ils ne seront utilisés qu'une fois (encore qu'il me semble que le validateur HTML ne laisserait pas passer leur abus), mais les pratiques CSS recommandent généralement de privilégier les classes et d'utiliser les identifiants pour des éléments prédominants, qui ne seront présents qu'une seule et unique fois sur une page.

C'est d'autant plus important qu'en CSS on essaie d'éviter de se répéter. Si plusieurs éléments ont exactement la même apparence, tu peux te contenter d'une classe commune (et peut-être de classes additionnelles pour ajouter juste un détail).

Autre pratique importante : On ne place jamais un élément block dans un élément inline (en ligne) ;  pour le dire de façon imagée, ça reviendrait à vouloir placer une boite à l'intérieur d'une feuille de papier, alors qu'en principe ça devrait être l'inverse. Par exemple, l'élément html <span> est un élément inline générique. Tu ne peux donc pas y placer de paragraphes, qui sont des blocs. C'est sémantiquement incorrect et ta page ne passerait donc pas la validation HTML.

Ainsi, dans le cas du staff par exemple :

Code:

<div id="staff">
     <span id="staff1"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></span>
     <span id="staff2"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></span>
     <span id="staff3"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></span>
 </div>

Tu pourrais modifier par ceci :

Code:

<div class="listeStaff">
     <div class ="itemStaff staff1"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></div>
     <div class ="itemStaff staff2"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></div>
     <div class ="itemStaff staff3"><p>Pseudo<br /><a href="">MP</a> - <a href="">Profil</a></p></div>
 </div>

Avec le CSS qui deviendrait ceci :

Code:

.listeStaff{
      width: 162px;
      height: 300px;
     position: absolute;
     top: 60px;
      left: 2%;
  }
  
  .itemStaff {
      text-transform: uppercase;
      text-align: center;
        display: block;
        width: 100%;
        height: 25%;
        background-image: url('https://via.placeholder.com/160x75');
  }
  
.itemStaff  .staff1 {  background-image: url('https://via.placeholder.com/160x75'); }
.itemStaff  .staff2 {  background-image: url('https://via.placeholder.com/160x75'); }
.itemStaff  .staff3 {  background-image: url('https://via.placeholder.com/160x75'); }


Je suis aussi étonnée que d'un côté tu ait fait ceci :

Code:

#staff  #staff3:hover {
      background-image: none;
  }
  
  #staff  #staff1:hover {
      background-image: none;
  }
  
  #staff  #staff2:hover {
      background-image: none;
  }

Donc, répétition des mêmes lignes encore et encore, et juste après :

Code:

#staff  #staff1:hover p, #staff2:hover p, #staff3:hover p{
      opacity: 1;
  }

Là tu as bien pensé à indiquer que tu ciblais plusieurs éléments différents ayant les mêmes propriétés !

Avec mon exemple, ça se raccourcirait d'autant plus :

Code:

.itemStaff:hover { background-image: none; }
.itemStaff:hover p { opacity : 1; }

D'ailleurs, au vu de mon réflexe d'utiliser les mots "liste" et "item" dans mon nommage, sans doute que tu aurais pu utiliser une liste à cet endroit ^^

Je m'interroge aussi sur la présence de ce scrollbar-width: none; dans une de tes définitions. En premier lieu, ça n'affecte à ce jour que firefox, et pourquoi tu voudrais que la largeur de la scrollbar soit inexistante ?

Enfin, le nom d'une classe ne doit jamais comporter d'accents !

En résumé, pour ce qui concerne les petites erreurs :

• Comme Artemis l'a dit, les éléments positionnés en absolu sont positionnés "par rapport" à un bloc parent qui est lui-même positionné. Généralement, on donne un positionnement relatif au bloc parent sans le sortir du flux (dans notre cas, le bloc d'identifiant #pa gagnerait donc à se voir attribuer un position:relative; )
  
• On ne met jamais d'accent au nom d'une classe (ni de caractères spéciaux)
  
• On ne place jamais d'élément bloc (comme <p> ou <div>) dans un élément inline (comme <span> ou <strong>)
  

Et pour ce qui concerne l’acquisition de meilleures habitudes de codage :

• Il est d'usage de privilégier les classes aux identifiants. Ton code n'est pas incorrect pour autant, mais c'est déconseillé d'utiliser des identifiants quand tu peux te contenter de classes.
  
• Assure-toi toujours d'éviter la duplication de code au maximum, le CSS te permet de factoriser les éléments communs puis de faire au cas par cas si besoin est.
  
• Il vaut mieux nommer les classes (ou identifiants) par la fonction de l'élément dans le code, et non par son aspect, ainsi si tu changes l'aspect, le nom de la classe ne deviendra pas obsolète.
  
• Essaie de mettre à profit les éléments HTML existants. Si tu crées une liste d'objets similaires (partenaires, staff, liens de navigation), ça peut être avisé d'utiliser une liste HTML. Si tu affiche des titres, pourquoi ne pas utiliser les balises de titre ?
  

Voilà voilà !