Discussion :

[enrico83600]

Bonjour,

je ne sais pas si c'est ici le bon endroit ou si cela doit se faire via du CSS.

J'ai un site avec des pages html, avec une feuille de style css.

Je souhaite avoir une zone d'ombre autour de mes pages.
Cependant je ne sais vraiment pas comment m'y prendre. J'ai pas mal regardé sur le net, mais je n'ai rien trouvé de concluant : 40 000 methodes différentes proposées, sans qu'aucune d'elles ne fontionne vraiment d'apres les utilisateurs.

Pour info, je peux utiliser dreamweaver CS3 (si ca peut faciliter la manip) .

Merci d'avance

[Erwan31]

Bonsoir,
si c'est un design fixe (la largeur du conteneur à largeur fixe).
Il faut créer une image de background CSS répétée sur l'axe des Y de 1px de hauteur et qui comprend la marge gauche et droite.
Et comme le background CSS multiple n'est pas encore suffisamment implémenté, tu dois créer une image en backgrd CSS pour le bas de l'interface qui comprend toute l'ombre portée ou une image répété sur laxe des X.

[enrico83600]

A l'otigine je voulais faire du variable, mais vu que le fixe ca a l'air deja un peu chiant, je vais config mes pages pour qu'elles soient fixes :p

Tu peux un peu developer pour la cration du background css avec l'image ?

[HiRoN]

Bonsoir,

Tu peux un peu développer pour la création du background css avec l'image ?

Exemple simple (pour un bloc de 200px de large) :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="haut"></div>
<div id="milieu">Ton contenu</div>
<div id="bas"></div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#haut { width:200px; height:20px; background:url(haut.gif) no-repeat; }
#milieu { width:200px; background:url(milieu.gif) repeat-y; }
#bas { width:200px; height:20px; background:url(bas.gif) no-repeat; }

Le div #milieu se répétant donc en hauteur (image de 1px en repeat-y) en fonction du contenu (le CSS pouvant être optimisé)...

Edit : Salut Erwan31

[Erwan31]

Ben c'est pas compliqué, tu prends ta maquette graphique et tu découpe une zone qui correspond à la largeur de ton bloc conteneur + la largeur des ombres portées X 1px de haut.
C'est quoi que tu comprends pas?

EDIT Merci Hiron