PDA

View Full Version : Centering content with pictures


cariva
04-26-2006, 09:52 AM
Okay, so I've read all the posts about centering content (making the webpage resize according to browser/screen resolution), but what about the graphic images? Virtually all my content is images, but when I use the 'wrapper' code on a table, and insert an image into the table, the resizing thing doesn't work on the image. I'm a frustrated designer used to using the oh-so-convenient layers!

(For an example of the problem I'm trying to solve go to http://www.carrdusschool.co.uk; works in IE, not so good in others)

dthomsen8
04-26-2006, 06:38 PM
Okay, so I've read all the posts about centering content (making the webpage resize according to browser/screen resolution), but what about the graphic images? Virtually all my content is images, but when I use the 'wrapper' code on a table, and insert an image into the table, the resizing thing doesn't work on the image. I'm a frustrated designer used to using the oh-so-convenient layers!

(For an example of the problem I'm trying to solve go to http://www.carrdusschool.co.uk; works in IE, not so good in others)

The school site looks very, very good to me. It has excellent graphics, skilled use of mouseovers, and a nice design with easy to use navigation. I tried it in Firefox, IE 6 and Opera, and it seems to me to be the same in all of those browsers.

Just what effect are you seeking to achieve? You do have a fixed with design overall, but it looks and works just great. Perhaps you could work out a design with a way to make the top banner stretch, which would let the center column of text stretch too, but I like your site just as it is.

cariva
04-26-2006, 09:44 PM
Cheers for the comments! :D
When I view the site in Firefox on an 800x600 screen it appears too magnified so that I have to scroll vertically and horizontally to see the whole page. I designed it to be viewed without scrolling (which is annoying and messes with the 'whole page' design look), so that's why I want to change it.

domedia
04-26-2006, 10:47 PM
"Centering the content" will only make the site display center in the browser horizontally.
The reason the webpage you're referring to gives horizontal scrollbars in 800*600 resolution is that it's content is wider than the viewport.

You just have to make the website narrower if you want to get rid of the scrollbars.

dthomsen8
04-27-2006, 12:32 AM
Cheers for the comments! :D
When I view the site in Firefox on an 800x600 screen it appears too magnified so that I have to scroll vertically and horizontally to see the whole page. I designed it to be viewed without scrolling (which is annoying and messes with the 'whole page' design look), so that's why I want to change it.

Your top banner is 816 pixels wide, so the site does have to scroll at 800x600 resolution.

http://www.pageresource.com/jscript/jscreen.htm provides JavaScript that detects the resolution. This can be used to provide a narrow banner for the case where the screen is narrow, avoiding scrolling.