Создать форум бесплатно: ixbb.ru :: Календарь на Март 2024 года: calendar2008.ru/2024/mart/

  Reply to this topicStart new topicStart Poll

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

deeeman
Отправлено: Aug 12 2010, 05:18 PM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 4
Пользователь №: 3461
Регистрация:
12-August 10



Привет всем!

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

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

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

рисунок
PMEmail Poster
Top
dudeonthehorse
Отправлено: Aug 12 2010, 06:27 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 763
Пользователь №: 2933
Регистрация:
26-October 09



календарь - таблица, а задачи - абсолютные дивы, хотя и календарь на дивах можно спаять
PMEmail PosterICQ
Top
deeeman
Отправлено: Aug 12 2010, 06:39 PM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 4
Пользователь №: 3461
Регистрация:
12-August 10



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

т е в конструкцию

<table><tr>
<td></td><td></td>
</tr></table>

нужно как то впихнуть див, но именно чтобы соответствовал определенным дням и был растянут.
PMEmail Poster
Top
dudeonthehorse
Отправлено: Aug 12 2010, 08:49 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 763
Пользователь №: 2933
Регистрация:
26-October 09



напрашивается вопрос: как будет заполняться табличка? тупо руками лезть в код, каждый раз обновляя календарь, или данные о событиях будут храниться в файлах/базах данных? есть все ручками, то пример напишу, если же все строиться должно на основе каких либо данных, а соответственно заполняться это будет возможно даже "чайником" - тогда не все так просто. тут в ход пойдут php, mysql и jquery. в этом случае советом не помогу, а вот за "денежку" сделаю.
PMEmail PosterICQ
Top
deeeman
Отправлено: Aug 12 2010, 09:06 PM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 4
Пользователь №: 3461
Регистрация:
12-August 10



НАШЕЛ РЕШЕНИЕ:
да, будет все в базах храниться.. а пока я просто смотрю вручную заполнение...
вот примерно то что требовалось.. но непонятно, будет ли оно работать при разных разрешениях экрана и разных размерах окна браузера...

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

КОД:
<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>
PMEmail Poster
Top
dudeonthehorse
Отправлено: Aug 12 2010, 10:02 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 763
Пользователь №: 2933
Регистрация:
26-October 09



не нужно вычислять позицию ячейки. просто для нее указываешь position:relative, а внутрь пихаешь абсолютный div. в этом случае див будет позиционироваться не от body а от родительского релативного элемента - в нашем случае ячейки. так же лучше отказаться от процентов и пунктов, а юзать тупо пиксели, не напорешься на проблемы. но то что описал это так - пол дела. а вот для того, чтобы точно позиционировать события в зависимости от получаемых данных нужно будет поматематить с датами, да и на jquery делать расчеты для позиционирования, что помимо всего прочего снизит нагрузку на сервер.
PMEmail PosterICQ
Top
deeeman
Отправлено: Aug 13 2010, 10:46 AM
Quote Post


  Солдат
*

Группа: Members
Сообщений: 4
Пользователь №: 3461
Регистрация:
12-August 10



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


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

КОД:


CODE

<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>


user posted image
PMEmail Poster
Top
dudeonthehorse
Отправлено: Aug 13 2010, 02:25 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 763
Пользователь №: 2933
Регистрация:
26-October 09



1. попробуй для релативного дива проставить top и left нулевыми, а вообще эксперементируй.
2. бордер убирается так: border:none; от куда он появился тебе виднее... css или еще что.
3. указывай размеры только через стили в пикселях (width:200px;). не используй атрибуты. ты зада 500 для дива , вот он и вылез за таблицу. тут все четко.
4. в твоем случае решат проблему jquery скрипты.
5. можно таблицу и див совместно, можно дивы с дивами, как хочешь, гемор и там и там.
PMEmail PosterICQ
Top

Topic Options Reply to this topicStart new topicStart Poll

 



[ Script Execution time: 0.0293 ]   [ 10 queries used ]   [ GZIP выключен ]