Re: [css-d] Overspill images outside of content area
Hi, and thanks for the reply. The issue with this the solution is that when I increase the width of' #section1 div div' (and #section2) then the rose image starts to hide behind the widened DIV. It seems to have it the way I want, which is to have the stalk of the rose to go behind some of the text then I will need to have the rose image as part of the same DIV, and the best way seems to have it as a background image, and then apply some padding, much like what Walter previously mentioned. I have taken what you showed me as an example and uploaded it to the following location. It now has the BG image as part of the DIV and has the appropriate padding. http://www.trystandsamthewedding.com/test/home4.htm It works ok in IE 7.0 so far, bit do I need to add additional protection to it against IE 6.0 browsers? (isnt there box model issues, or something?) Also, I'd like to know if the approach I am taking is the right one. :) Thanks in advance. Tryst -Original Message- From: Gunlaug Sørtun [EMAIL PROTECTED] To: [EMAIL PROTECTED] CC: css-d@lists.css-discuss.org Sent: Thu, 27 Sep 2007 1.31am Subject: Re: [css-d] Overspill images outside of content area [EMAIL PROTECTED] wrote: http://www.trystandsamthewedding.com/home2.htm image of what I want to achieve... http://www.trystandsamthewedding.com/WesiteLayout.gif Background images can't spill out of their own container, so you'll have to offset the entire container(s) if you want a stable spill-over effect. Example: http://www.gunlaug.no/tos/alien/try/test_07_0926.html Such an offset will make the page wider, but the main part will center nicely and stay within whatever width you give the main containers. I've used 'width: 720px'. regards Georg -- http://www.gunlaug.no Get a FREE AOL Email account with unlimited storage. Plus, share and store photos and experience exclusively recorded live music Sessions from your favourite artists. Find out more at http://info.aol.co.uk/joinnow/?ncid=548. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Overspill images outside of content area
[EMAIL PROTECTED] wrote: The issue with this the solution is that when I increase the width of' #section1 div div' (and #section2) then the rose image starts to hide behind the widened DIV. ...because I declared a white background on that div. Won't hide anything when the relevant background is made transparent. Check this example again... http://www.gunlaug.no/tos/alien/try/test_07_0926.html ...with changed 'width' and 'background'. http://www.trystandsamthewedding.com/test/home4.htm It works ok in IE 7.0 so far, bit do I need to add additional protection to it against IE 6.0 browsers? (isnt there box model issues, or something?) Yes, as browsers that don't follow W3C recommendations do not add the padding to the width. That means all IE/win versions older than IE6 will use the old model and need corrections/hacks. For IE6 that's only a problem when the document triggers 'quirks mode' in that version - as your page does now. I'm used to battle the box model differences, so my example will appear more or less the same in all versions of IE/win. Also, I'd like to know if the approach I am taking is the right one. It is fine apart from the potential box model problems. Readability isn't good on top of such a background though, so you may have to adjust the rose-images a bit. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Overspill images outside of content area
Hi all, I have the following website where I want to be able to have the rose flowers to spill outside of the content area. An example of what I want to finally achieve is in the image, which I have also provided the link for below. I have, in the content area, a couple of DIVs holding in the content, they are #content-wrap, #content, #main, and then the individual divs for each piece of content (i.e.'Wedding Info' and 'Location' etc). I think ideally I'd like to have an image on each content section that overflows (also like I have in the image). I have tried applying a negative horizontal to the 'background' style for the left-hand image, but that seems to cut out the image (same with the right-hand image when I apply a horizontal value that is greater that the #content DIV. Can anyone point me in the right direction as I am a relatively noob on this level of CSS :) Current website... http://www.trystandsamthewedding.com/home2.htm Stylesheet... http://www.trystandsamthewedding.com/styles/style.css image of what I want to achieve... http://www.trystandsamthewedding.com/WesiteLayout.gif Thanks in advance to those who help. Tryst Get a FREE AOL Email account with unlimited storage. Plus, share and store photos and experience exclusively recorded live music Sessions from your favourite artists. Find out more at http://info.aol.co.uk/joinnow/?ncid=548. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Overspill images outside of content area
[EMAIL PROTECTED] wrote: http://www.trystandsamthewedding.com/home2.htm image of what I want to achieve... http://www.trystandsamthewedding.com/WesiteLayout.gif Background images can't spill out of their own container, so you'll have to offset the entire container(s) if you want a stable spill-over effect. Example: http://www.gunlaug.no/tos/alien/try/test_07_0926.html Such an offset will make the page wider, but the main part will center nicely and stay within whatever width you give the main containers. I've used 'width: 720px'. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
