Une balise div (abréviation du mot « Division ») et un élément HTML. On peut résumer l’élément div comme étant une boite qui permet de créer une mise en page élaborée. Sa particularité est de se situer en dehors de la séquence du document HTML, Bien que les limitation de WikiDOT ne permettent pas d’utiliser toutes ses finesses, une div écrite en fin de page peut très bien apparaitre en début ou se situer sous le texte ou se déplacer dans le temps. L’élément div et un élément très puissant pas toujours évident à utiliser. Les sites WikiDOT ne sont qu’une succession de div. Vous pouvez le constater en étudiant la structure des pages Wikidot
La Boite
La div crée une zone rectangulaire à la quelle vous pouvez appliquer des styles CSS. Pour vous permettre de matérialiser la boite voici une div avec une bordure :
[[div style="border:1px solid #000;width:140px;height:100px;"]]
= box
[[/div]]Ces instructions vont créèr la boite suivante :
box
Le signe « = » permet de centrer un élément, vous pouvez constater que le centrage reste local à la div.
Le style
Les seuls arguments autorisés pour la balise div sont class et style
- Class
- permet de rattacher la div à un style prédéfini dans le thème CSS de la page. Class ="nom-de-la-classe"
- Style
- permet de définir les éléments du style de la div en ligne. La syntaxe des éléments doit corresponde aux exigences des CCS comme ceux qui sont définis dans les thèmes. Style = "élément-de-style; élément-de-style; ……… ; élément-de-style;"
Chaque élément-de-style s’écrit sous la forme propriété : valeur(s) ;
border : détermine de façon concise le style de bordure, possède éléments
border-width | border-style | border-color
- border-width prends les valeurs thin | medium | thick | taille
- border-style prends les valeurs none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
- border-color prends la valeur color
Height : détermine la hauteur de l'élément, valeurs : auto | taille | %
Width : détermine la largeur de l'élément. valeurs : auto | taille | %
background-color : détermine la couleur du fond. valeurs : couleur-rgb | couleur-hex | couleur-nommée | transparent
background-image : détermine l'image de fond. valeurs : url(URL) | none