La technique est très proche de celle présentée dans le topo sur la mise en place des coins arrondis sur une liste. Je vais donc reprendre le même principe d'exposition pas à pas, mais cette fois en partant du cas le plus général et qui pose le plus de problème à l'intuition.

Ce cas étant exposé vous disposerez d'un modèle qui sera toujours présent dans vos document html si ceux ci sont bien construits.

Etre bien construit revient à ceci :

Lire la suite

Test coins arrondis en design fluide.

La technique que j'ai testée consiste à obtenir des zones graphiques avec quatre coins arrondis, en design fluide en intervenant le moins possible dans le code html du document et notamment en évitant l'utilisation de balises vides. Mon propos ne porte donc pas sur la perfection graphique des images utilisées dans cet essai et pas non plus sur le fait d'avoir une feuille de style absolument optimisée par rapport au résultat à atteindre.

Le but est bien, partant du simple code html, de voir quelles potentialités celui ci nous offre pour mettre en oeuvre des propriétés de style en vue de constructions relativement complexes.

Le fragment html servant de support au premier exemple est au demeurant assez simple, une liste précédée d'un titre qui l'annonce. Ce qui suit est un exposé pas à pas.

Code html natif

<h3>Ceci est une liste</h3>
<ul>
<li>Premier item</li>
<li>Deuxième item</li>
<li>Troisième item</li>
</ul>

On voit bien que l'ensemble de ce fragment forme un tout. Sans que cela soit obligatoire on peut donc très légitimement confirmé ce point en insérant les blocs qui le compose dans un même conteneur. Ce sera un div puisque c'est à ça que sert cette balise.

Lire la suite