Как сделать такие уголки у таблицы?

Тема в разделе "Веб-дизайн", создана пользователем Apocalypse, 14 сен 2008.

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

    Apocalypse Take My Revolution

    Moderator
    Регистр.:
    2 июн 2007
    Сообщения:
    307
    Симпатии:
    800
    Знатоки, помогите пожалуйста! :thenks:

    Прикрепил изображение таблицы, точнее там получается три таблицы:

    - одна темного цвета
    - одна для уголков
    - одна для светлого фона

    Вопрос, как это сделать в хтмл? Делаю три таблицы, во второй вставляю уголки, но они отражаются по углам,а надо чтобы с наложением =( В общем посмотрите прицепку и посоветуйте.

    Спасибо за помощь.
     

    Вложения:

    • макет1.jpg
      макет1.jpg
      Размер файла:
      14,6 КБ
      Просмотров:
      91
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
    разрежь все и делай. Ты сути не отобразил, это четыре угла одной большой таблицы? Или же заготовка для заголовока
     
  3. Apocalypse

    Apocalypse Take My Revolution

    Moderator
    Регистр.:
    2 июн 2007
    Сообщения:
    307
    Симпатии:
    800
    Что резать? Мне ничего не надо резать! Все уже нарезано, мне надо разобраться как сделать такие уголки картинками и с наложением на светлую область. Какую еще суть отобразить? :-]
     
  4. cocacola

    cocacola Постоялец

    Регистр.:
    4 апр 2006
    Сообщения:
    137
    Симпатии:
    48
    все очень просто!

    Таблица с тремя столбиками!
    Для Все таблины задаем фон из осноговного цвета! - это вырезанное изображение шинирой 1 px а высотой во все представленное изображение!

    Далее вырезаем левый кусок исображения и правый и вставляем их в крайние столбики!

    В итоге мы получим резиновую структуру по горизонтали!

    Полностью резина делаетсяс идентично!
     
  5. bumbu

    bumbu

    Регистр.:
    17 окт 2007
    Сообщения:
    233
    Симпатии:
    28
    или на блоках всё сделать, правда получается вложенность из 8 div'ов но зато это просто и понятно.
    первому диву задаём основной центральный цвет как бэкгроунд + ещё и однопиксельную по горизонтали или вертикали картинку(зависит для какого бока задавать) что повторяет боковой фон, а в последних 4-ех дивах задаём как неповторяющийся фон уголки с узорами для каждого угла.
    итого получаем тянущийся блок с нужным фоном.
     
  6. Apocalypse

    Apocalypse Take My Revolution

    Moderator
    Регистр.:
    2 июн 2007
    Сообщения:
    307
    Симпатии:
    800
    Забыл написать, что я не силен в хтмл =)

    Код может кто-нибудь предложить? :thenks:
     
  7. Dodgy

    Dodgy Юзверь

    Регистр.:
    7 сен 2008
    Сообщения:
    229
    Симпатии:
    44

    cocacola тебе написал самый лучший способ, если ты несилен в хтмл, то учи хтмл, но еще тебе понадобиться и css.
    Вот здесь описано то што тебе нада! Вникни
    http://dle-news.ru/extras/uroki/urok1/urok1.html
     
  8. megadude

    megadude

    Регистр.:
    6 сен 2006
    Сообщения:
    184
    Симпатии:
    66
    Вот простенький код:

    Код:
    <html>
      <head>
      <title></title>
      <style type="text/css">
        td { height:80px; text-align:center; vertical-align:middle; }
        .td_left { width:40px;  background:url(td_left.jpg); }
        .td_cent { width:300px; background:url(td_cent.jpg); }
        .td_righ { width:40px;  background:url(td_righ.jpg); }
      </style>
      </head>
      <body>
    
      <table cellspacing="0" cellpadding="0">
        <tr>
          <td class="td_left">&nbsp;</td>
          <td class="td_cent">HTML and CSS</td>
          <td class="td_righ">&nbsp;</td>
        </tr>
      </table>
    
      </body>
    </html>
    А без HTML/CSS ты реально далеко не уедешь, товарищ. Это же основы. Так что учи азы - пригодятся еще не одну сотню раз.
     

    Вложения:

    • td_cent.jpg
      td_cent.jpg
      Размер файла:
      336 байт
      Просмотров:
      146
    • td_righ.jpg
      td_righ.jpg
      Размер файла:
      505 байт
      Просмотров:
      145
    • td_left.jpg
      td_left.jpg
      Размер файла:
      512 байт
      Просмотров:
      151
    joshdigit и deling2 нравится это.
  9. nasden

    nasden Создатель

    Регистр.:
    22 сен 2008
    Сообщения:
    12
    Симпатии:
    1
  10. dianastorner

    dianastorner Создатель

    Регистр.:
    16 окт 2007
    Сообщения:
    28
    Симпатии:
    3
    Как я поняла, первая таблица имеет тёмный цвет бекграунда, следующая таблица прозрачный бекграунд картинки и затем внутрення таблица со светлым цветом бекграунда. В таком случае тебе нужно средней таблице просто поставить (cellpadding="0" cellspacing="0")
     
Статус темы:
Закрыта.