Le deal à ne pas rater :
NIKE : 25% SUR TOUT LE SITE
Voir le deal
-20%
Le deal à ne pas rater :
Remise de 20% sur la barre de son Sony HT-SD35 2.1
199.99 € 249.99 €
Voir le deal

[Intermédiaire] Page d'accueil #1 - Aed


Aller en bas

Clyde
Maxi-graphiste - Idole suprême de la plèbe au rang particulièrement long

Bonjour à tous !
Pour ne pas laisser le monopole du schéma de la PA à Batty ( ♥️ ) j'ai décidé de poster également un schéma ♥️
Je n'ai pas mis de hover (mis à part celui des partenariats), mais vous pouvez totalement en mettre si vous voulez ! Il y en aura un obligé pour le staff, mais je vous laisse choisir !
► les trois rectangles en haut à gauche : le staff
► les six carrés à droite : prédéfinis
► le rectangle en bas à droite : les news
► les trois carrés avec 1 2 3 : les top sites

Je n'ai pas d'image spécifique pour ça, utilisez les vôtres !

[Intermédiaire] Page d'accueil #1 - Aed 6lG2nDW
Clyde
Date d'inscription : 28/03/2013
Messages : 1563

Invité
Invité

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 ! ~
Anonymous

Little Gecko
Ancien.ne du staff

http://mythologie-amis.forumactif.org
Bonsoir bonsoiiiir!
Voici ma PA x3
Spoiler:

Little Gecko
Date d'inscription : 24/08/2013
Messages : 766

Clyde
Maxi-graphiste - Idole suprême de la plèbe au rang particulièrement long

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 ♥️
Clyde
Date d'inscription : 28/03/2013
Messages : 1563


[Intermédiaire] Page d'accueil #1 - Aed My34
[Intermédiaire] Page d'accueil #1 - Aed 0wfx
[Intermédiaire] Page d'accueil #1 - Aed E58w
Spoiler:

merci sygea et yozora jvous aime ♥
[Intermédiaire] Page d'accueil #1 - Aed 050420_aed_streetcred
[Intermédiaire] Page d'accueil #1 - Aed 37xj

Invité
Invité

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. [Intermédiaire] Page d'accueil #1 - Aed 3775839356
Anonymous

Little Gecko
Ancien.ne du staff

http://mythologie-amis.forumactif.org
Ooohw cool! Merci j'ai adoré faire ce schéma !
Et oui c'est vrai j'ai pas pensé à faire de floats & margin o/
Little Gecko
Date d'inscription : 24/08/2013
Messages : 766

Khendra
Newbie

Khendra
Date d'inscription : 02/01/2020
Messages : 43

Lzzy
Newbie

Et voilà ma version :



Je n'ai pas retrouvé les bonnes couleurs et la vraie police :/
Lzzy
Date d'inscription : 18/02/2020
Messages : 8

Artemis
Admin & serial codeuse

http://hakumei.forumactif.org/
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é. Miam

@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 : http://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. [Intermédiaire] Page d'accueil #1 - Aed 3775839356
Artemis
Date d'inscription : 14/01/2017
Messages : 2667


 

Ayfoth
Newbie

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>
Ayfoth
Date d'inscription : 27/10/2020
Messages : 47

Clyde
Maxi-graphiste - Idole suprême de la plèbe au rang particulièrement long

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 : [Intermédiaire] Page d'accueil #1 - Aed NGqqA7f
Clyde
Date d'inscription : 28/03/2013
Messages : 1563


[Intermédiaire] Page d'accueil #1 - Aed My34
[Intermédiaire] Page d'accueil #1 - Aed 0wfx
[Intermédiaire] Page d'accueil #1 - Aed E58w
Spoiler:

merci sygea et yozora jvous aime ♥
[Intermédiaire] Page d'accueil #1 - Aed 050420_aed_streetcred
[Intermédiaire] Page d'accueil #1 - Aed 37xj

Ayfoth
Newbie

Han chrome aime pas mes positionnement apparemment.
Ayfoth
Date d'inscription : 27/10/2020
Messages : 47

Artemis
Admin & serial codeuse

http://hakumei.forumactif.org/
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. Sad

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 ! ♥
Artemis
Date d'inscription : 14/01/2017
Messages : 2667


 

'Christa
Membre timide

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à !
'Christa
Date d'inscription : 27/10/2018
Messages : 248

Contenu sponsorisé


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