К списку форумов К списку тем
Регистрация    Правила    Главная форума    Поиск   
Имя: Пароль:
Рекомендовать в новости

Контент с тенью. Альтернатива табличной верстке

Гость
0 - 25.07.2013 - 13:22
В общем, надо сделать, чтобы какбы на странице был контент, который был бы скажем шириной 500пикселов и был по центру страницы в браузере.
И надо, чтобы по бокам влево и вправо он отбрасывал тени.

Вот такое:


Сверстано оно на данных момент с пом. таблицы. Три столбика левый с фоновой картинкой и правый с той же фоновой картинкой (PNG).

Вот его код. Все просто.
Код:
<table align="center" width="500" cellspacing="0" cellpadding="0">
<tr>
<td width="50" style="background-color:#aaaaaa; background-image:url(docShade.png) ; background-position:32px 0px; background-repeat:repeat-y">&nbsp;</td>
<td align="center" style="border:2px solid #bbbbbb; background:#888888 url() repeat scroll left top">2<br>-<br>-<br>-<br>-<br>-<br>-<br>-</td>
<td width="50" style="background-color:#aaaaaa; background-image:url(docShade.png) ; background-position:-18px 0px; background-repeat:repeat-y">&nbsp;</td>
</tr>
</table>
Вопрос: как лучше всего заменить это дело дивами и получить такой же эффект?



Гость
1 - 25.07.2013 - 13:43
В общем, пока что сделал вот такое:
Код:
<div style="width:500px; background-color:#aaaaaa; background-image:url(docShade.png) , url(docShade.png) ; background-position:0px 0px, 100% 0px; background-repeat:repeat-y, repeat-y; margin-bottom:19px ; margin-left:auto ; margin-right:auto ">
<div style="border:3px solid #bbbbbb; background:#888888; margin-left:18px ; margin-right:18px "><br>1<br>2<br>3<br>4<br>4<br>5<br></div>
</div>

Получилось вроде бы то же самое.
Интересует, являеццо ли ето наиоптимальнейшим вариантом для достижения достигнутого?
Гость
2 - 25.07.2013 - 13:51
если использовать Image bg - то пойдет, но можно и box-shadow, а картинку для старинных броузеров использовать только
Гость
3 - 25.07.2013 - 13:56
Цитата:
Сообщение от Ipro Посмотреть сообщение
если использовать Image bg - то пойдет
считаете, что это самый оптимальный вариант?

ЗЫ
2-Ipro >
box-shadow имхо рано еще.
Гость
4 - 25.07.2013 - 18:01
ИЕ, козлина, как всегда отличился.
Не понимает он таких вот выкрутасов с фоном, типа
background-image:url(docShade.png) , url(docShade.png) ; background-position:0px 0px, 100% 0px; background-repeat:repeat-y, repeat-y;

расставил фоны мозаикой, скотина.
прридется наверное всунуть все в еще один див, чтобы в одном диве была тень налево, а в другом диве- тень направо.
Гость
5 - 25.07.2013 - 20:18
[link=оптимальный вариант]http://g.zeos.in/?q=%D1%82%D0%B5%D0%BD%D1%8C%20css[/link]
Гость
6 - 25.07.2013 - 20:19
http://g.zeos.in/?q=%D1%82%D0%B5%D0%BD%D1%8C%20css
Гость
7 - 25.07.2013 - 20:20
оптимальный вариант
Гость
8 - 25.07.2013 - 20:24
На хабре был вариант кроссбраузерной тени
http://habrahabr.ru/post/94799/
Гость
9 - 25.07.2013 - 21:00
http://css3gen.com/box-shadow/
перекрывает полностью все потребности в тени
Гость
10 - 25.07.2013 - 21:57
5-reason >6-reason >7-reason >
читай №3
Гость
11 - 25.07.2013 - 21:58
8-Monty1 >
хай воно сказыться =)))
Гость
12 - 26.07.2013 - 00:31
вы определитесь уже - под какие браузеры и какие версии верстаете =)
Гость
13 - 26.07.2013 - 01:12
12-droidman >
чисто цcc имхо еще рано делать, поетому картинками, как и было описано.
Гость
14 - 26.07.2013 - 09:20
box-shadow работает в ie9+, все чтио ниже - делается картинкой. Все легко, просто и изящно.
А есть еще PIE, которые заменить картинку для старого гавна.


К списку вопросов
Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск




Copyright ©, Все права защищены