Border using Tables not doing what I expected.. help

Discussion in 'HTML' started by Applebrown, May 21, 2004.

  1. Applebrown

    Applebrown Guest

    Hi, I'm not new to HTML, but this latest problem has me puzzled. I'm trying
    to use the pieces of a border I created around my web page using tables. Not
    so hard right? This may look long but it's really simple.

    This is how I want the border and content to appear graphically:
    1233333321
    2 cccccccc 2
    3 cccccccc 3
    3 cccccccc 3
    3 cccccccc 3
    2 cccccccc 2
    1233333321

    Each number 1 is a separate corner .gif. Each 2 is a small .gif segment that
    needed to be separate due to the gradient detail. I want each number 1 and 2
    stationary. Each 3 is a single-wide or high .gif that I want expanded if the
    browser window or content expands... seemed simple enough. I wanted the
    content "c" in the middle, which is all in a nested table inside the <td> of
    the border table.

    What happens is that instead of being stationary even though I set a width
    and height, each "2" gets repeated over and over the length of the window or
    content instead of the "3" that I prefer. The corners at "1" fortunately
    work as intended.

    Any help is much appreciated!

    Here's my table (pixel.gif is a 1x1 transparent .gif -- "toplefthor,
    toprighthor, etc. = the "2"s in my text diagram):

    <body>
    <!-- BEGIN BORDER -->
    <table align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td background="images/border_topleft.gif"><img src="images/pixel.gif"
    width="6" height="6"></td>
    <td background="images/border_toplefthor.gif"><img
    src="images/pixel.gif" width="22" height="6"></td>
    <td background="images/border_top.gif"><img src="images/pixel.gif"></td>
    <td background="images/border_toprighthor.gif"><img
    src="images/pixel.gif" width="22" height="6"></td>
    <td background="images/border_topright.gif"><img src="images/pixel.gif"
    width="6" height="6"></td>
    </tr>
    <tr>
    <td background="images/border_topleftvert.gif"><img
    src="images/pixel.gif" width="6" height="14"></td>
    <td colspan="3" rowspan="3">
    <!-- END BORDER TO BEGIN CONTENT -->

    <!-- BEGIN CONTENT -->
    <table width="778" bgcolor="black" align="center" cellpadding="0"
    cellspacing="0" "border="0"><tr><td>CONTENT</td></tr></table>
    <!-- END CONTENT -->

    <!-- CONTINUE BORDER -->
    </td>
    <td background="images/border_toprightvert.gif"><img
    src="images/pixel.gif" width="6" height="14"></td>
    </tr>
    <tr>
    <td background="images/border_left.gif"><img src="images/pixel.gif"
    width="6"></td>
    <td background="images/border_right.gif"><img src="images/pixel.gif"
    width="6"></td>
    </tr>
    <tr>
    <td background="images/border_bottomleftvert.gif"><img
    src="images/pixel.gif" width="6" height="14"></td>
    <td background="images/border_bottomrightvert.gif"><img
    src="images/pixel.gif" width="6" height="14"></td>
    </tr>
    <tr>
    <td background="images/border_bottomleft.gif"><img
    src="images/pixel.gif" width="6" height="6"></td>
    <td background="images/border_bottomlefthor.gif"><img
    src="images/pixel.gif" width="22" height="6"></td>
    <td background="images/border_bottom.gif"><img
    src="images/pixel.gif"></td>
    <td background="images/border_bottomrighthor.gif"><img
    src="images/pixel.gif" width="22" height="6"></td>
    <td background="images/border_bottomright.gif"><img
    src="images/pixel.gif" width="6" height="6"></td>
    </tr>
    </table>
    <!-- END BORDER -->

    Here's the rough generic format I'm following ... minus the &nbsp;'s...

    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;</td> // top left corner "1"
    <td>&nbsp;</td> // top left horizontal "2" -- want stationary
    <td>&nbsp;</td> // top 1px wide border to be stretched "3"
    <td>&nbsp;</td> // top right horizontal "2" -- want stationary
    <td>&nbsp;</td> // top right corner "1"
    </tr>
    <tr>
    <td>&nbsp;</td> // top left vertical "2" -- want stationary
    <td colspan="3" rowspan="3">CONTENT</td>
    <td>&nbsp;</td> // top right vertical "2" -- want stationary
    </tr>
    <tr>
    <td>&nbsp;</td> // left border 1px high to be stretched "3"
    <td>&nbsp;</td> // right border 1px high to be stretched "3"
    </tr>
    <tr>
    <td>&nbsp;</td> // bottom left vertical "2" -- want stationary
    <td>&nbsp;</td> // bottom right vertical "2" -- want stationary
    </tr>
    <tr>
    <td>&nbsp;</td> // bottom left corner "1"
    <td>&nbsp;</td> // bottom left horizontal "2" -- want stationary
    <td>&nbsp;</td> // bottom border 1px wide to be stretched "3"
    <td>&nbsp;</td> // bottom right horizontal "2" -- want stationary
    <td>&nbsp;</td> // bottom right corner "1"
    </tr>
    </table>
    </body>
    Applebrown, May 21, 2004
    #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. tshad
    Replies:
    0
    Views:
    2,241
    tshad
    Jan 31, 2005
  2. phl
    Replies:
    1
    Views:
    4,332
    Martin Jay
    Jun 8, 2006
  3. Coder
    Replies:
    1
    Views:
    685
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  4. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    border-color: #003366; border-width: 2px;

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Jul 17, 2006, in forum: HTML
    Replies:
    64
    Views:
    3,490
    Adrienne Boswell
    Jul 30, 2006
  5. Replies:
    2
    Views:
    185
Loading...

Share This Page