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

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как получить от своей группы Вконтакте максимум?
6 VilD 1498 Вчера, 15:31
автор: laser
Открытая тема (нет новых ответов) Как организовать индексацию защищенных pdf с ключами и ссылками
И разместить pdf на внешних жирных ресурсах
1 kirch 648 Вчера, 14:35
автор: kirch
Горячая тема (нет новых ответов) Как заработать новичку?
142 Emeralda 25777 23.5.2018, 17:07
автор: Vlad_Sokolov
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКак носить смартфоны диагональю 5.5 - 6.4 дюйма?
42 Room 5165 23.5.2018, 13:36
автор: wertu
Открытая тема (нет новых ответов) Как защитить свои данные в общественном Wi-Fi?
7 unazekoff 319 23.5.2018, 13:24
автор: alxpn


 



RSS Текстовая версия Сейчас: 25.5.2018, 5:33
Дизайн