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

[deeeman]

Привет всем!

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

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

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

 

[deeeman]

вот примерно то что требовалось.. но непонятно, будет ли оно работать при разных разрешениях экрана и разных размерах окна браузера...

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

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

 

[vital]

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

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

 

[deeeman]

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


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

КОД:

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

Ссылка скрыта от гостей

 

[oshmianski]

Ссылка скрыта от гостей

?

 

[deeeman]

да, именно то что нужно!
можете поделиться nsf?