Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Self formatting table cell

    Hey guys, I was looking to set up images on the left and right hand side of my site, similar to what is done here where it automatically adjusts based on the size of your monitor/window:

    http://boston.redsox.mlb.com/index.jsp?c_id=bos

    How would this be done using a table?

    Ian

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    what they did is contained the main part of the page inside of a div that is about 990 pixels wide, applied a background image to the body of the page that is much wider and basically has blank space in the middle 990pixels of the background image, then set the 990px div so it will auto center on the page.

    they arent using mutiple images, just one really big image ( its 1680 pixels wide see it here - http://boston.redsox.mlb.com//images...s_body_bg3.jpg ) that is hidden if your monitor is too small to view the entire page.

    to answer your question you would need to make a similar image, apply it as the background image of your body element, then contain your table in a div that is autocentered.

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Got you. The wierd thing is when you shrink the page, the right hand image slides with the 990w page, so it looks like it's more than one, plus they did a clickable image on the left that you only see on a higher res screen.

    So I guess the next question is, how did they do it where that right hand side image slides with the site? I'm just asking because we're trying to do something similar, and I haven't seen a good example of how it's done.

    Thanks so far for your assistance, it's much appreciated

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    the main image isnt actually going anywhere, it's just centered on the background and its a really big image, so it "looks" as if it's doing what you describe.

    the vote now image, I missed on first look. that image is in a div that is ( code wise) inside of the div that is being centered in the middle of the page ( using margin-right:auto; margin-let:auto; ) so what they did was add the div with vote now as part of the main div, positioned absolutely so it caclulates it's position from the centered div, and they made it appear on the left by giving it a left -103px in the CSS. so if the site is "squished" the vote now image is still there, it's just off the left hand side of the viewable area.

    I'm actually from Salem myself btw. Are you familiar with how to use the firebug addon for firefox? it makes it really easy to figure stuff like this out.

    Since your a local I could be persuaded to take a look at what you have already and help you work it out. Send me a private message if you want some help and ill give you my email address.

  • Users who have thanked DanInMa for this post:

    patsfans (05-06-2011)

  • #5
    New to the CF scene
    Join Date
    May 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the assistance. I just sent you a DM with some more information, so just let me know if it came through.

  • #6
    New to the CF scene
    Join Date
    May 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    the main image isnt actually going anywhere, it's just centered on the background and its a really big image, so it "looks" as if it's doing what you describe.

    the vote now image, I missed on first look. that image is in a div that is ( code wise) inside of the div that is being centered in the middle of the page ( using margin-right:auto; margin-let:auto; ) so what they did was add the div with vote now as part of the main div, positioned absolutely so it caclulates it's position from the centered div, and they made it appear on the left by giving it a left -103px in the CSS. so if the site is "squished" the vote now image is still there, it's just off the left hand side of the viewable area.

    I'm actually from Salem myself btw. Are you familiar with how to use the firebug addon for firefox? it makes it really easy to figure stuff like this out.

    Since your a local I could be persuaded to take a look at what you have already and help you work it out. Send me a private message if you want some help and ill give you my email address.
    Kudos to DanInMA who just helped me resolve this issue


  •  

    Posting Permissions

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