Comprendre l'héritage et les propriétés css

* {
  padding: 10px;
}

MatthieuR a écrit :

"height" est également une propriété qui ne crée pas d'héritage cependant tu n'es pas obligé de spécifier de "height" aux parents de l'élément visé.
Dans ton code, tu pourrais n'avoir la propriété "height" que sur "#subnavbar DIV.bgborder". Ce bloc forcera la hauteur de ces parents.

Felipe a écrit :

Comme dit par MatthieuR, les parents vont faire la taille du plus haut des enfants (en simplifiant) donc il suffit d'indiquer la hauteur pour 1 seul élément. Ou mieux de ne jamais jamais indiquer de hauteur comme ça on peut avoir un texte qui passe sur 2 lignes (zoom texte ou traduction sur une autre page ou autre bloc similaire ailleurs) et ne rien avoir à faire. Un texte sur fond coloré doit être plus haut ? Il y a padding pour ça (et line-height pour l'interlignage). Et au pire min-height qui va fixer un minimum mais pas de maximum. height c'est moche, ça fige dans le marbre alors que le web c'est pas un PDF sur une page A4 mais un truc très très changeant.

#subnavbar {
	padding: 0; margin: 0 auto; width: 762px; /*height: 25px;*/ line-height: 24px
}
#subnavbar tr.rowcolor {
	background-color: #aba358; /*height: 25px;*/ margin: 0
}
#subnavbar div.bgborder {
	background: url(../img/border.png) no-repeat left top; /*height: 25px;*/ margin: 0
}

Felipe a écrit :

Toutes celles où ça parait "idiot" (contre-intuitif) qu'il y ait héritage.
line-height par exemple, tu veux pas 200% de 200% de 200% de la valeur de l'ancêtre.
border : un div ancêtre a une bordure, on veut pas une nouvelle bordure pour chacun de ses enfants et descendants.
La taille de texte c'est plus compliqué : avec "font-size: 13px", tous les descendants vont faire 13px mais avec "font-size: 1.2em" (ou 120% c'est pareil), le petit-enfant ne fait pas "taille de l'ancêtre ayant l'instruction x 1.2 x 1.2" mais "la même valeur que l'ancêtre". Il hérite de la valeur calculée (13px ou qqch x 1.2) et pas de l'instruction elle-même.

MatthieuR a écrit :

Note : je préfère écrire les balises en minuscules, par défaut une "div" a un "padding" et un "margin" à 0, pas besoin d'unités si tu écris 0.

Felipe a écrit :

+1 pour l'écriture des propriétés CSS en minuscule et j'ajoute que rajouter une unité derrière la valeur 0 est inutile. Mieux vaut prendre l'habitude d'être plus lisible en écrivant margin: 0; et pas margin: 0px;

Felipe a écrit :

À moins d'une contre-indication, utilise plutôt HTML5, qui est une RECommandation du W3C depuis approx. 1 an. C'est pas l'avenir du web, c'est le présent (et gaffe aux ressources qui parlerait encore d'HTML4.01, c'est vieux avec gros risque d'être dépassé. Si en plus les propriétés CSS sont en majuscules, ça date de 1 ou 2 décennies )

MatthieuR a écrit :

Par ailleurs, si tu mets une "div" dans un tableau c'est que tu te sers de ce tableau comme structure de ta page et je ne suis pas sûr que ce soit la meilleure option car pas très souple au niveau des positionnements (bien que sur certains centrages verticaux ça soit parfois pratique...)

<div id="navbar"> // menu sur une rangée/ligne
// code du menu
</div> // fin du code du menu

 <div id="subnavbar"> // sous-menu sur une rangée/ligne
  <table> // tableau
   <tbody>
    <tr class="rowcolor">   // couleur de fond du sous-menu
     <td width="6">
      <div class="bgborder"></div> // bordure sous forme d'image (gauche)
     </td>
      <td width="110">
       <div class="cellalign"> // texte centré horizontalement dans la cellule 1 du tableau
        <a href="intitule1.html">
         <span class="menu">intitulé1</span>
        </a>
       </div>
      </td>
       <td width="108">
        <div class="cellalign"> // texte centré horizontalement dans la cellule 2 du tableau
         <a href="intitule2.html">
          <span class="menu">intitulé2</span>
         </a>
        </div>
       </td>
        <td width="154">
         <div class="cellalign"> // texte centré horizontalement dans la cellule 3 du tableau
          <a href="intitule3.html">
           <span class="menu">intitulé3</span>
          </a>
         </div>
        </td>
         <td width="116">
          <div class="cellalign"> // texte centré horizontalement dans la cellule 4 du tableau
           <a href="intitule4.html">
            <span class="menu">intitulé4</span>
           </a>
          </div>
         </td>
          <td width="149">
	   <div class="cellalign"> // texte centré horizontalement dans la cellule 5 du tableau
	    <a href="intitule5.html">
	     <span class="menu">intitulé5</span>
	    </a>
           </div>
          </td>
           <td width="113">
	    <div class="cellalign"> // texte centré horizontalement dans la cellule 6 du tableau
             <a href="intitule6.html">
	      <span class="menu">intitulé6</span>
	     </a>
	    </div>
           </td>
            <td width="6">
             <div class="bgborder"></div> // bordure sous forme d'image (droit)
            </td>
    </tr>
  </tbody>
 </table>
</div> // fin du code du sous-menu

MatthieuR a écrit :
Par ailleurs, si tu mets une "div" dans un tableau c'est que tu te sers de ce tableau comme structure de ta page et je ne suis pas sûr que ce soit la meilleure option car pas très souple au niveau des positionnements (bien que sur certains centrages verticaux ça soit parfois pratique...)

<div id="navbar">
 <div width="90" class="cellalign">
  <a href="intitule1.htm">
   <span class="menu">intitule1</span>
  </a>
 </div>
   <div width="90" class="cellalign">
    <a href="intitule2.htm">
     <span class="menu">intitule2</span>
    </a>
   </div>
     <div width="100" class="cellalign">
      <a href="intitule3.htm">
       <span class="menu">intitule3</span>
      </a>
     </div>
       <div width="93" class="cellalign">
        <a href="intitule4.htm">
         <span class="menu">intitule4</span>
        </a>
       </div>
         <div width="99" class="cellalign">
          <a href="intitule5.htm">
           <span class="menu">intitule5</span>
          </a>
         </div>
</div>

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <!--la partie en haut de ta page-->
  </header>
  <nav>
    <!--ta navigation principale-->
  </nav>
  <main>
    <!--ton contenu principal-->
  </main>
  <footer>
    <!--ton pied de page-->
  </footer>
</body>
</html>

<div id="nav">
  <!--ta navigation principale-->
</div>

  <nav>
    <div style="width:90px">
      <a href="intitule1.htm">intitule1</a>
    </div>
    <div style="width:90px">
      <a href="intitule2.htm">intitule2</a>
    </div>
    <div style="width:100px">
      <a href="intitule3.htm">intitule3</a>
    </div>
    <div style="width:93px">
      <a href="intitule4.htm">intitule4</a>
    </div>
    <div style="width:99px">
      <a href="intitule5.htm">intitule5</a>
    </div>
  </nav>

nav{
  font-size: 0; /*supprimer les espaces entre les blocs inline-block*/
}

nav div{
  background-color: grey;
  display: inline-block;
  font-size: 16px;
  text-align: center;
}
nav a{
  text-decoration: none;
  color: white;
  line-height: 30px;
}
nav a:hover{
  color: black;
}

  <nav>
    <ul>
      <li><a href="intitule1.htm">intitule1</a></li>
      <li><a href="intitule2.htm">intitule2</a></li>
      <li><a href="intitule3.htm">intitule3</a></li>
      <li><a href="intitule4.htm">intitule4</a></li>
      <li><a href="intitule5.htm">intitule5</a></li>
    </ul>
  </nav>

nav ul{
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li{
  font-size: 16px;
  display: inline-block;
}
nav ul li a{
  display: block; /*on peut changer le type d'affichage d'un élément inline en block */
  line-height: 30px;
  padding: 0 20px;
  color: white;
  background-color: grey;
  text-decoration: none;
}
nav ul li a:hover{
  background-color: firebrick;
}