Nous entrons dans la partie ou je me suis dit plusieurs fois : "Ca serait si simple de faire une table avec deux colonnes, pourquoi faire autrement ?". Effectivement, je souhaite affiche le texte dans une colonne a gauche, et des boites dans une colonne a droite. Pour quelqu'un habitue a presenter les pages Web avec des tables, la solution est evidente : une table avec une seule ligne et deux colonnes. Il y a surement plein de bonnes raisons pour ne pas utiliser cette solution, mais celle qui m'a le plus convaincu, c'est qu'en utilisant des CSS, j'avais ensuite plus de possibilites d'affichage de ma colonne de texte : en changeant une seule propriete, je peux faire en sorte que le texte sorte de sa colonne et aille occuper le reste de la colonne de droite qui n'est pas occupe par les boites. Il est egalement possible de le faire avec une table (en ajoutant un "align=right" a une table qui contiendrait les boites), mais passer de l'un a l'autre demanderait bien plus de changements.
Note : j'utilise en fait cette possibilite dans la skin finale. Dans la page de sommaire, les resumes sont soigneusement affiches dans une colonne a gauche. Ils sont tous de la meme largeur, meme s'il y a de la place dans la colonne de droite. Par contre, lorsque j'affiche un article et ses commentaires, ils occupent toute la place disponible sous les boites. Entre les deux pages, il y a une seule ligne de difference.
Voici comment creer 2 colonnes sans utiliser de table :
#leftColumn {
margin-left:100px;
margin-right:350px;
}
#rightColumn {
float:right;
width:300px;
}
[..]
<div id="rightColumn">
[..]
</div>
<div id="leftColumn">
[..]
</div>
La solution est de se servir astucieusement des marges : pour placer une colonne a gauche, il suffit de lui mettre une grosse marge a droite ! J'ai eu beaucoup de mal a m'adapter a ce raisonnement si different de l'approche basee sur les tables. Mais ca marche. Ma colonne de droite est un "float", ce qui permet de la placer a droite de la colonne de gauche, tout en gardant les deux a la meme hauteur. Sans le float, ma colonne de gauche serait affichee en dessous de ma colonne de droite. Pour que cela marche, il faut cependant que la colonne de droite qui a la propriete float soit placee avant la colonne de gauche dans le fichier XHTML.
J'ai utilise un autre "truc" : comme ma colonne de droite est dans la marge de la colonne de gauche, le texte de gauche restera bien sagement a gauche et n'ira pas empieter sous le float de droite.
Pour les boites, j'utilise pour l'instant le style suivant :
.rightColumnBox {
margin-right:100px;
margin-bottom:20px;
padding:10px;
border:1px solid #000;
background-color:#ffcc33;
}
La suite : Espresso, 5ème étape - Les coins ronds