Контент с тенью. Альтернатива табличной верстке- Веб-дизайн и программирование

Гость

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"> </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"> </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, которые заменить картинку для старого гавна.

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

Интернет-форум Краснодарского края и Краснодараг. Краснодар, Краснодарский край 2022г.

Интернет-форум Краснодарского края и Краснодара
г. Краснодар, Краснодарский край 2022г.