Bonne pratique

Bonjour à tous,
je souhaiterais faire un cadre arrondi dans lequel j'intègre des logos.

Habituellement je procède comme ca :
Je fait un conteneur et à l'intérieur je met 3 div:

dans le 1er je met une image avec la barre verticale arrondie de gauche
dans le 2ème je met un background avec les tirets en haut et en bas
dans le 3eme je met une image avec la barre verticale arrondie de droite

Ca marche mais j'ai l'impression que ce n'est pas super propre, avec du code en trop.
Existe t-il une référence de bonne pratique pour ce type de cadre aux coins arrondis ?

Salut ,

y a la propriété border-radius qui est sorti en Css 3 , mais elle n'est pas encore supporté par tous les navigateurs .. :s

hop petit lien alsa : http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html

Oui, je connais, mais je voudrais faire ca en css 2, parque a part chrome et safari, le CSS3 c'est pas ca..
sinon j'avais vu c'est maniere de proceder :
http://www.cssplay.co.uk/boxes/curves.html
original, mais que je ne trouve pas ça très clean non plus ( utilisation d'1/4 de point)

Si la technique du multi background et du css3 ne te conviennent pas, rabats toi sur la librairie JQuery, avec Jquery curvy corners

http://blue-anvil.com/jquerycurvycorners/test.html

JohnNada a écrit :
Si la technique du multi background et du css3 ne te conviennent pas, rabats toi sur la librairie JQuery, avec Jquery curvy corners

http://blue-anvil.com/jquerycurvycorners/test.html

Merci d'avoir pris le temps de répondre.
D'un point de vue professionnel le css3 ne me semble pas adapté.
Pour Jquery je préfère éviter, car je souhaite rester sur du simple css pour un maximum d'accessibilité.

Sinon j'ai solutionné mon problème, je opté pour un cadre arrondi sans images.

pour le css ca donne ça :

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#FFF; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#FFF; border:0 solid #08c; border-width:0 1px;}

et pour le code :

<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b
					 class="xb4"></b></b>

<div class="xboxcontent">	Mon Texte ici !</div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b
					 class="xb1"></b></b>
</div>

merci Alessandro Fulciniti
Modifié par Tomate (22 Jul 2010 - 12:14)