L
Larzo
I am trying to create this two tier type of grid which shows how many contiguous channels are allocated per group. It shows the channels in yellow
against a blue back drop. I use an absolute div inside a relative div.
This seems to work fine, but when I put the cells inside of a table TD and have other cells to the left in a different TD it causes a line break to occur. The html is below
======================= html =====================
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
</head>
<body>
<br>
<br>
<table>
<tbody><tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">
<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>
<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
<span style="position: absolute; left: 201px; width: 100px; background-color: yellow;">
</span>
</div>
</div>
</td></tr>
<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">
<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>
<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
<span style="position: absolute; left: 221px; width: 100px; background-color: yellow;">
</span>
</div>
</div>
</td></tr>
<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">
<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>
<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
<span style="position: absolute; left: 335px; width: 100px; background-color: yellow;">
</span>
</div>
</div>
</td></tr>
<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">
<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>
<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
<span style="position: absolute; left: 546px; width: 100px; background-color: yellow;">
</span>
</div>
</div>
</td></tr>
<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">
<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>
<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
<span style="position: absolute; left: 72px; width: 100px; background-color: yellow;">
</span>
</div>
</div>
</td></tr>
<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">
<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>
<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
<span style="position: absolute; left: 32px; width: 100px; background-color: yellow;">
</span>
</div>
</div>
</td></tr>
</tbody></table>
</body></html>
against a blue back drop. I use an absolute div inside a relative div.
This seems to work fine, but when I put the cells inside of a table TD and have other cells to the left in a different TD it causes a line break to occur. The html is below
======================= html =====================
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
</head>
<body>
<br>
<br>
<table>
<tbody><tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">
<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>
<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
<span style="position: absolute; left: 201px; width: 100px; background-color: yellow;">
</span>
</div>
</div>
</td></tr>
<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">
<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>
<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
<span style="position: absolute; left: 221px; width: 100px; background-color: yellow;">
</span>
</div>
</div>
</td></tr>
<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">
<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>
<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
<span style="position: absolute; left: 335px; width: 100px; background-color: yellow;">
</span>
</div>
</div>
</td></tr>
<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">
<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>
<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
<span style="position: absolute; left: 546px; width: 100px; background-color: yellow;">
</span>
</div>
</div>
</td></tr>
<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">
<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>
<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
<span style="position: absolute; left: 72px; width: 100px; background-color: yellow;">
</span>
</div>
</div>
</td></tr>
<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">
<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>
<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
<span style="position: absolute; left: 32px; width: 100px; background-color: yellow;">
</span>
</div>
</div>
</td></tr>
</tbody></table>
</body></html>