Je ralais dernierement au sujet des sites en CSS sans tableaux qui se ressemblent tous (voir "Sites plats, coins carrés" sur mon joueb). La skin Radio qui me sert de modele a des boites a coins ronds. Chacune de ces boites est construite avec un bon paquet de tables, de lignes, de cases et pas moins que 8 images. CSS3 nous offrira des belles boites aux coins ronds, sans images ni balises superflues, avec une nouvelle propriete border-radius, mais CSS3 n'en est encore qu'au stade de la discussion. Je veux des coins ronds maintenant !
Mozilla supporte une propriete non-officielle : -moz-border-radius, mais c'est proprietaire et ce n'est pas des CSS. En plus je n'utilise pas Mozilla quotidiennement. J'ai essaye par curiosite, cela a la merite de marcher (bien que j'aurais prefere que les coins ronds soient anti-aliases).
Ce site propose quelques autres methodes pour faire des boites aux coins ronds. Certaines utilisent jusqu'a 8 <div> emboites, d'autres melangent images de fond et images normales. Ce n'est pas tres elegant (pas vraiment plus que les tables equivalentes), mais il faut faire avec ce qui est disponible.
Ma methode est relativement simple : seulement 2 <div> et 3 images : une pour les coins du haut, une autre pour la bordure du milieu, et la derniere pour les coins du bas. Cela marche seulement lorsqu'on connait a l'avance la largeur de la boite, mais justement, je souhaite que toutes les boites aient la meme largeur, donc cela ne me pose pas de problemes. Voici le code que j'utilise :
.rightColumnBox {
margin-right:70px;
margin-bottom:20px;
background-color:#ffcc33;
background-image:url("round_corner_middle.gif");
background-repeat:repeat-y;
}
.cornerContent {
padding:10px;
margin:0px;
}
[..]
<div class="rightColumnBox">
<img style="display:block" src="round_corner_top.gif" alt="" />
<div class="cornerContent">
Une boite a coins ronds !
</div>
<img style="display:block" src="round_corner_bottom.gif" alt="" />
</div>
Et voila !
La page Espresso est maintenant en tres grande partie mise en page. Les autres styles que j'ai utilise dans la skin finale ne presentent pas de difficultes particulieres, ils definissent simplement les polices de caractere, l'espacement etc. Cette 5eme etape est donc la derniere etape de la construction des styles de la skin Espresso. Dans un autre article, j'expliquerai comment transformer une page telle que celle-ci en skin pour Niutopia.
J'espere que vous avez trouve ces pages de construction interessantes. N'hesitez pas a m'ecrire pour me livrer vos commentaires, precisions etc. Je les publierai a la suite de ces pages.
De meme, si vous souhaitez plus d'explications sur un point precis, dites le moi et j'essaierai de repondre si mes connaissances le permettent (et sinon, on essaiera de trouver quelqu'un qui connait la reponse). Il est tard, signalez moi aussi les fautes d'orthographe. :-)
Stephane Gigandet, "Biz", biz@joueb.com
C'est fini : Retour au sommaire de l'article.
Cette page est toujours valide XHTML1.1 !