28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Complètement ignorant en css, j'ai besoin d'un titre en encadré, il y a bien <h2>, mais il ne correspond pas et déjà utilisé, j'ai donc essayé de créer un <h7> avec ce code:
h7 { margin: 0; padding: 0.20em 0.40em; background: #cc0000; font-size: 1.20em; font-weight: bold; border: 2px solid #C66300; }
Sauf que le W3C me sort une erreur à ce niveau, je ne sais pas quoi faire, pouvez vous m'aider,
Merci d'avance
Salut,

Il est normal que le validateur du W3C te sorte une erreur, puisque l'élément h7 n'existe pas (pour info, 6 niveaux sont prévus pour les titres de section, ce qui correspond aux éléments h1, h2, h3, h4, h5 et h6).

En outre, tu peux simplifier certaines notations dans ton code CSS :
* 0.20em et 0.40em peuvent être notés, respectivement, 0.2em et 0.4em ;
* le code couleur hexadécimal #cc0000, vu qu'il comporte trois paires de chiffres hexadécimaux identiques (cc, 00 et 00), peut être raccourci en #c00.

Enfin, rien n'empêche d'avoir plusieurs éléments HTML h2 auxquels s'appliquent des styles CSS différents. Pour cela, il faut soit jouer avec les éléments ancêtres de ton h2 soit ajouter un attribut id ou class à l'élément h2.
<h2>Un premier h2</h2>
<div id="ancetre">
  <div>
    <h2>Un deuxième h2</h2>
  </div>
</div>
<h2 id="monid">Un troisième h2</h2>
<h2 class="maclasse">Un quatrième h2</h2>
<h2 class="maclasse">Un cinquième h2</h2>

/* Règle CSS s'appliquant à tous les éléments h2 de la page */
h2 {
  color: red;
}
/* Règle CSS s'appliquant aux éléments h2 ayant pour ancêtre un élément ayant pour attribut id "ancetre" */
#ancetre h2 {
  color: blue;
}
/* Règle CSS s'appliquant à l'élément h2 ayant pour attribut id "monid" */
#monid {
  color: green;
}
/* Règle CSS s'appliquant aux éléments h2 ayant pour classe (attribut class) "maclass" */
h2.maclasse {
  color: purple;
}

Mets-toi à l'esprit que le choix des éléments HTML est indépendant de leur présentation. Autrement dit, si tel contenu de la page Web est un titre de section de niveau 2, ne refuse pas l'emploi de l'élément HTML h2 sous prétexte qu'il est déjà utilisé.
Bonjour,
Je m'en vais tester tout ça pour voir si j'ai compris la leçon, ainsi j'aurai d'autres horizons. Smiley biggrin
Merci beaucoup