Моя цель - добавить тень слева и справа от #container div
шириной 960 пикселей.
Сам #container
содержит заголовок, навигационное меню, главноесодержание, боковая панель и нога.Но сам заголовок выступает из #container
с настраиваемой шириной из-за графики.
Как таковой, он не добавляет тень справа и слева.Только навигационное меню вниз нуждается в удалении.Это связано с тем, что заголовок настроен на произвольную ширину и выступает за пределы #container
.Тень слева и справа от того, что уже выступает, разрушит эстетику.
Для лучшей визуализации мой сайт выглядит как http://www.doubleyourdating.com/,, но элемент заголовка выступает с обеих сторон.
Я пытался добавить тень слева и справа от #container
из меню навигации вниз с помощью следующих решений:
I Photoshopped изображение высотой 1px, шириной 1010px, которое содержит 25-пиксельное «затухание» на противоположных концах.Я назвал это CSS #container div background-image
, но, вероятно, из-за того, что сам #container
установлен на ширину 960 пикселей, фон шириной 1010 пикселей не может отображаться.Обратите внимание, что изменение ширины в 960 пикселей создаст каскад смерти в этом простом макете из двух столбцов.
Я пытался создать CSS для создания временного блока теней вокруг "div" контейнера, но это не так.не работает, потому что мой заголовок имеет настраиваемую ширину, которая выходит за пределы контейнера.
Как мне сделать эту работу?