khaos337 Posted November 10, 2011 Share Posted November 10, 2011 I'm not 100% sure if this belongs in the HTML forum, or CSS, but I figured I'd start here. Basically, I have a page that has a width of 900px and is centered in the browser view. I want to put a shadow in the left and right margins of the page to give it some depth. My problem is that the shadow increases each side of the page by 150px and when viewed at a smaller resolution, say 1024x768, I don't want it to show a horizontal scroll bar. I found three ways of doing this, but all have issues. The first is creating a div with no width attribute and set my shadows image as the background. The problem with this is that if you don't specify a width, because of a difference in how some browsers center objects, depeding on the size of the window the image can be one pixel off causing any images put right up against either left or right margin to show a line of blank space. The second is to add the image to a div with the left margin of the image being -150px, but that still causes the window to scroll to the right when it is smaller than 1200px wide. The third is to create the div as 1200px which is no good because when the window is less than 1200px, it does not collapse the extra 150px on the left side and still causes it to scroll to the right. Here is a link to some of the working code, which showcases option 2: http://jsfiddle.net/phURU/ If anyone could suggest a better way of doing this it would be greatly appreciated! Link to comment Share on other sites More sharing options...
Ingolme Posted November 10, 2011 Share Posted November 10, 2011 You could make the shadow background image continuous rather than stopping right at the edges, then use it as a background in a wrapper without a width attribute. This would work if you have the fixed-width element with an opaque background. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 10, 2011 Share Posted November 10, 2011 this is how i would do it <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>Sean's Practice</title><link href="site.css" type="text/css" rel="stylesheet" /></head><body> <div class="pageshadow"> <div class="pageshadow_inner"> <!--<img src="http://www.seanspractice.com/new/images/shadow-template.png" style="position: absolute; left: -150px;" /> <img src="http://www.seanspractice.com/new/images/bamboo.png" style="position: absolute; left: 0px;" />--> <div class="wrapper"> <div class="push"> </div> </div> <div class="footer"> Home | Bio | My Services | Contact | New Patients <p>© 2011 SeansPractice.com</p> </div> </div> </div></body></html> div.pageshadow{ position: relative; margin: 0px auto; background: url(http://www.seanspractice.com/new/images/shadow-template.png) center top no-repeat; height: 100%; /*width: 900px;*/ overflow: visible; z-index:1; min-width:900px;}.pageshadow_inner {background: url(http://www.seanspractice.com/new/images/bamboo.png) left top no-repeat; height: 100%; width:900px; margin:0 auto;} Link to comment Share on other sites More sharing options...
khaos337 Posted November 10, 2011 Author Share Posted November 10, 2011 dsonesuk - I had tried the min-height attribute, but similar to option 1, you get the 1 pixel offset in google chrome, and probably some older IE browsers (haven't tested those yet) Inglome - How would you make the shadow background image continuous, and make it a fixed width without setting off the scroll bar? I think i understand where you're going with this, but I'm not sure how exactly to implement it. Link to comment Share on other sites More sharing options...
Ingolme Posted November 10, 2011 Share Posted November 10, 2011 Make it in photoshop. A countinuous shadow would go all along behind the content box. Background images don't make a scrollbar appear. The fixed width of the content only needs to be 900px. Link to comment Share on other sites More sharing options...
khaos337 Posted November 10, 2011 Author Share Posted November 10, 2011 Make it in photoshop. A countinuous shadow would go all along behind the content box. Background images don't make a scrollbar appear. The fixed width of the content only needs to be 900px. The problem with this is that I then need to make the pageshadow div have no fixed width. It does work, but being that the pageshadow div has no fixed width, again i run into the centering offset problem with chrome. Link to comment Share on other sites More sharing options...
Ingolme Posted November 10, 2011 Share Posted November 10, 2011 OK, you have a background image with a fixed width. You have a box with a fixed width. The box is in front of the shadow. The center offset wouldn't be a problem if the shadow goes behind the box and not just at the edges. Link to comment Share on other sites More sharing options...
khaos337 Posted November 10, 2011 Author Share Posted November 10, 2011 OK, you have a background image with a fixed width. You have a box with a fixed width. The box is in front of the shadow. The center offset wouldn't be a problem if the shadow goes behind the box and not just at the edges. Sorry, went back and read what you wrote initially. It didn't click at first but now I understand what you're saying. My problem is that the background of the box on top of the shadow can not be opaque because the shadow is layered on top of a seamless texture which is the background for the body so it give the illusion that it is underneath but in actuality is not. Link to comment Share on other sites More sharing options...
Ingolme Posted November 10, 2011 Share Posted November 10, 2011 You could apply the same texture that's on the body onto the element. It shouldn't need to be seamless if it has a shadow. Link to comment Share on other sites More sharing options...
khaos337 Posted November 10, 2011 Author Share Posted November 10, 2011 It does because the shadow doesn't run down the entire page. Take a look at the jsfiddle link i posted if you want to see what it looks like Link to comment Share on other sites More sharing options...
Ingolme Posted November 10, 2011 Share Posted November 10, 2011 I see. The effect is to look like part of the page was cut out and lifted above the rest.But in that case, one pixel offset from centering missing shouldn't even be noticeable. Link to comment Share on other sites More sharing options...
khaos337 Posted November 10, 2011 Author Share Posted November 10, 2011 It isn't with the bamboo on the left side, but the design has a photo which is flush up against the right side that ends up being no good with the offset Link to comment Share on other sites More sharing options...
Ingolme Posted November 10, 2011 Share Posted November 10, 2011 Hmmm, I can't think of a decent solution, then. It's all how the browser deals with centering content. You could put the shadow inside the container and add padding to it, but that will increase the width, and maybe have the shadow slightly off-center. Link to comment Share on other sites More sharing options...
khaos337 Posted November 10, 2011 Author Share Posted November 10, 2011 Ultimately I think I'm just going to have to make the images up against the border and the shadow itself one image so that the browser does not figure into the equation. It seems like a "dirty" solution, but until i find a better one I suppose it will have to suffice. Thanks for the thought and effort! Link to comment Share on other sites More sharing options...
dsonesuk Posted November 10, 2011 Share Posted November 10, 2011 what IF you create to separate left right images, place these separate container elements, WITHIN the wrapper element, and use position absolute to position them outside the wrapper container, tight against its border. The position absolute will take these of the flow from the document so you don't have to worry about scrollbars, and these elements will be tight against edge relative to wrapper, and not rely on the center positioning of background images. Link to comment Share on other sites More sharing options...
Ingolme Posted November 10, 2011 Share Posted November 10, 2011 I did some tests to be sure if I was right: Despite being out of the page flow, it does still add scroll bars to the document. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 10, 2011 Share Posted November 10, 2011 OK! then all you have to is use an outer container, with overflow-x: hidden; min-width: 900px; which will result in no scrollbars, until smaller than required width, like it would normally do. Link to comment Share on other sites More sharing options...
khaos337 Posted November 10, 2011 Author Share Posted November 10, 2011 Yep, still adds the scroll bars. It works for the left margin seemingly, but not the right. Link to comment Share on other sites More sharing options...
khaos337 Posted November 10, 2011 Author Share Posted November 10, 2011 OK! then all you have to is use an outer container, with overflow-x: hidden; min-width: 900px; which will result in no scrollbars, until smaller than required width, like it would normally do. won't using overflow-x: hidden hide the image though? Link to comment Share on other sites More sharing options...
ShadowMage Posted November 10, 2011 Share Posted November 10, 2011 won't using overflow-x: hidden hide the image though?Well, yeah, but only when the browser window is too small to contain it. That's what you want isn't it? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 10, 2011 Share Posted November 10, 2011 Which image? if you are talking about the shadow images, then if they are used as background images they would be hidden as the screen got smaller, its only when the screen got smaller than the content area width ,then scrollbars would appear. The solution stated gives you the same effect. Link to comment Share on other sites More sharing options...
khaos337 Posted November 10, 2011 Author Share Posted November 10, 2011 Well, yeah, but only when the browser window is too small to contain it. That's what you want isn't it? I was under the impression that overflow: hidden would hide anything that overflows from the container, regardless of browser size. I will give it a shot. Link to comment Share on other sites More sharing options...
ShadowMage Posted November 10, 2011 Share Posted November 10, 2011 It does, but if the container is the same size as the window, it will hide anything that flows outside of the window, thus preventing scrollbars. You don't want to apply a width to this outer container, so that it occupies all available horizontal space (width). Link to comment Share on other sites More sharing options...
dsonesuk Posted November 10, 2011 Share Posted November 10, 2011 The outer container will stretch to the total width of page, anything wider than 900px set by min-width: 900px, and total width of browser window even while you minimise it, will be hidden, as it goes below 900px width the scrollbars appear. Link to comment Share on other sites More sharing options...
khaos337 Posted November 10, 2011 Author Share Posted November 10, 2011 It does, but if the container is the same size as the window, it will hide anything that flows outside of the window, thus preventing scrollbars. You don't want to apply a width to this outer container, so that it occupies all available horizontal space (width). The problem with that though is that if you don't specify a width to the outer container, you run into the centering offset issue, and that is my whole problem. Everything has to have a fixed width to render correctly in all browsers when centered. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.