Faire un cadre en css ? comment ?

Bonjour,

J'essaye de faire un cadre totalement dynamique en css avec ceci :




En hauteur et en largeur, des idées ? sachant que les bords sont arrondis aussi

Merci de vos réponses et de votre aide, çà me turlupine cette histoire, j'ai essayé de voir dans le tutoriel pour les cadres avec bords arrondies, mais bon, ce n'est pas exactement ça

Salut,

Tu veux un cadre dont les bords eux aussi (et pas seulement les coins) correspondent à des images ?
Si tu penses à un cadre avec des bords dégradés comme sur l'image fournie, il va te falloir rajouter des éléments de structure pour supporter les images des bords. Il te faut (comme pour les coins) des blocs contenant l'image qui t'intéresse. Ici pour chaque bord, une image de quelques px de côté, contenant le dégradé souhaité suffira. Il te faudra alors la positionner et préciser ses dimensions pour qu'elle donne l'illusion d'être le cadre de ton bloc principal.

Le principe est exactement le même que pour les coins. Disons simplement que chacun de tes bords est un coin supplémentaire.

NB : Oui je sais il faut avoir fait des maths pour imaginer un rectangle à 8 coins

Euh oui, j'ai meme déjà les 8 "coins" découpés, mais je ne sais pas comment faire pour les mettre en place

Faut vraiment un truc étirable de partout

http://www.alistapart.com/articles/cssdropshadows/

Bonne nuit

Julien L, c'est pas tout à fait ce dont j'ai besoin je crois, moi j'ai besoin d'utiliser mon image afin d'en faire un cadre étirable hauteur/largeur, sur la page citée, le mec il parle de faire des ombres

Sorry, j'avais pas vu.

Dans ce cas, il te faut un grand nombre d'imbrication de calques pour gérer cela.

Le haut gauche,
Le haut droit
Le bas gauche
Le bas droit
+
Coté gauche
Coté droit
Coté haut
Côté bas

Soit, 8 calques imbriqués et beaucoup de lourdeur

Mais tu n'as pas le choix, ou alors revois ta charte graphique car il n'y a pas d'aute choix si en plus tout est élastique.

Pour Webrankinfo par exemple, et ma colonne du milieu, j'en ai mis 5 : http://forum.alsacreations.com/wri/julienl-jerome/index.htm

Bonne soirée

Ne vaut t'il donc pas mieux oublier ça ? faire 8 div c'est un peu du suicide!

Merci de tes réponses, la page que tu m'as filé pour les ombres je vais m'en servir pour d'autres trucs

Bonjour et bienvenu,

Johan a écrit :
Merci de vos réponses et de votre aide, çà me turlupine cette histoire, j'ai essayé de voir dans le tutoriel pour les cadres avec bords arrondies, mais bon, ce n'est pas exactement ça

C'est de ce tutoriel-là dont tu parles?
http://www.alsacreations.com/articles/cadre/ (2ème cas, totalement fluide)

Qu'est-ce qui ne convient pas?

EDIT: ah oui, y a 4 coins mais pas de bords. C'est pour le haut et le bas que c'est plus difficile je suppose?
Modifié par Felipe (10 Apr 2005 - 05:35)

Oui ...

1) Tenir compte des dimensions des bordures (largeur pour les côtés, hauteur pour haut et bas)
2) Rajouter ces dimensions à celle de la boîte en en faisant du padding
3) Positionner les div contenant les images en question en absolute à 0 (ce qui la met donc dans le padding, juste au bord), et lui donner les bonnes dimensions (ex. : width : 10px, height : 100%)
4) mettre l'image souhaitée en background du div en question, avec un repeat dans la bonne direction

Concernant le lien que tu donnes [Ben], oui ... mais non
En fait ces techniques à base de caractère ajoutés n'ont pas lieu d'être, un lecteur d'écran lira chacun des 4 "bullet" alors qu'ils ne veulent rien dire.

Une autre méthode (non fonctionnelle sous IE, mais à toi de voir tes priorités), utiliser :after et :before


Avec des divs mais avec moins de 8 divs :
http://www.svay.com/coins_arrondis/coins_arrondis.html
Modifié par Olivier (12 Apr 2005 - 12:22)