Здравствуйте Гость ( Вход | Регистрация ) | Выслать повторно письмо для активации |
deeeman |
Отправлено: Aug 12 2010, 05:18 PM
|
Солдат Группа: Members Сообщений: 4 Пользователь №: 3461 Регистрация: 12-August 10 |
Привет всем!
Как сделать такую табличку? Есть Недельный Календарь, ячейки это дни недели. В каждой ячейке создается задача, причем она может быть растянута на несколько дней. Задачи отображаются как полоски для каждого дня, и растягиваются до дня когда закончиться эта задача. выложил картинку. С таблицей понятно...как ее сверстать. А вот как наложить эти задачи(полоски), причем нужно наложить как бы сверху ячеек(дней), чтобы не было видно разрывов, и чтобы на этих полосках можно было размещать текст и ссылки. Что для этого лучше выбрать div или table? рисунок |
dudeonthehorse |
Отправлено: Aug 12 2010, 06:27 PM
|
Команда ЭйсВэб Группа: Super moderator Сообщений: 763 Пользователь №: 2933 Регистрация: 26-October 09 |
календарь - таблица, а задачи - абсолютные дивы, хотя и календарь на дивах можно спаять
|
deeeman |
Отправлено: Aug 12 2010, 06:39 PM
|
Солдат Группа: Members Сообщений: 4 Пользователь №: 3461 Регистрация: 12-August 10 |
а можете подсказать как именно эти дивы наложить на табличку?
т е в конструкцию <table><tr> <td></td><td></td> </tr></table> нужно как то впихнуть див, но именно чтобы соответствовал определенным дням и был растянут. |
dudeonthehorse |
Отправлено: Aug 12 2010, 08:49 PM
|
Команда ЭйсВэб Группа: Super moderator Сообщений: 763 Пользователь №: 2933 Регистрация: 26-October 09 |
напрашивается вопрос: как будет заполняться табличка? тупо руками лезть в код, каждый раз обновляя календарь, или данные о событиях будут храниться в файлах/базах данных? есть все ручками, то пример напишу, если же все строиться должно на основе каких либо данных, а соответственно заполняться это будет возможно даже "чайником" - тогда не все так просто. тут в ход пойдут php, mysql и jquery. в этом случае советом не помогу, а вот за "денежку" сделаю.
|
deeeman |
Отправлено: Aug 12 2010, 09:06 PM
|
Солдат Группа: 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> |
dudeonthehorse |
Отправлено: Aug 12 2010, 10:02 PM
|
Команда ЭйсВэб Группа: Super moderator Сообщений: 763 Пользователь №: 2933 Регистрация: 26-October 09 |
не нужно вычислять позицию ячейки. просто для нее указываешь position:relative, а внутрь пихаешь абсолютный div. в этом случае див будет позиционироваться не от body а от родительского релативного элемента - в нашем случае ячейки. так же лучше отказаться от процентов и пунктов, а юзать тупо пиксели, не напорешься на проблемы. но то что описал это так - пол дела. а вот для того, чтобы точно позиционировать события в зависимости от получаемых данных нужно будет поматематить с датами, да и на jquery делать расчеты для позиционирования, что помимо всего прочего снизит нагрузку на сервер.
|
deeeman |
Отправлено: Aug 13 2010, 10:46 AM
|
||
Солдат Группа: Members Сообщений: 4 Пользователь №: 3461 Регистрация: 12-August 10 |
в общем я поступил так: создал контейнер див со свойством: position:relative и в него уже положил нужную полоску со свойством: position:absolute (код ниже) полоска теперь находиться относительно ячейки, это хорошо. НО, теперь возникают вопросы: 1. Почему отступ полоски начинается с центра ячейки? как исправить? чтобы откладывались с верха ячеек. 2. в ie нормально, а вот в мазилле откудато появился бордер у дива, который вставлен в ячейку. как его убрать? 3. правильно ли я думаю что если в свойстве указано width:200 то это значит 200 пикселей, а не пунктов? и что лучше пункты или пиксели? 4. как сделать чтобы длина полоски зависела от длины таблицы? т е у меня таблица занимает 30% по длине, а полоски я регулирую пикселями, но тогда есть вероятность что я могу задать большую длину чем сама таблица. Если ставить в процентах, то 100% это длина ячейки, а надо больше... 5. будут ли еще косяки в этом коде? в разных разрешениях и размерах браузера? стоит ли использовать table и div вместе? КОД:
|
||
dudeonthehorse |
Отправлено: Aug 13 2010, 02:25 PM
|
Команда ЭйсВэб Группа: Super moderator Сообщений: 763 Пользователь №: 2933 Регистрация: 26-October 09 |
1. попробуй для релативного дива проставить top и left нулевыми, а вообще эксперементируй.
2. бордер убирается так: border:none; от куда он появился тебе виднее... css или еще что. 3. указывай размеры только через стили в пикселях (width:200px;). не используй атрибуты. ты зада 500 для дива , вот он и вылез за таблицу. тут все четко. 4. в твоем случае решат проблему jquery скрипты. 5. можно таблицу и див совместно, можно дивы с дивами, как хочешь, гемор и там и там. |