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

deeeman · 12.08.2010

Привет всем!

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

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

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

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

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

КОД:

Код:

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

tigra60 · 12.08.2010

Если устроит такое:

То вот код:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Календарь</title>
<style type="text/css">
th, td {border:solid 1pt }
th {background-color:#333; color:#FFF}
</style>
</head>

<body>
<table style="width:80%; border:solid 1pt;" cellspacing="0">
	<tr>
		<th>ПН</th><th>ВТ</th><th>СР</th><th>ЧТ</th>
	</tr>
	<tr>
		<td class="nopadding" colspan="3" bgcolor="#FE76AF">Ссылка 1</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp</td>
		<td colspan="3" bgcolor="#00FF00">Ссылка 2</td>
	</tr>
	<tr>
		<td>&nbsp;</td><td>&nbsp;</td>
		<td colspan="2" bgcolor="F0FF00">Ссылка 3</td>
	</tr>
	<tr style="font-size:300%">
		<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
	</tr>
	<tr>
		<th>ПТ</th><th>СБ</th><th>ВС</th><th>ПН</th>
	</tr>
	<tr>
		<td colspan="3" bgcolor="#00FF00">Ссылка 2</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td colspan="2" bgcolor="F0FF00">Ссылка 3</td>
		<td>&nbsp;</td><td>&nbsp;</td>
	</tr>
	<tr style="font-size:300%">
		<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
	</tr>
</table>
</body>
</html>

deeeman · 13.08.2010

вот если бы лишние полоски убрать, было бы супер (например, в ПН, ниже "Ссылки1" есть пустые полоски)

а вообще наверное лучше сделать и таблицу и полоски на дивах... как делать таблицу на дивах?

в общем я поступил так:
создал контейнер див со свойством: 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>

tigra60 · 13.08.2010

вот если бы лишние полоски убрать, было бы супер (например, в ПН, ниже "Ссылки1" есть пустые полоски)

Если бы Вы код внимательно изучили, такого вопросы бы не возникло.

Просто нужно убрать нижние (пустые) ряды:

Код:

вот это убираем (2 раза)
<tr style="font-size:300%">
    <td> </td><td> </td><td> </td><td> </td>
</tr>

а вообще наверное лучше сделать и таблицу и полоски на дивах

Не пытайтесь быть большим католиком, чем Папа Римский. :huh:
Верстать страницу нужно блоками, а таблицу - табличными элементами.

как делать таблицу на дивах?

Гланды тоже можно у проктолога удалять... :wacko:

width:200 то это значит 200 пикселей, а не пунктов? и что лучше пункты или пиксели?

Извините, конечно, но с такими познаниями в HTML и CSS Вам еще нужно создавать странички с надписью "Hello, world!"... :dry:
Учите матчасть!

Hihika · 14.08.2010

как делать таблицу на дивах?

:biggrin: :biggrin: :biggrin:
Извините, не удержалась :laugh: :laugh: :laugh:
Никак.

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

deeeman

Новичок

Вложения

tigra60

Спасатель

deeeman

Новичок

tigra60

Спасатель

Hihika

шизоидный характер...

Онлайн статистика

Статистика форума

Новые пользователи

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