Félicitations! Si vous avez percé jusqu'ici, il est probable que vous connaissiez suffisamment les 
propriétés CSS dont il est question dans ce chapitre, et que vous aimeriez les utiliser pour la présentation de vos pages. Peut-être avez-vous aussi reconnu les inconvénients des 
cadres ou bien vous aimeriez réserver les tableaux à la présentation de données? De toute façon vous devriez posséder les connaissances de base des CSS.
Une mise en page avec les feuilles de style CSS applique le concept de la séparation du contenu et de la forme d'une page, concept à l'origine des CSS. Des changements de la présentation sont ainsi faciles, il suffit de ne modifier que légèrement les définitions CSS. Et lorsque celles-ci sont présentées dans des fichiers séparés, vous pouvez déterminer la mise en page de tous les documents d'un projet de manière uniforme.
Contrairement aux mises en page avec des tableaux, la division de la page ne sera plus fixée uniquement par du code HTML. Vous pouvez définir l'agencement des éléments d'une page de manière flexible, sans contrainte de lignes et colonnes. La mise en page avec des CSS vous offre des possibilités au-delà de ce que vous pouvez atteindre avec des tableaux.
Par un choix judicieux des éléments et une disposition structurée des contenus, par un formatage et un positionnement avec des feuilles de style, l'accessibilité en sera améliorée. Le développement de pages sans obstacles gagne en importance. Ce développement est en particulier favorisé par la législation (concernant les sites Internet des organisations de l'Etat). De plus, la mise en page avec les CSS facilite l'entretien des pages et réduit considérablement le volume du code HTML ainsi que le temps de chargement.
N'essayez pas d'imiter la structure de la mise en page avec des tableaux par des éléments div emboîtées. Vous pouvez attribuer à chaque boîte les propriétés nécessaires float, width et margin et vous n'aurez besoin des balises div que pour grouper des éléments.
Dans la mise en page avec les feuilles de style, vous ne devriez utiliser la propriété position que de manière exceptionnelle. Dans ce cas il faudra tenir compte de la superposition éventuelle d'éléments due à l'agrandissement de la taille du texte ainsi que d'une possible position hors de la partie visible d'une petite fenêtre de navigateur.
Une élément « bloc » prend toute la largeur disponible, sauf si une largueur inférieure lui est attribuée par width. S'il reste assez de place, d'autres éléments peuvent être placés à côté à l'aide de float. Pour éviter du texte trop serré, une distance peut être indiquée par margin. Contrairement aux cellules d'un tableau, chaque élément bloc représente une boîte entièrement indépendante des autres éléments, comme le montre cet exemple:
<div style="float:left; width:5em; border:2px solid gray;">boîte floatée à gauche</div> <div style="border:2px solid blue;">boîte suivante</div>
Pour la boîte de gauche, float et width sont définies. Le contenu du texte de la boîte suivante est placé à côté, la boîte elle-même prend toute la largeur de la fenêtre dans cet exemple. La hauteur d'une boîte dépend de son contenu - si elle n'est pas spécifiée autrement - et n'est pas influencée par la boîte voisine. Une séparation en colonnes avec des couleurs d'arrière-plan uniformes, facile à réaliser avec des tableaux, est par conséquent plus difficile à simuler avec des CSS. Posez-vous la question si une séparation en colonnes est vraiment nécessaire ou bien si une légère adaptation de la mise en page aux possibilités plus restreintes des boîtes ne serait pas plus judicieuse.
Tous les exmples de ce chapitre utilisent une déclaration de type de document pour un mode conforme aux standards; c'est la condition pour une présentation correcte du modèle de boîte et de quelques adaptations inévitables pour Internet Explorer.
Le niveau 1 des CSS (CSS level 1) a été développé en 1996 déjà, (surtout) comme langage complémentaire au HTML. Le niveau suivant, CSS niveau 2, le standard actuel, a été publié en 1998 et permet des présentations et des partages de page exigeantes, qui n'étaient possibles jusque là qu'avec l'utilisation de cadres ou de tableaux. Malheureusement, même des navigateurs actuels ne peuvent pas encore tous interpréter à 100% les possibilités de présentation des CSS de niveau 2. Surtout Internet Explorer présente de grosses lacunes et des déviations par rapport au standard. C'est ainsi qu'il utilise, dans la version 7 actuelle, un autre modèle de boîte, hérité du mode non conforme et qui est à considérer souvent séparément dans les mises en page avec des CSS.
Des navigateurs encore plus anciens, comme Netscape 4, n'appliquent correctement qu'une fraction des CSS de niveau 2. Mais comme ils sont de moins en moins utilisés, de plus en plus d'auteurs réalisent leurs mises en pages avancées grâce aux CSS en rapport avec des aiguillages CSS pour exclure d'anciens navigateurs. C'est aussi le cas dans les exemples de ce chapitre!
|
| |
 |
Présentation en colonnes avec les CSS
|
 |
filtres (pour Microsoft seulement)
|
 SELFHTML/Aides à la navigation Feuilles de style CSS Mise en page avec les CSS |
|
© 2007 Redaktion SELFHTML / © 2007 Traduction Beate Niklewicz
selfhtml@fr.selfhtml.org
