two tier grid inside of a table

Discussion in 'HTML' started by Larzo, Jul 6, 2012.

  1. Larzo

    Larzo Guest

    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>

    &nbsp;

    <div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
    &nbsp;

    <span style="position: absolute; left: 201px; width: 100px; background-color: yellow;">
    &nbsp;
    </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>

    &nbsp;

    <div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
    &nbsp;

    <span style="position: absolute; left: 221px; width: 100px; background-color: yellow;">
    &nbsp;
    </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>

    &nbsp;

    <div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
    &nbsp;

    <span style="position: absolute; left: 335px; width: 100px; background-color: yellow;">
    &nbsp;
    </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>

    &nbsp;

    <div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
    &nbsp;

    <span style="position: absolute; left: 546px; width: 100px; background-color: yellow;">
    &nbsp;
    </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>

    &nbsp;

    <div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
    &nbsp;

    <span style="position: absolute; left: 72px; width: 100px; background-color: yellow;">
    &nbsp;
    </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>

    &nbsp;

    <div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
    &nbsp;

    <span style="position: absolute; left: 32px; width: 100px; background-color: yellow;">
    &nbsp;
    </span>
    </div>

    </div>
    </td></tr>


    </tbody></table>





    </body></html>
     
    Larzo, Jul 6, 2012
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. rob

    ASP v2 & 3-tier or 2-tier

    rob, Aug 13, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    421
    Steve C. Orr [MVP, MCSD]
    Aug 13, 2004
  2. NOSPAM

    2 tier to 3 tier?

    NOSPAM, Oct 14, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    446
    =?Utf-8?B?Q293Ym95IChHcmVnb3J5IEEuIEJlYW1lcikgLSBN
    Oct 14, 2004
  3. Steve Kershaw

    Setting up a new tier in a 3-tier system?

    Steve Kershaw, Mar 28, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    458
    Steve Kershaw
    Mar 29, 2006
  4. Shantanu Bhattacharya
    Replies:
    2
    Views:
    564
    Christopher Benson-Manica
    Dec 26, 2003
  5. Ebenezer
    Replies:
    2
    Views:
    941
    Ebenezer
    Nov 15, 2010
Loading...

Share This Page