[css-d] Tricky layout: centred site with bg images stretching to the left
Hello, I am working on a site build and cannot work out how to code a design feature _if_ the site has to be centred. I wonder if anyone knows how to do this: (I have the go ahead from my superior to make the site left-aligned, but this is a compromise. the site needs to be centred for it to be viewable at 800X600. I'm too curious to let this problem go!) The layout is a centred box. There are 3 content sections in rows. Each has a heading and each has a horiztonal rule after it. Both the heading and the horizontal rule have background shading that stretches out to the left edge of the screen. If the site is centred, how can I make sure that these background images will repeat to the leftmost edge of the viewport when the browser is resized? or if the site is viewed on a large resolution monitor (21 plus). and, if the browser is resized to 800X600 the site must be centred in order to fit, as it is 798px wide. Any tips are most welcome! I've tried using absolute positioning but I think I''m too confused now! Kind regards, Simone -- Simone Hutchinson * e: [EMAIL PROTECTED] m: +44 (0)7791 010919 w: http://www.wearevivo.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tricky layout: centred site with bg images stretching to the left
Can we view the problem site? Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Simone Hutchinson Sent: Wednesday, June 20, 2007 5:35 AM To: css-d@lists.css-discuss.org Subject: [css-d] Tricky layout: centred site with bg images stretching to the left Hello, I am working on a site build and cannot work out how to code a design feature _if_ the site has to be centred. I wonder if anyone knows how to do this: (I have the go ahead from my superior to make the site left-aligned, but this is a compromise. the site needs to be centred for it to be viewable at 800X600. I'm too curious to let this problem go!) The layout is a centred box. There are 3 content sections in rows. Each has a heading and each has a horiztonal rule after it. Both the heading and the horizontal rule have background shading that stretches out to the left edge of the screen. If the site is centred, how can I make sure that these background images will repeat to the leftmost edge of the viewport when the browser is resized? or if the site is viewed on a large resolution monitor (21 plus). and, if the browser is resized to 800X600 the site must be centred in order to fit, as it is 798px wide. Any tips are most welcome! I've tried using absolute positioning but I think I''m too confused now! Kind regards, Simone -- Simone Hutchinson * e: [EMAIL PROTECTED] m: +44 (0)7791 010919 w: http://www.wearevivo.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tricky layout: centred site with bg images stretching to the left
Hello Rick, I realised i sent a reply to Bert personally instead of to the list - so I repeat what I said to him here as it addresses your request: Hello Bert, Thank you for your help; I understand without code visualisation is difficult! However for legal reasons I cannot post code up. (the site is not live yet) Your advice hit on an essential point - the crux of my problem is that the h2s and hr /s have to be within the wrapping container. the site is to be a case study in creating accessible but beautiful ;-) websites. I need to maintain meaningful structures in my source code, so I can't place the h2 and hr / outwith the parent container. if at all possible... * * * * Heading * * * * * Heading * * * * * - This is a diagram to demonstrate the layout. the represent the parent container div. the represent the viewport. The | represent the background image on the Heading. Hope this helps! Regards, Simone On 20/06/07, Rick Faircloth [EMAIL PROTECTED] wrote: Can we view the problem site? Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Simone Hutchinson Sent: Wednesday, June 20, 2007 5:35 AM To: css-d@lists.css-discuss.org Subject: [css-d] Tricky layout: centred site with bg images stretching to the left Hello, I am working on a site build and cannot work out how to code a design feature _if_ the site has to be centred. I wonder if anyone knows how to do this: (I have the go ahead from my superior to make the site left-aligned, but this is a compromise. the site needs to be centred for it to be viewable at 800X600. I'm too curious to let this problem go!) The layout is a centred box. There are 3 content sections in rows. Each has a heading and each has a horiztonal rule after it. Both the heading and the horizontal rule have background shading that stretches out to the left edge of the screen. If the site is centred, how can I make sure that these background images will repeat to the leftmost edge of the viewport when the browser is resized? or if the site is viewed on a large resolution monitor (21 plus). and, if the browser is resized to 800X600 the site must be centred in order to fit, as it is 798px wide. Any tips are most welcome! I've tried using absolute positioning but I think I''m too confused now! Kind regards, Simone -- Simone Hutchinson * e: [EMAIL PROTECTED] m: +44 (0)7791 010919 w: http://www.wearevivo.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Simone Hutchinson * e: [EMAIL PROTECTED] m: +44 (0)7791 010919 w: http://www.wearevivo.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tricky layout: centred site with bg images stretching to the left
Hi Simone, Is something like this what you are trying to achieve? http://pfmoon.com/ This one was tricky for me and I came up with a less than perfect solution (but with the budget this client was working with, I couldn't hammer at it for hours to try to get something proper worked out). If this is the effect you're looking for, it might serve as a good starting point for implementing it. Brian __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tricky layout: centred site with bg images stretching to the left
Simone Hutchinson wrote: ... * * * * Heading * * * * * Heading * * * * * - This is a diagram to demonstrate the layout. the represent the parent container div. the represent the viewport. The | represent the background image on the Heading. ... ... The layout is a centred box. There are 3 content sections in rows. Each has a heading and each has a horiztonal rule after it. Both the heading and the horizontal rule have background shading that stretches out to the left edge of the screen. If the site is centred, how can I make sure that these background images will repeat to the leftmost edge of the viewport when the browser is resized? or if the site is viewed on a large resolution monitor (21 plus). and, if the browser is resized to 800X600 the site must be centred in order to fit, as it is 798px wide. Maybe for the heading http://www.satzansatz.de/cssd/totheleft.html Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tricky layout: centred site with bg images stretching to the left
Ingo, Many thanks! Your solution looks suitable; I will implement the method today and let you all know how it went. I think it might work with the hr / too. Fingers crossed. This list is a constant source of valuable information: sincere thanks to all contributors. Regards, Simone On 20/06/07, Ingo Chao [EMAIL PROTECTED] wrote: Simone Hutchinson wrote: ... * * * * Heading * * * * * Heading * * * * * - This is a diagram to demonstrate the layout. the represent the parent container div. the represent the viewport. The | represent the background image on the Heading. ... ... The layout is a centred box. There are 3 content sections in rows. Each has a heading and each has a horiztonal rule after it. Both the heading and the horizontal rule have background shading that stretches out to the left edge of the screen. If the site is centred, how can I make sure that these background images will repeat to the leftmost edge of the viewport when the browser is resized? or if the site is viewed on a large resolution monitor (21 plus). and, if the browser is resized to 800X600 the site must be centred in order to fit, as it is 798px wide. Maybe for the heading http://www.satzansatz.de/cssd/totheleft.html Ingo -- http://www.satzansatz.de/css.html -- Simone Hutchinson * e: [EMAIL PROTECTED] m: +44 (0)7791 010919 w: http://www.wearevivo.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tricky layout: centred site with bg images stretching to the left
Hello, Ingo's method worked a treat for both the hr / and the h2 elements in IE6/win, IE7/win, Opera 9/Win and Ffox 2/Win. (Haven't tested in Safari or Opera , or IE5, for Mac OS X yet). Thanks again, Simone On 20/06/07, Simone Hutchinson [EMAIL PROTECTED] wrote: Ingo, Many thanks! Your solution looks suitable; I will implement the method today and let you all know how it went. I think it might work with the hr / too. Fingers crossed. This list is a constant source of valuable information: sincere thanks to all contributors. Regards, Simone On 20/06/07, Ingo Chao [EMAIL PROTECTED] wrote: Simone Hutchinson wrote: ... * * * * Heading * * * * * Heading * * * * * - This is a diagram to demonstrate the layout. the represent the parent container div. the represent the viewport. The | represent the background image on the Heading. ... ... The layout is a centred box. There are 3 content sections in rows. Each has a heading and each has a horiztonal rule after it. Both the heading and the horizontal rule have background shading that stretches out to the left edge of the screen. If the site is centred, how can I make sure that these background images will repeat to the leftmost edge of the viewport when the browser is resized? or if the site is viewed on a large resolution monitor (21 plus). and, if the browser is resized to 800X600 the site must be centred in order to fit, as it is 798px wide. Maybe for the heading http://www.satzansatz.de/cssd/totheleft.html Ingo -- http://www.satzansatz.de/css.html -- Simone Hutchinson * e: [EMAIL PROTECTED] m: +44 (0)7791 010919 w: http://www.wearevivo.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
