верстка таблица + наложить полоски...

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем deeeman, 12 авг 2010.

  1. deeeman

    deeeman Well-Known Member

    Регистрация:
    4 дек 2007
    Сообщения:
    382
    Симпатии:
    0
    Привет всем!

    Как сделать такую табличку?
    Есть Недельный Календарь, ячейки это дни недели.
    В каждой ячейке создается задача, причем она может быть растянута на несколько дней.
    Задачи отображаются как полоски для каждого дня, и растягиваются до дня когда закончиться эта задача. выложил картинку.

    С таблицей понятно...как ее сверстать.
    А вот как наложить эти задачи(полоски), причем нужно наложить как бы сверху ячеек(дней), чтобы не было видно разрывов, и чтобы на этих полосках можно было размещать текст и ссылки.

    Что для этого лучше выбрать div или table?
     

    Вложения:

    • 456.jpg
      456.jpg
      Размер файла:
      54,6 КБ
      Просмотров:
      61
  2. deeeman

    deeeman Well-Known Member

    Регистрация:
    4 дек 2007
    Сообщения:
    382
    Симпатии:
    0
    вот примерно то что требовалось.. но непонятно, будет ли оно работать при разных разрешениях экрана и разных размерах окна браузера...

    и как можно вычислять позиции ячеек таблицы? чтобы зависеть именно от расположения ячеек таблицы и уже от туда отображать дивы.

    Код (Text):
    <table style="width:30%; height:30%;" border='1pt'>

    <div style="position: absolute; width: 20%; height: 20; top: 5%; background: #FE76AF">Ссылка 1</div>
    <div style="position: absolute; width: 100%; height: 20; top: 8%; background: #00FF00">Ссылка 2</div>
    <div style="position: absolute; width: 35%; height: 20; top: 11%; left: 50; background: #F0FF00">Ссылка 3</div>
    <div style="position: absolute; width: 35%; height: 20; top: 26%; background: #00FF00">Ссылка 2</div>

    <tr><td>ПН</td><td>ВТ</td><td>СР</td><td>ЧТ</td></tr>
    <tr><td width='100pt' height='150pt'></td><td width='100pt' height='150pt'>
    </td><td width='100pt' height='150pt'></td><td width='100pt' height='150pt'></td></tr>

    <tr><td>ПТ</td><td>СБ</td><td>ВС</td><td>ПН</td></tr>
    <tr><td width='100pt' height='150pt'></td><td width='100pt' height='150pt'>
    </td><td width='100pt' height='150pt'></td><td width='100pt' height='150pt'></td></tr>

    </table>
     
  3. vital

    vital Больной Компом Детектед
    Команда форума Web Team

    Регистрация:
    29 янв 2006
    Сообщения:
    2.474
    Симпатии:
    27
    Ну просто смещать относительно ячеек на столько пикселей. padding-margin короче.
    И да, кстати. Такую таблицу тоже стоит делать дивами, тогда и наложить слои с заданиями будет не сложно.. А смешивать их вообще бредово..
     
  4. deeeman

    deeeman Well-Known Member

    Регистрация:
    4 дек 2007
    Сообщения:
    382
    Симпатии:
    0
    в общем я поступил так:
    создал контейнер див со свойством: position:relative
    и в него уже положил нужную полоску со свойством: position:absolute (код ниже)


    полоска теперь находиться относительно ячейки, это хорошо. НО, теперь возникают вопросы:
    1. Почему отступ полоски начинается с центра ячейки? как исправить? чтобы откладывались с верха ячеек.
    2. в ie нормально, а вот в мазилле откудато появился бордер у дива, который вставлен в ячейку. как его убрать?
    3. правильно ли я думаю что если в свойстве указано width:200 то это значит 200 пикселей, а не пунктов? и что лучше пункты или пиксели?
    4. как сделать чтобы длина полоски зависела от длины таблицы? т е у меня таблица занимает 30% по длине, а полоски я регулирую пикселями, но тогда есть вероятность что я могу задать большую длину чем сама таблица. Если ставить в процентах, то 100% это длина ячейки, а надо больше...
    5. будут ли еще косяки в этом коде? в разных разрешениях и размерах браузера? стоит ли использовать table и div вместе?

    КОД:

    Код (Text):
    <table style="width:30%; height:30%;" border='1'>

    <tr><td>ПН</td><td>ВТ</td><td>СР</td><td>ЧТ</td></tr>

    <tr>
    <td width='100' height='150'>
    <div style='position:relative;'>
    <div style="position: absolute; width:200; height: 20;left:0px; top:0px;background: #FE76AF">Ссылка 1</div>
    <div style="position: absolute; width:500; height: 20;left:0px; top:21px;background: #FE76AF">Ссылка 2</div>
    </div>
    </td>

    <td width='100' height='150'></td><td width='100' height='150'></td><td width='100' height='150'></td>
    </tr>

    <tr><td>ПТ</td><td>СБ</td><td>ВС</td><td>ПН</td></tr>

    <tr>
    <td width='100' height='150'></td><td width='100' height='150'>
    </td><td width='100' height='150'></td><td width='100' height='150'></td>
    </tr>

    </table>

    [​IMG]
     
  5. deeeman

    deeeman Well-Known Member

    Регистрация:
    4 дек 2007
    Сообщения:
    382
    Симпатии:
    0
    да, именно то что нужно!
    можете поделиться nsf?
     
Загрузка...

Поделиться этой страницей