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