// (division). Ces balises ont pour but d’organiser des divisions de texte en leur appliquant des mises en forme particulières, portant aussi bien sur les caractères que les paragraphes, les couleurs et autres dispositions. === Principe d’utilisation === Pour organiser l’espace, il faut penser les différentes zones d’un écran comme autant de cadres flottants ou de flux d’informations qui se coulent dans l’espace laissé disponible par les autres portions de texte. Par exemple, sur copie d’écran ci-contre, du site de l’académie de Caen, on peut imaginer que les zones encadrées en rouge sont autant d’espaces indépendants emboîtés les uns dans les autres. Le principe des divisions est donc de définir comment elles se comportent les unes par rapport aux autres en terme de superposition, d’alignement et de retour à la ligne, et comment elles se positionnent par rapport à l’écran en terme d’alignement (gauche ou droite). Par défaut, une division occupe une portion de l’espace, et tout le reste du texte ou les autres divisions se collent contre ce cadre dans l’espace disponible de l’écran. === Propriétés //float// et //clear// === Le paramétrage de ces positionnements se fait principalement par les propriétés //float// et //clear//. * //Float// permet d’indiquer la position d’une division par rapport à l’écran. Les valeurs possibles sont //left// et //right//, indiquant si la division est alignée à gauche ou à droite de l’écran (ou collée à la division de gauche ou de droite qui la précède). * //Clear// définit comment une division se comporte par rapport à celles qui existent précédemment. Les valeurs possibles sont : *//left// (on ne se coule pas contre la division existant à gauche, et l’on retourne à la ligne), *//right// (on ne se coule pas par rapport à la division de droite) *//both// (on ne se coule contre aucune des divisions existante) On trouvera une explication illustrée de ces éléments à l’adresse suivante : [[http://www.journaldunet.com/developpeur/tutoriel/css/061130-css-comprendre-float-clear.shtml]] Une autre explication plus détaillée est lisible ici : [[http://openweb.eu.org/articles/initiation_flux/]] === Propriétés des divisions === Pour définir exactement l’espace occupé par une division, on utilisera les propriétés de marge (voir plus haut) ainsi que la hauteur (//height//), la largeur (//width//). On pourra aussi jouer sur la couleur d’arrière plan, sur les bordures, etc. Mise en œuvre La mise en œuvre de ces divisions se fait en deux étapes. Dans un premier temps, on définit les propriétés d’un style correspondant à chacune des zones (dans la feuille de style), et dans un second temps on applique le style à une balise //

// grâce à l’option //<... class="nom_du_style">//. == Illustration == On peut imaginer que la page du site de l’académie de Caen avait, dans sa feuille de style les éléments suivants correspondant au cadre de tout en haut, au cadre de tout à gauche et celui de tout à droite :


.zoneHaut {
       background-image: URL("imageAca.gif") ;
       float : left ;
       width : 80% ;
     }

.zoneGauche {
       background-color : green ;
       float : left ;    /*collé à ce qu’il y a à gauche*/
       clear : left ;    /*retour à la ligne par rapport à ce qu’il y a à gauche*/
     }

.zoneDroite {
        background-color : green ;
        float : right ;        /* est aligné sur le bord de droite */
        width : 20% ;           /*occupe 20% de l’espace à droite*/
     }

La page HTML qui constitue l’accueil serait alors composée, notamment, des descriptions suivantes (en faisant appel à la feuille de style ci-dessus) : …

….texte_des_menus…

**Remarque** : si on avait choisi //clear :both// ; pour le style //zoneGauche//, la partie de gauche correspondant au menu se serait alors retrouvée calée à gauche en dessous de la dernière ligne de la zone de droite (logo du ministère). Complexité La complexité de l’utilisation de ces éléments grandit à mesure que les zones s’imbriquent et se superposent. Il est même possible d’aller jusqu’à des chevauchements. En outre, une balise //

// ne peut appliquer qu’une seule //classe de style//. On peut alors être amené à imbriquer des //

// faisant appel à des classes de style complémentaires. Il s’agit d’un véritable travail de designer Web, qui nécessite une grande rigueur, une parfaite connaissance de l’organisation des sites. En outre, les balises et les styles ne s’appliquent pas toujours parfaitement selon les différents navigateurs. === DIV vs Tableaux === L’utilisation des tableaux reste encore une solution de secours très pratique, qui permet d’avoir une vision directe de ce que l’on souhaite obtenir dans l’interface d’un éditeur de page. L’inconvénient de ces derniers est de s’adapter à la largeur des écrans 4/3 et 16/9. On jouera alors sur des pourcentages pour définir la largeur du tableau et de ses différentes colonnes. Pour remarque, la page de l’académie de Caen est constituée d’un mélange de tableaux et de DIV.