Помощь. Таблицы, div-ы, рисунки. css, html, etc.

Статус
В этой теме нельзя размещать новые ответы.

Matey

Писатель
Регистрация
24 Ноя 2007
Сообщения
3
Реакции
0
Уважаемые нулледовцы. Мастера и подмастерье. Не случилось бы за надобность если б смог разобраться сам. Но, увы, нуждаюсь в помощи.

Представляется незатейливое ТЗ по верстке:
Требуется создать полосу галереи изображений.
Суть проста.

Представляется таблица в один ряд.
Код:
<table>
<tr>
<td>{obj}</td><td>{obj}</td><td..... n
</tr>
</table>
Где располагается n-ое количество ячеек. Каждая ячейка имеет в себе изображение произвольного размера.
Но.
Вот задача - каждому изображению (без рамок) нужна следующаяя тень.

right_top.png


right_line.png


left_down.png
down_line.png
right_down.png


Пытался разместить это всё дело на ещё одной таблице вида:
Код:
<table height="200px" width="300px" cellspacing=0 cellpadding=0>
 <tr>
  <td height=auto width=auto colspan=2 rowspan=2>
    </td>
  <td width=8 height=8>
  </td>
 </tr>
 <tr>
  <td width=8 height=auto >
    </td>
 </tr>
 <tr >
  <td width=8  height=8px >
    </td>
  <td width=auto height=8px>
    </td>
  <td width=8 height=8px>
   </td>
 </tr>
 </table>
tbl.JPG

Оченно наигрался я с ней, но нужного результата не получил. Если и удавалось разместить все элементы тени и изображение в одной таблице как элементе, то были проблемы с разрывом и размерами ячеек при выводе на выше указаной ленте.
В общем, господа. Ваши предложения, замечания. Как лучше? Чем лучше?
Кому не лень - может и готовый экземпляр кода к рассмотрению предоставить.
Возможно, кто настолько могуч, что и дивами данный объект разметит? Тем более - превосходно!
Всему буду рад и заранее благодарен.
 
Возможно немного не то что Вам нужно, но все же ИМХО из той оперы:
 
Благодарен. Но это не совсем то, чего хотелось бы. В вопросах вёрстки я бы не хотел употреблять javascript или даже php. В данном примере решение этой проблемы реализуют через javascript, и это понятно. Согласен это - просто. Да и с php можно было бы создать уже готовые эскизы изображений в png, со всеми атрибутами, так как на предпологаемом сайте рисунков будет не так уж и много, то есть ресурсов задействовано мало.
Но всё же настаиваю - верстка.
 
Фон однородный? Если однородный сохраняем всё без прозрачности. Тогда самый простой и надежный вариант)

HTML:
div.shadow{background: url(right.png) repeat-y 100% 0;}
div.shadow .b{background: url(bottom.png) repeat-x 0 100%;}
div.shadow .r_b{background: url(right-bottom.png) no-repeat 100% 100%;}
div.shadow .r_t{background: url(right-top.png) no-repeat 0 100%;}
div.shadow .l_b{background: url(left-bottom.png) no-repeat 0 100%;padding: 0 8px 8px 0;}


html:
HTML:
<td>
<div class="shadow"><div class="b"><div class="r_b"><div class="r_t"><div class="l_b">
  <img ...>
</div></div></div></div></div>
</td>

не особо красиво, но работать будет
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху