Les effets visuels

La propriété "display"

• la propriété display permet d'empêcher l'affichage d'éléments ou fixer le mode d'affichage.
• les valeurs possibles :
  • none : l'élément ne sera pas affiché
  • block : l'élément devient de type "block"
  • inline : l'élément devient de type "en ligne"
  • list-item : l'élément devient de type "élément de liste à puce"
• Exemple :

  Code HTML/CSS :

  <h3 style="display:inline">Menus déroulants</h3>
  <p style="display:inline"> (basé sur l'article par Marc Hertzog)</p>
  Dans le navigateur :

  Menus déroulants

  (basé sur l'article par Marc Hertzog)

La propriété "visibility"

• la propriété visibility permet de spécifier si un élément doit être affiché ou non.
• les valeurs possibles :
  • hidden masque l'élément qui continue quand même à prendre de la place sur l'écran; comparons avec display:none; qui fait complètement disparaître l'élément
  • visible visible (par défaut)

La propriété "clip"

• la propriété display permet de n'afficher qu'une partie d'un élément;
  la valeur de la propriété : rect(valeur1, valeur2, valeur3, valeur4) indique les coordonnées du rectangle qui sera affiché.
• Exemple :

  Code HTML/CSS :

   <div style="width:80px; height:80px">
     <img src="css/img/poulet.gif" alt="poulet" style="position:absolute; clip:rect(0px 70px 70px 0px)"/>
   </div>

  Dans le navigateur :
  

La propriété "overflow"

• la propriété overflow permet de spécifier si le contenu d'un élément de type bloc doit être rogné quand celui-ci déborde de la boîte de cet élément
• les valeurs possibles :
  • visible : tout l'élément sera affiché (par défaut)
  • hidden : l'élément sera coupé s'il dépasse les limites définies par la hauteur et la longueur
  • scroll : le navigateur ajoutera des barres de défilement si l'élément dépasse les limites
  • auto : le navigateur décidera s'il doit ajouter des barres de défilement
• Exemple :

  Code HTML/CSS :

   <div style="width:80px; height:80px; overflow:hidden">
     <img src="css/img/poulet.gif" alt="poulet"/>
   </div>

  Dans le navigateur :
  

La différence entre un "div" et un "calque" (selon Alsacreations)

• Les "layers" (calques) sont des éléments du langage HTML que Netscape a ajoutés dans son navigateur 4.0.
• Un calque pouvait contenir du texte, des images et d'autres calques.
• Il pouvait être placé exactement au pixel.
• Jamais reconnu par IE et absent dans HTML 4.0
• Supporté par Dreamweaver qui a remplacé layer par div.
• CSS2 : chaque balise de bloc peut servir de calque.
• un div n'est pas un calque et un calque n'est pas un div : tous les éléments HTML peuvent être positionnés et superposés en CSS.