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

Тема в разделе "Веб-дизайн", создана пользователем Matey, 16 фев 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Matey

    Matey Писатель

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

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

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

    [​IMG]

    [​IMG]

    [​IMG] [​IMG] [​IMG]

    Пытался разместить это всё дело на ещё одной таблице вида:
    Код:
    <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>
    [​IMG]
    Оченно наигрался я с ней, но нужного результата не получил. Если и удавалось разместить все элементы тени и изображение в одной таблице как элементе, то были проблемы с разрывом и размерами ячеек при выводе на выше указаной ленте.
    В общем, господа. Ваши предложения, замечания. Как лучше? Чем лучше?
    Кому не лень - может и готовый экземпляр кода к рассмотрению предоставить.
    Возможно, кто настолько могуч, что и дивами данный объект разметит? Тем более - превосходно!
    Всему буду рад и заранее благодарен.
     
  2. Raenor

    Raenor Ксенолог №1

    Регистр.:
    28 дек 2006
    Сообщения:
    156
    Симпатии:
    91
    Возможно немного не то что Вам нужно, но все же ИМХО из той оперы:
    http://habrahabr.ru/blogs/webdev/50439/
     
  3. Matey

    Matey Писатель

    Регистр.:
    24 ноя 2007
    Сообщения:
    3
    Симпатии:
    0
    Благодарен. Но это не совсем то, чего хотелось бы. В вопросах вёрстки я бы не хотел употреблять javascript или даже php. В данном примере решение этой проблемы реализуют через javascript, и это понятно. Согласен это - просто. Да и с php можно было бы создать уже готовые эскизы изображений в png, со всеми атрибутами, так как на предпологаемом сайте рисунков будет не так уж и много, то есть ресурсов задействовано мало.
    Но всё же настаиваю - верстка.
     
  4. x_Dev

    x_Dev Создатель

    Регистр.:
    2 фев 2009
    Сообщения:
    13
    Симпатии:
    1
    Фон однородный? Если однородный сохраняем всё без прозрачности. Тогда самый простой и надежный вариант)

    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>
    не особо красиво, но работать будет
     
Статус темы:
Закрыта.