Cadre (d'images) en css s'adaptant à la taille de son contenu ?

Bonjour tout le monde,

J'essaie depuis un bon moment de créer un cadre (constitué d'images) autour d'une div ou d'une images et qui s'adapterait à la taille de cette dernière. En Html cela est réalisable facilement avec une table à 9 cellules toute simple (8 images : les 4 bords du cadre, et ses 4 angles), par contre je bloque sur la réalisation d'un effet similaire en CSS (et c'est pas faute d'avoir essayé et cherché un peut partout ... j'ai bien trouvé cet article http://www.ljouanneau.com/standards/css/cadre/ qui se rapproche pas mal de ce que je voudrais faire, mais cela ne marche que pour la hauteur du contenu et pas sa largeur ).

L'idée serais à l'aide de classes de pouvoir "encadrer" plusieurs images de tailles différentes sans avoir à stipuler à chaque fois leur largeur et leur hauteur.


voila, est ce que quelqu'un aurait une solution ? (ou saurait me dire si cela est réalisable avec du css ? )


merci,
en espérant ne pas avoir posté au mauvais endroit du forum

Modifié par reghyz (12 Mar 2008 - 04:23)

Salut reghyz et bienvenue ,

Tu pourrais regarder là : boîte avec bordures en HTML et CSS et là : Page fluide avec bordures.

A+

Hop,

J'indiquerais plutôt la page suivante qui tente de faire le tour de la question:
http://web.covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html

merci pour ces liens , je regarde tout ça dés que j'ai le temps.
je poserai un exemple si j'arrive à quelque chose...

Bon, après plusieurs test infructueux je pense que je vais lâcher l'affaire et repasser aux bonnes vielles tables...

Les différentes solutions css que j'ai testé sont malheureusement toujours limitées par certaines contraintes (largeur ou hauteur fixe, pas d'images pour les bordures) qui m'empêchent d'obtenir le résultat attendus .

L'exemple Un essai n'exploitant pas ces contraintes sur le dernier lien ( http://web.covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html#hop ) avais l'air prometteur, mais je viens de me rendre compte que le code donné en exemple sur la page et le code de la boite affichée en dessous sont différents, cette dernière ayant une largeur fixe définie dans le html ! : <div class="boite2" style="width: 30em;"> ( ce qui est à l'opposé de ce qu'elle est censée illustrer !!! )


merci quand même,
mais si quelqu'un à une solution je reste preneur ...