Introduction à la mise en page par CSS
Peu de développeurs web n’ont pas essayé d’utiliser les feuilles de styles (CSS) pour définir la typographie et les attributs d’une page simple tels que les couleurs de fond et de texte. De nos jours, de plus en plus de développeurs poussent CSS encore plus loin, en utilisant les CSS comme outils de mise en page plutôt que d’utiliser des tables. Dans cet article j’expliquerai pourquoi dans de nombreux cas les CSS sont préférables aux tables pour la mise en page, puis je vous montrerai quelques techniques de mise en page avec les CSS en recodant la page principale du site Apple Internet Developer en exemple.
Pour cet article je considèrerai que vous possédez une bonne connaissance des feuilles de style (CSS).
Qu’est-ce qu’une feuille de style (CSS) ?
La mise en page par CSS utilise les feuilles de style pour définir la position des élements sur la page web.
Typiquement, la mise en page par CSS remplace l’utilisation des tables, qui est actuellement la méthode la plus populaire pour placer les éléments d’une page.
On pense souvent qu’en utilisant la technique de la mise en page par CSS il est impossible de créer des pages complexes.
Bien qu’il est vrai que les tables offrent plus de flexibilité, je vous montrerai que des arrangements complexes sont tout à fait possibles avec CSS.
Pour voir comment fonctionne la mise en page avec CSS, regardez la page suivante, codée en premier avec des tables puis CSS.
Mise en Page avec Tables
Voici une façon traditionnelle d’organiser une page web avec des tables. Remarquez que le contenu du document (du texte tout simple) est entrelacé avec des balises qui définissent la présentation visuelle du contenu :
<html><head><title>Table layout</title></head><body bgcolor="white"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td colspan="3" valign="top"> <font color="red" face="verdana, sans-serif"> A banner that sits at...top of the page. </font> </td></tr> <tr><td width="190" valign="top"> <font color="green" face="verdana, sans-serif"> A column on ... left of the page. </font> </td> <td valign="top"> <font color="blue" face="verdana, sans-serif"> A column in ... center of the page. </font> </td> <td width="190" valign="top"> <font color="orange" face="verdana, sans-serif"> A column on ... right of the page.</font> </td></tr></table> </body></html>
Mise en Page avec CSS
Remarquez que le code n’est pas trop encombré parce que j’ai enlevé les instructions relatives à l’aspect visuel :
<html><head><title>CSS layout</title>
<style type="text/css">
@import url("threecolcss.css");
</style>
</head><body>
<div id="banner">
A banner that sits at ... top of the page.
</div>
<div id="rightcontent">
A column on ... right of the page.
</div>
<div id="leftcontent">
A column on ... left of the page.
</div>
<div id="centercontent">
A column in ... center of the page.
</div>
</body></html>
Bien sûr vous avez remarqué l’élément de style au début du code qui fait référence à une feuille de style pour l’exemple: @import url(”threecolcss.css”);. Les classes de styles dans le document externe sont les suivantes :
Le Code CSS
body {
font-family: verdana, sans-serif;
background:white;
}
#leftcontent {
color:green;
position: absolute;
left:10px;
width:190px;
}
#centercontent {
color:blue;
margin-left: 190px;
margin-right:190px;
}
#rightcontent {
color:orange;
position: absolute;
right:10px;
width:190px;
}
#banner {
color:red;
}
Si vous n’utilisez pas Internet Explorer 5+, Opéra 5+, ou un navigateur basé sur Mozilla, tel que Netscape 6+, alors ces deux pages (mise en page par tables et CSS) s’affichent probablement de façon différentes.
En fait, alors que les pages utilisant des tables apparaîtront presque identiques sur tous les navigateurs depuis Netscape 1.1, seuls les navigateurs les plus récents (tels que ceux listés dans ce paragraphe) afficheront correctement les pages CSS.
D’après les statistiques récentes d’utilisation de navigateurs, les navigateurs récents représentent environ 75% des navigateurs utilisés.
Mais ne vous y trompez pas: les pages utilisant CSS N’auront PAS le même aspect sur les nouveaux et les anciens navigateurs.
Depuis la 5ème génération de navigateurs (incluant IE5/Mac, Netscape 6 sur toutes les plate-formes et Opéra 5) le support de CSS pour la mise en page a atteint un niveau acceptable.
Une mise en page CSS identique est possible avec ce groupe de navigateurs.
De plus anciens navigateurs, tel que le très tenace Netscape 4, ainsi que IE 4 pourtant en avance sur son temps, pêchent par leur manque de support des recommendations CSS1 disponibles depuis 1996.
Par conséquent, l’utilisation de CSS n’est pas possible avec ces navigateurs à l’exception de mise en page au pixel telle que celle utilisée pour les jeux.
Mais ne désespérez pas. Comme vous le verrez, les pages CSS sont flexibles, et CSS créera une page utilisable pour tous les navigateurs.
Les CSS ne seront utilisées que par les navigateurs qui les supportent, mais les plus vieux navigateurs pourront quand même afficher le contenu de la page.
D’un côté, vous perdez le contrôle absolu sur le rendu de la page pour tous les navigateurs, mais vous gagnez une meilleure accessibilité et des documents plus utiles.
Mais vu qu’environ 25% des visiteurs de votre site ne pourront pas voir votre mise en page (mais tous pourront voir le contenu), la question qui se pose est “Pourquoi utiliser les CSS pour la mise en page?”
Pourquoi Utiliser les CSS pour la Mise en Page
J’ai déjà mentionné quelques points négatifs et positifs de l’utilisation des CSS.
Voyons de plus près les avantages et inconvénients.
Par la suite, je pense que vous serez d’accord avec moi pour dire que les avantages l’emportent largement sur les inconvénients.
Avantages de la Mise en Page par CSS
Les CSS vous permettent de séparer la structure et la présentation du document.
Cette séparation (souvent incorrectement présentée comme la séparation du style et du contenu) est un principe qui gouverne (ou devrait) tous les languages à balises tels que HTML.
HTML organise le contenu d’un document pour que le lien conceptuel entre différentes portions du document soit clair.
Le langage à balises NE doit PAS définir l’affichage du document, bien qu’affichage et structure sont souvent étroitement liés.
En tant que développeurs web nous avons été entraînés à considérer une balise <h1> comme une façon de mettre du texte en gras et large, pas comme un marqueur de début de section.
L’introduction de balises physiques telles que <b>, <i>, <font> et l’abominable <blink>, qui spécifient des attributs d’affichage des éléments du document et non pas des attributs structurels, n’ont fait que rendre les choses plus confuses pour les développeurs.
Et cette confusion est renforcée par le comportement des navigateurs qui appliquent les styles pour les têtes de sections et les font effectivement apparaître en gras et large.
Mais il est incorrect de penser que c’est la balise qui spécifie le style; en fait, le navigateur décide comment afficher la tête de section d’après la logique interne que lui ont donnée ses programmeurs.
S’ils avaient voulu, ils auraient pu spécifier d’afficher les têtes de sections en italique, ou en souligné.
Et c’est là qu’arrive CSS. CSS vous permet de remplacer la logique du navigateur pour afficher n’importe quel élément ou groupe d’éléments de page.
Les avantages de la séparation entre structure et présentation sont les suivants:
- Des Pages Web avec une Signification Sémantique:
Vous avez peut-être entendu parler d’un internet sémantique auparavant; c’est une vision du futur internet où les millions et millions de documents disponibles sont correctement structurés, avec des balises qui décrivent parfaitement leur contenu.
Dans un tel monde, les documents deviennent bien plus accessibles et intelligibles pour les ordinateurs, ce qui leur permettrait de mieux nous servir.
Par exemple, les moteurs de recherche fonctionneraient plus efficacement, puisque la création d’index pourrait profiter des balises des documents pour organiser les résultats.
Un aspect plus intéressant inclu les bots qui pourraient explorer les contrées perdues du net pour trouver le meilleur prix d’un article ou la toute dernière entrevue avec Britney Spears.
Si une balise de document décrit le contenu, les ordinateurs pourront mieux analyser ce contenu. - Facilité de modification: Une fois que nous avons supprimé les instructions de mise en page de nos documents, leur modification devient plus simple.
Au lieu de copier/coller le contenu de tables, nous écrivons simplement une nouvelle feuille de style que nous appliquons à notre document.
On peut donner un nouveau look à un site complet en quelques secondes.
Plusieurs sites profitent de ce bénéfice offert par CSS, permettant au visiteur du site de choisir le “thème” de leur site et d’appliquer différents styles au vol. - Transparence de Code: Certaines personnes pensent que pour être indépendant du navigateur, compatible avec les anciennes versions, il est nécessaire d’utiliser les tables.
Bien sûr ceci montre un manque d’appréciation de HTML qui comme je l’ai dit a pour but de décrire la structure de l’information du document.
Le code le plus compatible (ascendant et descendant) est celui qui ne comporte pas de mauvais HTML, tel que les balises physiques et les tables utilisées pour la mise en page.
Ces balises sont des obstacles qui empêchent des dispositifs moins sophistiqués, tels que des navigateurs en mode texte ou des navigateurs pour téléphone, d’obtenir ce qu’ils veulent: l’information.
Oui, en évitant la mise en page par tables, et en supprimant toutes balises physiques de votre code HTML, votre page ne sera peut-être pas bien analysée par Netscape 4, mais son contenu sera totalement accessible. Créez votre page avec des tables et votre site sera plus présentable avec Netscape 4, mais vous interférerez également avec des navigateurs moins sophistiqués qui ne pourront pas accéder au contenu. Dans tous les cas, je choisis une accessibilité totale. Dans quelques cas, bien sûr, le design doit prendre le dessus. Certains contenus sont uniquement à destination d’utilisateurs de Netscape 4+, et vous pouvez justifier l’utilisation de tables dans la mise en page dans ce cas. Dans d’autres situations, cela vaut le coût d’investir du temps et de l’argent pour créer des solutions orientées serveur qui délivreront votre contenu aux dispositifs de moindre sophistication. De cette façon vous pouvez envoyer des pages basées sur les tables pour les navigateurs de version supérieure à 4, et envoyer des pages épurées aux balises simples pour les dispositifs plus vieux ou moins sophistiqués. Mais la plupart d’entre nous ne veulent maintenir qu’un simple document, pas un serveur d’application. Des balises structurelles valides et CSS nous permettent d’avoir un seul document qui fonctionnera avec tous les dispositifs internet, et qui affichera des pages complexes pour tous les navigateurs de version 5 et supérieure.
Les inconvénients de la mise en page par CSS
Pour complètement comprendre la mise en page par CSS, vous ne devez pas seulement connaître ses avantages, vous devez également connaître les problèmes qu’elle présente. La plupart de ces problèmes sont dues à l’immaturité du support de CSS. Bien que la recommendation existe depuis quelques temps, la mise en page par CSS n’est qu’une possibilité récente, et ce n’est encore que plus récemment que les développeurs se sont mis à la considérer sérieusement. Attendez vous à ce que cette immaturité entraîne les problèmes suivants :
- Limitations dans la mise en page: Le fait est que les CSS ne vous permettront pas de faire tout ce que vous pourriez faire avec les tables.
Cela peut être frustrant, et de nombreuses personnes ont abandonné l’exploration des possiblités de CSS à cause de cela
(je vous montrerai dans cette article que les CSS peuvent en faire déjà pas mal). - Quelques différences d’affichage entre navigateurs: L’implémentation de CSS est difficile pour les créateurs de navigateurs, et les recommendations W3C peuvent être vagues et confuses.
Vous devez vous attendre à ce que même les navigateurs les plus récents aient un comportement différent en traitant certains aspects de CSS.
Si votre page est suffisamment simple, il y a des chances que vous obteniez des affichages pratiquement identiques pour Opéra 5+, Netscape 6+ et IE5+.
Mais au fur et à mesure que la page augmente en complexité, la différence entre les navigateurs augmentera également. - Difficulté de passer des tables à CSS: Pour les designeurs et développeurs habitués à manipuler les tables, l’utilisation de CSS pour la mise en page peut être difficile.
Il existe une “mentalité table” que nous développeurs avons acquise durant ces années, et nous sommes pour la plupart inconscients de son existence.
Certains se sentent offensés quand on en parle, se plaignant que les CSS sont difficiles et non intuitives.
Mais si vous avez l’habitude de conduire une voiture avec un volant et que l’on vous demande de conduire sur l’autoroute avec une voiture se dirigeant avec des pédales, vous ne vous sentiriez pas offensés si l’on vous disait que vous avez une “mentalité volant”.
Le fait est que nous sommes plus à l’aise avec les tables.
Les CSS sont différentes, mais nous ne devons pas confondre différence et complexité accrue.
Considérant tous ces problèmes, pourquoi utiliserions-nous CSS ? Vous devez prendre cette décision seul. De nombreuses personnes autour de moi utilisent CSS pour leurs projets personnels, mais reviennent aux tables quand ils travaillent sur des projets commerciaux. Le jour arrivera quand les CSS seront appropriées et préférées pour tous les sites, mais nombreux sont ceux disant que ce jour n’est pas encore arrivé.
J’utilise CSS parce que je crois au principe fondamental de la séparation de la structure et de la présentation et que je suis prêt à accepter les problèmes relatifs aux CSS, tout en attendant le jour où les CSS seront aussi robustes et simples à implémenter que les tables le sont aujourd’hui.
Ce jour viendra, et internet en sera amélioré.
Exemple: Recoder la Page Principale du Site Développeur
Pour rendre les choses intéressantes, j’ai pris la page principale du site Apple pour développeurs, qui utilise les tables, et je l’ai recodée en utilisant les CSS.
J’ai une copie de la page telle qu’elle était quand j’ai débuté cet article, où j’ai mis en évidence toutes les bordures de table pour que vous puissiez voir sur quoi nous travaillons: la page principale du site Apple pour développeurs avec bordures de tables affichées.
Si vous avez IE5+ ou NS6+, vous devriez voir le même rendu ici: la page principale du site Apple pour développeurs avec CSS uniquement.
Les utilisateurs d’Opéra 5+ devraient voir une page semblable, mais avec quelques défauts d’affichage.
Maintenant que je vous ai montré le fruit de mon travail, regardez de façon plus attentive les techniques utilisées.
Commencez par le haut de la page, là où se trouve une image de 600px de large d’une barre centrée dans la fenêtre du navigateur.
L’utilisation d’une table se ferait un peu comme cela :
<center>
<table width="600"> ... </table>
</center>Le code complet se trouve dans le fichier top_nav_table.html
Avec CSS, j’obtiens le même résultat en utilisant DIV plutôt qu’un élément table, et en initialisant l’attribut margin de DIV à la valeur auto ainsi:
<style type="text/css">
#top_nav {
margin:auto;
width:600px;
}
</style>
<div id="top_nav"> ... </div>Malheureusement, c’est là que je rencontre la première divergence au niveau des navigateurs. IE5.x n’implémente pas correctement le mot-clé auto, et donc la DIV n’est pas centrée dans le navigateur. Heureusement, il est possible de contourner le problème : en initialisant l’attribut text-align de l’élément parent de la DIV (dans ce cas, l’élément body), à center, je m’assure que IE5.x centrera la DIV :
body {
text-align:center;
}Ceux parmi vous familiers avec CSS savent que c’est une mauvaise implémentation de l’attribut text-align.
Mais dans ce cas, il fournit un bon moyen de contourner le problème.
Maintenant, regardez toutes les règles de style utilisées pour créer la bar de navigation du haut, avec CSS (le code complet est dans le fichier top_nav_css.html) :
#top_nav {
margin:auto;
width:600px;
height:32px;
text-align:left;
}J’ai déjà évoqué les attributs margin et width de la règle #top_nav, l’attribut height s’explique de lui-même. L’attribut text-align:left est nécessaire parce que text-align:center sur la règle de style de body sera hérité s’il n’est pas précisé. En fait, vous pensez que ces deux derniers attributs ne seraient pas nécessaires pour la DIV, mais les enlever fait que IE5 Mac affiche la DIV de façon incorrecte. Mieux vaut les laisser.
#top_nav a {
display:block;
float:left;
}Cette règle fait que tous les liens de la DIV top_nav sont traités comme des blocs d’éléments plutôt que d’utiliser la valeur par défaut d’affichage en ligne pour chaque élément anchor. Vous pouvez maintenant faire “flotter” (float) chacun de ces éléments sur la gauche (left), ce qui est essentiellement la même chose que d’utiliser l’attribut align de l’élément bloc ou d’une IMG. Ceci ne devrait normalement pas être nécessaire, mais notez qu’une partie de la barre de navigation n’est pas une image: c’est une forme. Une fois que j’ai fait “flotter” toutes les images sur la gauche, ce qui les alignent toutes horizontalement l’une à côté de l’autre, j’insère une forme dans cette série d’images (un forme avec un id “MidSearch”), et je lui applique le style suivant :
#MidSearch {
float:left;
margin:0px;
background-image:url("img/navbg.gif");
height:32px;
}Vous avez remarqué que j’utilise une image de fond pour la forme, qui place une image derrière l’élément texte de la forme et qui le fait se fondre avec élégance dans les images de la barre de navigation. La règle suivante définit l’affichage de l’élément de la zone de saisie de la forme :
#MidSearch input {
width:100px;
height:18px;
margin-top:4px;
}Et voilà. J’ai remplacé une double imbrication de tables avec une simple série de liens entourant des images et une forme simple. Toute l’information de mise en page a été placée dans la feuille de style. Si vous ne l’avez pas encore fait, il est maintenant temps de comparer les codes : tables contre CSS.
Ensuite, regardez la section supérieure du milieu de la page, qui démarre sous la barre de navigation et finit à la première barre horizontale :
Je ne parlerai pas du code de cette section parce qu’il utilise les mêmes techniques que la barre de navigation du haut.
Sous la barre grise, vous trouverez le contenu de la page, une section à deux colonnes avec de nombreux liens vers des articles sur le site ou sur des ressources externes.
La mise en page de cette section sur deux colonnes est crée par trois DIVs appelées main, left et right. J’ai donné aux DIVs un nom qui rappelle leur position, ce qui devrait vous aider à faire correspondre les éléments HTML avec la règle de style qui les gouverne. Pour un projet réel, je vous conseille de donner à vos DIVs un nom qui rappelle leur contenu, pas leur position dans la page. Le code ressemble à :
<div id="main">
<div id="left">
<img src="img/intro_descript.gif"
width="200" height="99" alt="..." name="Desc" id="Desc">
<div class="bodytitle">Related Links</div>
...
</div>
</div>
<div id="right">
<span class="bodytitle">Web Development & Mac OS X</span>
...
</div>
</div>Comme vous pouvez le voir, la DIV main contient
deux enfants, left et right.
Leur style ressemble à :
#main {
margin:auto;
width:600px;
text-align:left;
}
#left {
float:left;
width:240px;
background-image:url("img/bar_back.jpg");
background-repeat:repeat-y;
}
#right {
width:330px;
margin-left:260px;
}Le style de la DIV main est proche de celui des DIVs de la section précédente, qui définissent ensemble une DIV de 600px de large centrée au milieu de la page. Les DIVs enfants de main sont deux colonnes ; left a un attribut float: right, ce qui permet à right d’être sur le côté droit, et les deux DIVs ont leur largeur initialisée de telle façon qu’elles s’adaptent à la DIV main. right a un attribut margin-left initialisé à 260px pour s’assurer qu’il occupe le bon espace à l’intérieur de main.
Pour obtenir la barre verticale grise le long du côté gauche de la page, on spécifie une image pour la DIV left, et l’attribut background-repeat est positionné à repeat-y, ce qui fera en sorte que l’image de fond se répète verticalement seulement. Et voilà.
Dans chacune des deux colonnes, il y a différentes techniques CSS utilisées pour créer listes, cadres et paragraphes. Je vais en décrire quelques unes. Par exemple, dans la DIV left toutes les DIVs enfants ont un attribut left-margin de 25px avec la règle :
#left div {
margin-left:25px;
}Puisque tout le contenu dans left div est contenu à l’intérieur de DIVs enfants, tout le contenu hérite d’une marge à gauche de 25px, fournissant de l’espace pour la barre verticale grise.
Pour créer le cadre d’hyperliens (photo ci-dessus), j’ai imbriqué
un paragraphe à l’intérieur d’une DIV comme ça:
<div id="links_div">
<p id="links_para" class="portallink">
<a href="...">CSS Compatibility Chart</a><br>
<a href="...">Apple's Business Case</a><br>
<a href="...">WebObjects</a><br>
<a href="...">QuickTime</a><br>
<a href="...">QuickTime Tutorials</a><br>
<a href="...">AirPort</a><br>
<a href="...">Apple.com</a><br>
<a href="...">The Apple Store</a>
</p>
</div>J’ai appliqué les styles suivants sur ces éléments :
#left #links_div {
background-image:url("img/chains.gif");
width:201px;
height:191px;
margin-bottom:15px;
margin-top:-5px;
}
#left #links_div #links_para {
padding:46px 10px 0px 40px;
margin:0px;
}La bordure et les chaînes appartiennent l’image de fond de links_div, et les attributs height et width de la DIV sont initialisés à la dimension exacte de l’image de fond.
Vous remarquerez que l’attribut top-margin de la DIV est une valeur négative, qui rapproche un peu les “Related Links” des liens de la DIV.
L’élément de paragraphe imbriqué est ensuite placé avec précision dans la DIV par les valeurs de ses attributs border et margin.
Vous noterez que mes sélecteurs, ce qui dans la règle de style définit les éléments de la page sur lesquels s’applique la règle, sont assez verbeux.
Au lieu d’un sélecteur nommé simplement “#links_div”, j’utilise “#left #links_div”.
Cette appellation spécifie que “#links_div” est un descendant, ou est contenu à l’intérieur de, “#left”.
Cette façon de faire est une aide visuelle quand je regarde rapidement mes feuilles de styles puisque cela me donne des informations sur les parties de ma page sur laquelle la règle de style s’applique.
La dernière section de la page que je vais décrire est le cadre en haut de la colonne de droite:
Voici le code :
<div id="top_box">
<a id="top_box_image" href="http://developer.apple.com/macosx">
<img src="img/macosxbox.jpg" height="119"
width="100" alt="Mac OS X Box" border="0">
</a>
<div id="list_div">
<ul id="top_box_list">
<li><a href="...">Introduction</a>
<li><a href="...">Information Architecture</a>
<li><a href="...">Security Introduction</a>
<li><a href="...">Perl on Mac OS X</a>
<li><a href="...">PHP on Mac OS X</a>
<li><a href="...">Security: Mac OS X and UNIX</a>
<li><a href="...">Using mod_ssl</a>
<li><a href="...">Open Source Databases</a>
<li><a href="...">Java and Tomcat, Part I</a>
</ul>
</div>
<p class="bodytext">
<span class="bodytitle">Java and Tomcat</span><br>
With the introduction of the Unix-based Mac OS X, server-side Java...
</p>
</div>Le bord gris du cadre est créé avec l’attribut border de la DIV qui contient le reste du contenu :
#right #top_box {
border:1px solid gray;
padding:0px 12px 12px 12px;
}J’ai utilisé la propriété padding de la DIV pour donner au contenu de la DIV la quantité suffisante d’espace blanc autour, mais vous remarquerez que je n’ai pas donné de valeur à la propriété width de la DIV.
En général, initialiser les attributs width et soit padding ou margins d’un élément de cadre produira différents résultats sur différents navigateurs.
Cela à cause d’une mauvaise implémentation du modèle de cadre dans IE 5.x pour PC, qui est la cause de bien des problèmes rencontrés par les développeurs qui s’exercent pour la première fois à la mise en page par CSS.
On a largement débattu de ce problème sur le net, et il existe plusieurs solutions.
Dans cet exemple, j’ai résolu le problème en spécifiant padding mais en omettant width pour la DIV.
Le comportement par défaut d’une DIV sans attribut width est de simplement utiliser tout la largeur de son élément parent.
Puisque j’ai spécifié un attribut width (mais pas de padding ou margins) pour la DIV parente (la DIV avec id “right”), j’ai un résultat identique sur tous les navigateurs en version 5x, même sur la version boguée d’IE 5.x pour PC.
Ce sujet et d’autres problèmes communs à CSS sont discutés en détails ici.
Maintenant, à l’intérieur de la DIV, nous avons une image située à gauche d’une liste de points, suivi par un peu de texte qui occupe toute la largeur de la DIV. La mise en page du texte ne nécessite aucune CSS supplémentaire, mais l’image et la liste utilisent les règles de style suivantes :
#right #top_box #top_box_image {
display:block;
float:left;
margin:40px 40px 0px 0px;
}
#right #top_box #list_div {
margin-bottom:10px;
float:left;
}
#right #top_box #list_div #top_box_list {
margin:0px;
padding:0px;
padding-top:10px;
}La CSS ci-dessus utilise l’attribut float pour créer un effet de deux colonnes de la même façon que pour les deux colonnes du contenu principal de la page.
Cependant, avant d’utiliser l’attribut float, j’ai du faire de img un élément bloc en utilisant l’attribut display ainsi: display:block.
J’ai également placé l’élément ul dans une DIV pour éviter les différences d’implémentation entre navigateur d’un élément ul flottant.
Puis j’ajoute float:left sur l’img ET sur l’élément DIV (techniquement, je ne devrais avoir à le faire que sur img, mais je le fais sur les deux pour être sûr que tous les navigateurs alignent notre img et DIV l’une à côté de l’autre comme souhaité).
Pour obtenir les belles images aqua des points de la liste, j’utilise l’attribut list-style-image ainsi:
#right #top_box #list_div #top_box_list li {
list-style-image:url("img/aquadot.jpg");
}Ceci a pour effet de remplacer les élements par défaut du navigateur avec une image de notre choix.
IE/PC pourrait ne pas les afficher correctement, à cause de la maniére dont il gère les marges autour de l’élément ul; mais le contenu n’en souffre pas, et l’impact sur la mise en page est minimum, limité à l’absence des images.
Conclusion et Liens
Vous êtes maintenant prêts à utiliser les CSS plutôt que les tables pour la mise en page de vos pages web. Après avoir testé les techniques discutées dans cet article, vous verrez que la mise en page par CSS s’apprend, et qu’avec l’expérience la tâche devient facile. Si vous voulez aller plus loin, regardez ces articles :
- Box
Lessons d’Owen Briggs. - CSS/edge d’Eric Meyer.
- Notes de Jeffrey Zeldman : CSS in the real world lecture notes.
- Mes propres CSS Layout Techniques.
Textes originaux en anglais sur O’Reilly : Introduction à la mise en page par CSS par Eric Costello
Chargement
Commentaires récents