A
Applebrown
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 's...
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td> // top left corner "1"
<td> </td> // top left horizontal "2" -- want stationary
<td> </td> // top 1px wide border to be stretched "3"
<td> </td> // top right horizontal "2" -- want stationary
<td> </td> // top right corner "1"
</tr>
<tr>
<td> </td> // top left vertical "2" -- want stationary
<td colspan="3" rowspan="3">CONTENT</td>
<td> </td> // top right vertical "2" -- want stationary
</tr>
<tr>
<td> </td> // left border 1px high to be stretched "3"
<td> </td> // right border 1px high to be stretched "3"
</tr>
<tr>
<td> </td> // bottom left vertical "2" -- want stationary
<td> </td> // bottom right vertical "2" -- want stationary
</tr>
<tr>
<td> </td> // bottom left corner "1"
<td> </td> // bottom left horizontal "2" -- want stationary
<td> </td> // bottom border 1px wide to be stretched "3"
<td> </td> // bottom right horizontal "2" -- want stationary
<td> </td> // bottom right corner "1"
</tr>
</table>
</body>
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 's...
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td> // top left corner "1"
<td> </td> // top left horizontal "2" -- want stationary
<td> </td> // top 1px wide border to be stretched "3"
<td> </td> // top right horizontal "2" -- want stationary
<td> </td> // top right corner "1"
</tr>
<tr>
<td> </td> // top left vertical "2" -- want stationary
<td colspan="3" rowspan="3">CONTENT</td>
<td> </td> // top right vertical "2" -- want stationary
</tr>
<tr>
<td> </td> // left border 1px high to be stretched "3"
<td> </td> // right border 1px high to be stretched "3"
</tr>
<tr>
<td> </td> // bottom left vertical "2" -- want stationary
<td> </td> // bottom right vertical "2" -- want stationary
</tr>
<tr>
<td> </td> // bottom left corner "1"
<td> </td> // bottom left horizontal "2" -- want stationary
<td> </td> // bottom border 1px wide to be stretched "3"
<td> </td> // bottom right horizontal "2" -- want stationary
<td> </td> // bottom right corner "1"
</tr>
</table>
</body>