Cadre coins arrondis fluide

Bonjour,

après avoir lu et tenté d'appliquer différentes méthodes trouvées ici ou là sur le web pour faire des cadres dont les coins sont arrondis, j ai rencontré un souci pour faire un cadre dont la couleur n'est pas unie.

En effet, le but est que ce cadre ait graphiquement un haut et bas de cadre de style différent du contenu, donc le souci a été de pouvoir mixer le besoin des coins arrondis avec une étirabilité (si ça existe) de l'image complémentaire entre les deux coins.
Faut que ça ressemble à cà: ici

Bref après divers essais, j'en suis arrivé au code suivant, que je ne crois pas avoir déjà vu (mais c est fort possible que je me trompe), et je voulais simplement avoir des avis de votre part quant à la propreté, l'accessibilité ou les potentiels inconvénients/avantages de mon résultat.

pour la partie HTML: 

<div id="cadre">
   <div id="haut_cadre">
      <img src="..." width="30" height="30" border="0" alt="">
      <img class="coins_droit" src="..." width="30" height="30" border="0" alt="">
   </div>
   <div id="milieu_cadre">
      contenu du cadre: 
      bla bla bla
   </div>
   <div id="bas_cadre">
      <img src="..." width="30" height="30" border="0" alt="">
      <img class="coins_droit" src="..." width="30" height="30" border="0" alt="">            
    </div>
</div>

pour la partie CSS: 

/* Structure des div */ 
#cadre {width:100% ; height:valeur ; }
#haut_cadre {background: url('...') repeat-x; height: 30px; }
#milieu_cadre {soit un fond qui se repete en y, soit une couleur de fond avec bordure peu importe }
#bas_cadre {background: url('...') repeat-x; height: 30px; }

/* Positionnement des images pour les coins*/
#haut_cadre img {width: 30px; height: 30px; position: absolute; display: block; border: none; }
#bas_centre img {width: 30px; height: 30px; position: absolute; display: block; border: none; }
.coins_droit {right: 0; }

Voila, j'espère que j'aurais été clair, j'ai choisi ça pour l'instant comme code pour les avantages suivants:
- cadre totalement fluide en hauteur et en largeur
- seulement 6 images très légères 1ko (4 coins + milieux haut et bas)
- moins d'imbrication de div
- fonctionne sous IE6, Firefox 1.02, Opéra 6
- la possibilité que le cadre ne soit pas de couleur unie seulement

Inconvénients:
- images purement décoratives des coins apparaissent dans le code html
- il reste une imbrication de div (est ce vraiment mal ?)

Merci de me dire ce que vous en pensez.
Modifié par abysskan (27 Apr 2005 - 02:59)

bonjour,

Tu te poses trop de question si ton code est valide est qu'il fait ce que tu veux je ne vois pas ou est le probleme.
Si tu ne veux pas que tes imùages aparraissent en tant qu'images (contenu) c'est dire qu'elle disparaissent en cas d'impression ou qu'elle ne soient pas selectionnable, tu peux tout simplement remplacer tes balises img par des div et déplacer le conttenu de ton src vers la propriété background-image de ta css.
Pour ton imbrication de Div elle ne pose aucun problème , d'ailleurs les tutoriel que tu trouvera surle web à ce sujet te le montreront.

Cordialement,
IlSandor.