Accueil    HTML    Balise DIV
 



balise div  Balise DIV : Division

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari



La balise <div> est un conteneur (à appréhender comme un cadre) qui peut inclure tous les tags html (tels que les paragraphes les tableaux, les listes, les images ..., et également d'autres divisions).
Cet élément est l'un des plus utilisé pour structurer les pages html en plusieurs grandes sections (en tête, partie principale, partie navigation, pied de page ...). En dehors de cet élément, les listes sont également très utilisées elles aussi pour structurer une page html, sous condition de leur associer des styles CSS adapté.

Son utilisation entraine un effet visuel : utilisation de toute la largeur disponible et retour à la ligne précédent et suivant son contenu. Il est possible de supprimer cet effet en appliquant le style CSS "display : inline;".
La balise <span> est un tag alternatif à la balise <div>, celle-ci n'appliquant pas par défaut d'effet visuel.

Consulter ici un exemple de mise en page d'une page html avec l'utilisation des divs.



Exemple d'utilisation de la balise div :





Exemple d'une div de hauteur fixe contenant une liste entrainant l'apparition d'une scrollbar : (Cet effet est réalisé avec l'utilisation du style CSS overflow)

<div style="width:300px; height:120px; overflow:auto; border:solid 1px black;">
   <ul>
      <li>Elémént 1</li>
      <li>Elémént 2</li>
      <li>Elémént 3</li>
      <li>Elémént 4</li>
      <li>Elémént 5</li>
      <li>Elémént 6</li>
      <li>Elémént 7</li>
      <li>Elémént 8</li>
      <li>Elémént 9</li>
      <li>Elémént 10</li>
      <li>Elémént 11</li>
      <li>Elémént 12</li>
   </ul>
</div>


Exemple de placement et superposition de deux divs :
(la seconde div apparait sous la première en raison du style CSS z-index)

<div style="z-index:1; position:relative; width:250px; height:120px; border:solid 1px black; background-color:lightgray;">
</div>
<div style="z-index:0; position:relative; top:-50px; left:100px; width:250px; height:120px; border:solid 1px black; background-color:lightsteelblue;">
</div>




Balise div avec une scrollbar :

  • Elémént 1
  • Elémént 2
  • Elémént 3
  • Elémént 4
  • Elémént 5
  • Elémént 6
  • Elémént 7
  • Elémént 8
  • Elémént 9
  • Elémént 10
  • Elémént 11
  • Elémént 12


Superposition de deux balises div :