Jump to content

[RESOLU] Ombres de chaque côté du contenu central (container)


Recommended Posts

Bonjour,

 

Je reviens vers vous car je cherche à positionner une ombre de chaque côté de ma class container (le contenu central).

 

Une image sera peut-être plus parlante :

45b54bc39202ef94d0aa7ff3d1fbd536f4a9425c

 

Étant sous PS1.6, je cherche une solution responsive... J'ai trouvé ce topic qui date de 4 ans : http://www.prestashop.com/forums/topic/51070-ajouter-une-ombre-au-body-en-du-background/?hl=%2Bombres&do=findComment&comment=334037, si la solution est envisageable, elle nécessite de faire plusieurs images de fond selon les résolutions pour que mon ombre s'affiche correctement.

 

J'ai déjà un pattern de fond sur mon body mais je peux appliquer mon ombre sur la classe "page".

 

Le box-shadow n'est pas applicable, on peut tricher pour n'avoir qu'une ombre à droite et à gauche mais celle-ci se voit quand même en top et bottom lorsqu'on l'applique sur la classe "container".

J'ai exclu la propriété border-image pour son manque de compatibilité. :D

Idéalement, il me faudrait border-right-image et border-left-image mais on va les oublier...

 

J'ai beau chercher, j'en reviens toujours à l'utilisation d'une image de fond de 1px répétée. Si vous avez une alternative, mes yeux sont grand ouverts. :)

Edited by facedeharicot (see edit history)
Link to comment
Share on other sites

Merci pour votre réponse. :)

 

Il y a cependant un soucis : la div "page" fait 100% de de ma surface affichée donc en appliquant l'ombre sur celle-ci, je ne vois pas ladite ombre.

J'ai volontairement mis la taille de ma page à 80% de largeur pour illustrer en changeant la couleur de l'ombre en rouge.

En fixant la largeur de ma div "page" à 1170px et en la centrant sur mon viewport (propriétés de la classe "container" de bootstrap au final), ça serait jouable, mais ma barre "nav" ne ferait plus 100% de ma surface affiché mais 1170px par héritage, et comme je veux qu'elle fasse 100%...

post-801526-0-23818000-1401979780_thumb.png

Edited by facedeharicot (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...