SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot Troylegra's Avatar
    Join Date
    Nov 2002
    Location
    NYC
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning a BG of a table column

    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!
    --

    T

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,054
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Troylegra

    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.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Germany
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using the example of Seal.com, this is the CSS used to display and place the glow:
    Code:
    .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.

  4. #4
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,054
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by martin³
    Using the example of Seal.com, this is the CSS used to display and place the glow:
    Code:
    .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!
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Germany
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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>

  6. #6
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,054
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by 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:
    Code:
    <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.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Germany
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 &nbsp; 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

  8. #8
    SitePoint Zealot Troylegra's Avatar
    Join Date
    Nov 2002
    Location
    NYC
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well thank you both for being so helpful... I will play around with it

    thanx!!
    --

    T


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •