Les DIV

Les div sont assez pratiques pour faire du contenu dynamique : redimensionnement, afficher/cacher, ...

Leur balise est "div" et on met tout ce qu’on veut dedans.

Avec l’apparition de frameworks javascript tels que jQuery, on peut à peu près tout faire avec un div.

Positionnement et présentation

Commençons par la base : comment placer un div où l’on veut.
On a cinq possibilités :

• position:inherit => idem que le parent
• position:static (par défaut) => se positionne par rapport à l’élément qui le précède (étonnant qu’il ne s’appelle pas « relative »
• position:relative => justement, quand on en parle. Le positionnement initial se fait comme si c’était un élément static, c’est ensuite que ça change : en effet, si on varie la position de l’élément avec les valeurs de « top » ou « left », sa nouvelle position sera calculée par rapport à sa position originale.
• position:absolute => positionnement par rapport à la totalité du document (body pour une page html)
• position:fixed : positionnement par rapport à la partie visible du navigateur. Si on fait défiler la page, il apparaîtra toujours à la même place.

  Exemple

  J’ai un div comme ça :

  <div id='monDiv1' style="width:100;height:100;background-color:'orange'">Je suis un div</div>
  Je suis un div

  
  Comme vous pouvez le constater, son positionnement est statique, il s’est posé sous le dernier bloc de texte qu’il a trouvé.
  Changeons son positionnement en :
  Il ne se passe rien, contrairement au positionnement . Quand au positionnement il le fait disparaître (en apparence). Revenir à la position
  Afin d’y voir un peu plus clair, donnons une position à notre div :
  verticale et horizontale (entrez des valeurs numériques)
  
  Un autre paramètre de positionnement important est le float : il permet de dire à notre div comment se placer par rapport à son élément parent ou l’élément juste avant lui dans la page html. Prenons pour exemple deux div.