To add to Will's suggestion (which sounds very good to me as well), you could also then do some fancy shmancy things like set your margins around the second DIV to percentages, so that it does not matter what size the browser window is set to or the screen resolution.
You can also set the transparency of the second DIV, if you want, so that it is not pure white, but the background photo "bleeds through" a bit. This can be a very effective and striking technique. Don't ask me how to do all this, though-it's been too long since I did it. I just know it can be done. There are plenty of references out there to give you the how-tos. HTH, Chuck Beck Sr. Technical Writer | Infor | Office: 614.523.7302 | [EMAIL PROTECTED] -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Will Sansbury Sent: Wednesday, December 05, 2007 15:07 To: 'Dick Margulis'; [email protected] Subject: Re: [TCP] CSS layout question I'd approach this a little differently. I would use the full photograph as the background on BODY (or a top level container DIV), then position over it a DIV with a white background. Anytime you mix your methods of layout (by putting some in the CSS and some elsewhere, such as the HTML or the images) things get trickier. They're also a lot more likely to break that way (if the content exceeds the box on the photo, for example; with a white background DIV, the DIV can grow to accommodate the content). Will Sansbury > -----Original Message----- > From: [EMAIL PROTECTED] > [mailto:[EMAIL PROTECTED] On Behalf Of Dick Margulis > Sent: Wednesday, December 05, 2007 2:50 PM > To: [email protected] > Subject: [TCP] CSS layout question > > I'm trying to lay out a fairly tricky page for a client and I'm > scratching my head as to how to approach it. > > Here's the situation: > > The background for the page is a photograph in the center of which is > a white rectangle where the content will go. The photo is big enough > to fill the largest screen (1600 x 1200), and of course I can slice it > up as needed. The critical area in the middle is about 700 x 700, > meaning it won't quite fit on an 800 x 600 screen without scrolling. > > What I'd LIKE to be able to do, if I could come up with a way to do > it, is ensure that the page is centered in the browser window, with > image background lost equally on left and right for browsers smaller > than 1600 wide, and flush to the bottom of the browswer window, with > excess image cut off at the top for browsers shorter than 800 high. > > I'm thinking there must be some way to do this in CSS. If not, maybe I > can sense the browser window size and scale the page content as needed > with a server-side script, refreshing on resize. > > Any thoughts? > > Dick > > > > > ______________________________________________ > > Author Help files and create printed documentation with Doc-To-Help. > New release adds Team Authoring Support, enhanced Web-based help > technology and PDF output. Learn more at www.doctohelp.com/tcp. > > > Interactive 3D Documentation > Parts catalogs, animated instructions, and more. > www.i3deverywhere.com _______________________________________________ > > Technical Communication Professionals > > Post a message to the list: email [EMAIL PROTECTED] > > Subscribe, unsubscribe, archives, account options, list info: > http://techcommpros.com/mailman/listinfo/tcp_techcommpros.com > Subscribe (email): send a blank message to > [EMAIL PROTECTED] Unsubscribe (email): send a blank > message to [EMAIL PROTECTED] > > Need help? Contact [EMAIL PROTECTED] > > Get the TCP whole experience! http://www.techcommpros.com > ______________________________________________ Author Help files and create printed documentation with Doc-To-Help. New release adds Team Authoring Support, enhanced Web-based help technology and PDF output. Learn more at www.doctohelp.com/tcp. Interactive 3D Documentation Parts catalogs, animated instructions, and more. www.i3deverywhere.com _______________________________________________ Technical Communication Professionals Post a message to the list: email [EMAIL PROTECTED] Subscribe, unsubscribe, archives, account options, list info: http://techcommpros.com/mailman/listinfo/tcp_techcommpros.com Subscribe (email): send a blank message to [EMAIL PROTECTED] Unsubscribe (email): send a blank message to [EMAIL PROTECTED] Need help? Contact [EMAIL PROTECTED] Get the TCP whole experience! http://www.techcommpros.com ______________________________________________ Author Help files and create printed documentation with Doc-To-Help. New release adds Team Authoring Support, enhanced Web-based help technology and PDF output. Learn more at www.doctohelp.com/tcp. Interactive 3D Documentation Parts catalogs, animated instructions, and more. www.i3deverywhere.com _______________________________________________ Technical Communication Professionals Post a message to the list: email [EMAIL PROTECTED] Subscribe, unsubscribe, archives, account options, list info: http://techcommpros.com/mailman/listinfo/tcp_techcommpros.com Subscribe (email): send a blank message to [EMAIL PROTECTED] Unsubscribe (email): send a blank message to [EMAIL PROTECTED] Need help? Contact [EMAIL PROTECTED] Get the TCP whole experience! http://www.techcommpros.com
