Centering middle cell, code included.

Discussion in 'HTML' started by luke, Oct 20, 2004.

  1. luke

    luke Guest

    I need to have two different backgrounds, one on the left and one on the
    right of the screen, with the main content centered in the browser. This is
    the code I have come up with

    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td width="49%" background="left.gif"><img src="shim.gif" alt=""
    height="1" width="1"></td>
    <td width="2%" valign="top"> ALL CONTENT </td>
    <td width="49%" background="right.gif"><img src="shim.gif" alt=""
    height="1" width="1"></td>
    </tr>
    </table>

    This seems to work perfectly, however I'm slighlty unsure as the numbers
    don't add up. Say my Content in the middle cell is a 750 pixel wide nested
    table, this would obviously mean that the percentage are not as described.
    Is there a chance that certain browsers will choke on this code? and maybe
    not display the middle cell in the middle of the page?
     
    luke, Oct 20, 2004
    #1
    1. Advertising

  2. luke

    Kris Guest

    In article <cl695d$qce$>,
    "luke" <> wrote:

    > I need to have two different backgrounds, one on the left and one on the
    > right of the screen, with the main content centered in the browser. This is
    > the code I have come up with
    >
    > <table border="0" cellpadding="0" cellspacing="0" width="100%">
    > <tr>
    > <td width="49%" background="left.gif"><img src="shim.gif" alt=""
    > height="1" width="1"></td>
    > <td width="2%" valign="top"> ALL CONTENT </td>
    > <td width="49%" background="right.gif"><img src="shim.gif" alt=""
    > height="1" width="1"></td>
    > </tr>
    > </table>
    >
    > This seems to work perfectly, however I'm slighlty unsure as the numbers
    > don't add up. Say my Content in the middle cell is a 750 pixel wide nested
    > table, this would obviously mean that the percentage are not as described.
    > Is there a chance that certain browsers will choke on this code? and maybe
    > not display the middle cell in the middle of the page?


    Wait, you mean, all that when this will do?

    CSS:
    body {
    color: #000;
    background: url("750pxwidegreenblock.png") #0000cc repeat-y;
    text-align: center;
    }
    #content {
    width: 750px;
    margin: 0 auto;
    text-align: left;
    color: #000;
    background: green;
    }

    HTML:
    <body>
    <div id="content">
    Whatever content you have.
    </div>
    </body>

    --
    Kris
    <> (nl)
     
    Kris, Oct 20, 2004
    #2
    1. Advertising

  3. luke

    luke Guest

    "Kris" <> wrote in message
    news:4all.nl...

    >
    > Wait, you mean, all that when this will do?


    Wait, I think you misread my post!
     
    luke, Oct 20, 2004
    #3
  4. luke

    Kris Guest

    In article <cl6aqo$vc6$>,
    "luke" <> wrote:

    > > Wait, you mean, all that when this will do?

    >
    > Wait, I think you misread my post!


    Maybe. So now what?

    --
    Kris
    <> (nl)
     
    Kris, Oct 20, 2004
    #4
  5. luke

    jmm-list-gn Guest

    luke wrote:
    > <td width="49%" background="left.gif"><img src="shim.gif" alt=""
    > <td width="2%" valign="top"> ALL CONTENT </td>
    > <td width="49%" background="right.gif"><img src="shim.gif" alt=""
    > This seems to work perfectly, however I'm slighlty unsure as the numbers
    > don't add up.
    >

    My math says that 49 + 2 + 49 = 100. Seems to add up.

    > Say my Content in the middle cell is a 750 pixel wide nested
    > table, this would obviously mean that the percentage are not as described.
    >

    Why do you care? You already ignore the percentages to get an
    expandable middle section. If the total image widths exceed the viewable
    area, the table expands beyond the view.
    You'd have to view the result with different browsers to verify how
    they handle it.

    --
    jmm dash list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    jmm-list-gn, Oct 20, 2004
    #5
  6. luke wrote:

    > I need to have two different backgrounds, one on the left and one on
    > the right of the screen, with the main content centered in the
    > browser. This is the code I have come up with


    Join the two backgrounds together using a graphics program then use
    Kris' example with this single background.

    --
    frostie
    http://brightonfixedodds.net
     
    Robert Frost-Bridges, Oct 21, 2004
    #6
    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. NWx
    Replies:
    1
    Views:
    354
    Ivan Demkovitch
    Feb 11, 2004
  2. UJ
    Replies:
    4
    Views:
    549
  3. Joe
    Replies:
    71
    Views:
    1,482
    JEDIDIAH
    Jun 24, 2004
  4. news.rcn.com
    Replies:
    1
    Views:
    9,815
    Chris Smith
    Jul 12, 2004
  5. Phillip Roncoroni
    Replies:
    14
    Views:
    1,143
    Toby A Inkster
    Apr 5, 2004
Loading...

Share This Page