positioning a BG of a table column

[Troylegra]

yes... I am still using tables and hopefully there are a few of you who are as well

my question is this... not too long ago I cam e across the seal site - http://seal.com (great fan) and I notices how there are the glowing edges like a frame.... that idea has stayed with me and I want to make a site with a frame like demask around it...

but when I put my table bg image in that column the right side is fine but the left side is fickle to the size of the browser window... it floats around

I noticed in the source code for the seal table they use class (class="bgLeft Glow" or something like that)

I have used CSS for type, forms & various other things but I have yet to use a class or positioning... so I do not get how this would stablelize the left column BG image

I have been racking my brain for 2 hours... any input would be greatly appreciated

thanx!

[Shyflower]

I have used CSS for type, forms & various other things but I have yet to use a class or positioning... so I do not get how this would stablelize the left column BG image

I have been racking my brain for 2 hours... any input would be greatly appreciated

thanx!

The class attribute would stabilize the image by defining the width of the table column.

The tag you would use is:

.myclass {width: *px}

with * being the pixel width that you want the table column to be.

You can use this class for both sides of the table, provided you want both sides to be equal in width. Since both images used in the example you gave are 1200 pixels wide, I'd guess that the author must also have had some "float" properties built into their css.

[martin³]

Using the example of Seal.com, this is the CSS used to display and place the glow:

.bgGlowLeft {
	background-image: url(/global_images/bg/glowLeft.jpg);
	background-repeat: repeat-y;
	background-position: right;
}

This means, the table cell that holds the image (glow) is of variable width, and is assigned the graphic as background image. The image is actually just one pixel high and is repeated in y-direction. Within the cell the image is aligned to the right side.
Thats all that is to it, really straight forward

Hope this helps.

[Shyflower]

Using the example of Seal.com, this is the CSS used to display and place the glow:

.bgGlowLeft {
	background-image: url(/global_images/bg/glowLeft.jpg);
	background-repeat: repeat-y;
	background-position: right;
}

This means, the table cell that holds the image (glow) is of variable width, and is assigned the graphic as background image. The image is actually just one pixel high and is repeated in y-direction. Within the cell the image is aligned to the right side.
Thats all that is to it, really straight forward

Hope this helps.

You are so right. Good grief my head must be up me you-know-what today!

However, a table cell width will need to be defined, otherwise the cells will collapse (won't they?). Correct me again if I'm wrong here... I seem to be having one of those days!

[martin³]

No, you do not have to define a width for a table cell, quite the opposite, if you want it to stretch according to the window size, you must not. The table itself however, has a width of 100% to fill the whole window.

This is the code used here:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#202020" class="bgGlowLeft">&nbsp;</td>
    <td width="760" align="center" valign="top" bgcolor="#333333"></td>
    <td bgcolor="#202020" class="bgGlowRight">&nbsp;</td>
  </tr>
</table>

[Shyflower]

No, you do not have to define a width for a table cell, quite the opposite, if you want it to stretch according to the window size, you must not. The table itself however, has a width of 100% to fill the whole window.

This is the code used here:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#202020" class="bgGlowLeft">&nbsp;</td>
    <td width="760" align="center" valign="top" bgcolor="#333333"></td>
    <td bgcolor="#202020" class="bgGlowRight">&nbsp;</td>
  </tr>
</table>

Actually, by using the nbsp; you did define the width of the table cell by one character. Depending upon how wide you want the table cell, you can also define the width by using em's, percentages or pixels. A definition is, in all cases a definition.

Still, it is my opinion that width is better defined within the style sheet. The nbsp; character is meant to keep portions of text on the same line, not to make table cells a character wide.

Also, when I give advice, I try to make sure that it will validate. The terms valign, and align have been deprecated by the W3C and are no longer valid html.

[martin³]

Just for the record, the code for the tables i posted was directly taken from seal.com, because this was the example we talked about earlier. So yes you are right it is not a perfect exemplar. All i wanted to show that way is that you do not always set a width of a table cell. And you can deliberately omit the   if it were not for some browsers not showing a background of a cell if it is totally empty. Its not used to actually set a width.
If you want you can try yourself in a live example.

Hope i kind of brought across what i wanted to say

[Troylegra]

well thank you both for being so helpful... I will play around with it

thanx!!