X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Как сверстать тень?, Вопрос по верстке
Serious_Andy
Serious_Andy
Topic Starter сообщение 8.7.2011, 14:38; Ответить: Serious_Andy
Сообщение #1


Участник
***

Группа: User
Сообщений: 176
Регистрация: 10.9.2010
Поблагодарили: 25 раз
Репутация:   1  


Столкнулся с проблемой при верстке. Не могу додумать как свертать то что в кружках на картинке:



Профи помогите, имеется фон из маленького патерна, в нем идет главный блок, как прилепить тень около футера?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
raven
raven
сообщение 8.7.2011, 15:29; Ответить: raven
Сообщение #2


Бывалый
****

Группа: User
Сообщений: 288
Регистрация: 6.2.2008
Поблагодарили: 31 раз
Репутация:   16  


Если шаблон фиксированной ширины, то делаете так:
  • сохраняете тень отдельным слоем (полностью, с пустотой посередине)
  • добавляете ещё один div, делаете его обёрткой для основного, белого блока
  • ставите ширину немного больше в соответствии с размером тени
  • фоном ставите тень, позиционируйте вертикально ближе к футеру
Если шаблон резиновый, то нужно будет сделать два блока-обёртки и каждому задать фон (одному левая тень, другому — правая) и сделать соответственное расположение фона (справа для правого куска тени, слева — для левого).


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
jups
jups
сообщение 8.7.2011, 15:46; Ответить: jups
Сообщение #3


Участник
***

Группа: User
Сообщений: 233
Регистрация: 30.9.2010
Поблагодарили: 28 раз
Репутация:   10  


непонятная тень, она только в центре? сделайте уже по всему краю.. и потом растяните по y
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Serious_Andy
Serious_Andy
Topic Starter сообщение 8.7.2011, 15:59; Ответить: Serious_Andy
Сообщение #4


Участник
***

Группа: User
Сообщений: 176
Регистрация: 10.9.2010
Поблагодарили: 25 раз
Репутация:   1  


непонятная тень, она только в центре? сделайте уже по всему краю.. и потом растяните по y

тень ближе к футеру, остальная часть страницы идет без тени

добавляете ещё один div, делаете его обёрткой для основного, белого блока

у меня там уже несколько оберток идет, сложная шапка которая тянется до самого футера, обернуть еще раз не получится =(
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
raven
raven
сообщение 8.7.2011, 20:08; Ответить: raven
Сообщение #5


Бывалый
****

Группа: User
Сообщений: 288
Регистрация: 6.2.2008
Поблагодарили: 31 раз
Репутация:   16  


Serious_Andy, почему не получится? Хоть 10 обёрток делайте — работать будет, главное правильно сделать. Ну или добавляйте бэкграунды к существующим, если у них нет. В конце концов, можно сделать два дива с позишн абсолют, а основной обертке сделать позишн релэйтив, их поместить внутри этой обертки, сделать им нужные нужные координаты и всё.

Сообщение отредактировал raven - 8.7.2011, 20:12


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Serious_Andy
Serious_Andy
Topic Starter сообщение 8.7.2011, 23:38; Ответить: Serious_Andy
Сообщение #6


Участник
***

Группа: User
Сообщений: 176
Регистрация: 10.9.2010
Поблагодарили: 25 раз
Репутация:   1  


В конце концов, можно сделать два дива с позишн абсолют, а основной обертке сделать позишн релэйтив, их поместить внутри этой обертки, сделать им нужные нужные координаты и всё.


вот-вот, я примерно так же пробовал, абсолют с отрицательными значениями. но тогда по центру будет плавать при margin: 0 auto
дурацкий шаблон, отдам заказчику без тени)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Quickwriters
Quickwriters
сообщение 19.7.2011, 16:01; Ответить: Quickwriters
Сообщение #7


Новичок
*

Группа: User
Сообщений: 19
Регистрация: 9.7.2011
Поблагодарили: 2 раза
Репутация:   3  


Что мешает добавить 2 блока непосредственно для теней? wink.gif
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Loginp
Loginp
сообщение 19.7.2011, 16:17; Ответить: Loginp
Сообщение #8


Завсегдатай
*****

Группа: Active User
Сообщений: 781
Регистрация: 22.8.2009
Из: Україна | Рівне
Поблагодарили: 167 раз
Репутация:   18  


Несколько вариантов:
- С помощью css (введите в поиске тень сss, в IE не канает - самый отстойный браузер, в нем вообще мало что работает)
- как написали выше - сделать фон - no-repeat из одного png файла слева и справа чтобы клеилось к дивам
- нарисовать, вставить в таблицу как отдельными столбцами

Сообщение отредактировал Loginp - 19.7.2011, 16:17


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tatohi4
tatohi4
сообщение 22.7.2011, 10:20; Ответить: tatohi4
Сообщение #9


Новичок
*

Группа: User
Сообщений: 30
Регистрация: 21.7.2011
Поблагодарили: 4 раза
Репутация:   1  


Я бы вообще отказался от такого варианта тени.... Очень геморно получается и не оправдано это все mellow.gif
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как мошенники зарабатывают на прямых трансляциях в Instagram
Не ждите порно в инстаграм, его нет
12 PostBrigada 1287 Вчера, 23:00
автор: PostBrigada
Открытая тема (нет новых ответов) Как сейчас зарегистрировать Яндекс кошелек за пределами России?
4 metvekot 331 Вчера, 19:04
автор: metvekot
Открытая тема (нет новых ответов) Как поднять доверие к сайту?
5 fair_exchange 374 Вчера, 18:33
автор: genjnat
Открытая тема (нет новых ответов) Маленький кейс как сделать много почтовых ящиков в Gmail
Один аккаунт = много ящиков
1 PostBrigada 530 15.12.2017, 21:34
автор: Pingunio
Горячая тема (нет новых ответов) Черный список обменников и как безопасно обменять валюту
141 Kurses 29939 15.12.2017, 13:04
автор: BestExchangers


 



RSS Текстовая версия Сейчас: 17.12.2017, 3:15
Дизайн