28220 sujets

CSS et mise en forme, CSS3

Bonjour,

Je souhaite créer un petit effet d'ombre (comme sur le site d'aslsacreations.fr) sur le bord de mon conteneur...
Quelqu'un peut m'aider ???

Merci d'avance


Estévan
Salut & bienvenue

Tu as besoin d'une image de fond pour cela. Est-ce que ton site possède une largeur fixe ?
Modifié par Sopo (15 Aug 2006 - 16:46)
Oui je l'ai définit dans ma feuille de style !

Je crois quelle fait 770px de largeur...

Alors si j'ai bien compris il me faut une image et je dois la coller à coté de ma bordure ?
Modifié par MiMi011 (16 Aug 2006 - 09:41)
Bonjour,
C'est une solution, je préfére pour éviter les différences d'interpretations des margins faire une image transparente sur la largeur de conteneur "allongée" de ton ombre: image de quelques pixels de haut en background et repeat y. Ne pas oublier d'augmenter le width de ton bloc initial de la largeur de ton background.
Par exemple si ton conteneur initial fait 750px de large et tu veux une ombre de 5px de large: Tu fais une image transparente sur 750px et une ombre de 5px, tu modifies le width de ton conteneur à 755 et tu y poses ton image en background en repeat y, tu auras peut être à modifier tes margins du coté de l'ombre dans ton conteneur (largeur de l'ombre) car ton bloc a "grossi"
Salut

Comme l'a dit ghost, ici il te suffit d'utiliser une image faisant la largeur souhaitée. N'oublie pas de la faire se répéter sur la hauteur.

Par contre, pour la positionner correctement dans le conteneur, ce n'est pas avec les marges que tu dois jouer, mais avec les padding.

Dans ton cas, ton conteneur ayant une largeur de 770px, il faudra faire "largeur de l'ombre à gauche" + 770px + "Largeur de l'ombre à droite". Et ajouter à ton conteneur un padding-left de la largeur de l'ombre à gauche, et un padding right de la largeur de l'ombre à droite.