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

DanInMa

05-06-2011, 05:09 PM

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/masthead/y2011/clubs/bg/bos_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.

patsfans

05-06-2011, 06:20 PM

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 :)

DanInMa

05-06-2011, 06:39 PM

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.

patsfans

05-06-2011, 08:39 PM

Thanks for the assistance. I just sent you a DM with some more information, so just let me know if it came through.

patsfans

05-06-2011, 10:15 PM

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.