Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
CSS & HTML: Large centered image witch should not produce a horizontal scrollbar
Bottom of Page1 to 5 of 5
-
Hello,
I want a large centered image witch should not produce a horizontal scrollbar on smaller screen/browser resolution. I can not put it into the body background, because I need this for an other background image. The image is 1060px width and my content is 990px wide. Scrollbars should only appear if the browser is smaller than 990px. It seems to work with negative margin or relative position on the left side, but not on the right side.
You can found an example here: http://intranet.factor4.at/css/negative-margin-right.html
Have anyone a idea to get this work?
Thank you! -
- CommentAuthorCMPCreations
- CommentTimeAug 19th 2009
You have to be a little more specific...what exactly are you trying to accomplish here?
In the meantime, look up the css property "overflow". when you apply the value of "hidden" it will prevent scroll bars from appearing -
When you look at my example and resize your browser to be a little smaller than the image (1060px with beautiful clouds ;) ), you get a horizontal scrollbar at the bottom. I´m searching for a solution to get this scrollbar only when you resize the browser again a little smaller so that it is smaller than my content div (990px).
When I add overflow:hidden; to my content div, the image is cut off. Adding overflow:hidden; to the body tag results in getting no more scrollbars at all. This is not what I want. Adding it to the image has no effect.
Any other ideas? Thanks! -
- CommentAuthorCMPCreations
- CommentTimeAug 19th 2009
hmmm...I don't think you'll be able to get rid of the scroll bars then because the <img> is on the page and it has a specific width and height so once your browser window's width is less than that img's width value, you'll run into this problem.
I hate to use more markup than needed but you might have to throw in another wrapping div and then make your image the background :-[ -
I tried to set the body to overflow:hidden; and then #content back to overflow:visible;. But that don´t work because overflow is not inherit to it´s childes. That would make no sense BTW.
An additional div would do the job. But I also try to keep the markup as clean as possible. Can´t wait for CSS3 and multiple background-images per element. ;)
1 to 5 of 5