http://www.barrdisplay.com/
Hey everyone - So the site I am working on has a header background that extends off the screen to the right.. My issue is that horizontal scrolling now occurs because of this.
My #Header has a width of 1450px - which is causing this issues.
How can I fix this issue?
Greg
use in your css
body{
overflow-x:hidden;
}
Note:It will be good to have a read and then use
http://css-tricks.com/the-css-overflow-property/
Header is a div box. If it is set to 1450 then the div is that wide and causing the horizontal scrolling. Set it to something smaller or a percent (like 100% which will go to the end of the page what ever size it may be) and the background will fill it in to that point.
If you need the background to stretch the entire way, then put the header background as a background for the page and tell it to not repeat and place the center of the image in the center of the screen.
Related
I have an Image that is supposed to be half hidden on media query mobile screen. it is set as position: absolute and left: 50% so the half side is hidden in the screen, but when I do this, it creates a space at the right side, creating an overflow, which is not good for the appearance. can this be fixed? or is there a right way implementing it? I've seen other sites have this kind of sections but the scroll the whitespace on the right doesn't appear? or is the overflow hidden for the body just disabled?
I've provided a visual on the problem, hope you can help me with this. still learning CSS.
the black one is the screen, purple one is the new width and the red one is the image. thanks in advance.
You can try this:
html
body {
overflow-x:hidden;
width: 100%;
}
It will force the site to be 100% of the available space and hide any horizontal scrolling.
I'm trying to position an image on my website that is wider than the resolution, which creates a horizontal scroll bar every time. I know someone who has a site with an image wider than the screen but his site doesn't cause you to scroll.
Does anyone know a code or a fix to the code that I can add to make the page unscrollable horizontally?
Thanks!
Add overflow-x: hidden to your <html> tag, or set the image as background-image instead, if the image is for design purpose and no content.
body {
overflow-x:hidden;
}
This is the problem
http://screencast.com/t/Dgfd5vTeEY
This is the site
http://eotomarketingsystems.com/
I have looked everywhere but the only method i got the background image to be full width. was by using the method here: CSS Tricks—Full Background Image,
but it was made background-image fixed which messed everything up. is there a simpler way to just make it reach that area after you scroll to the right?
Now Define min-width in your body css as like this
if your main wraper width is 980px;
than define your
body{
min-width:980px;
}
I'm making a webpage where I have a div ("container") that is a parent to the div "rounded". For some odd reason, the webpage doesn't let me scroll down even though both of the divs' height are larger than the screen.
Here's a jFiddle with the components that aren't working out: http://jsfiddle.net/pmg92/19/
Any ideas as to why this isn't working?
You need to take the position:fixed off the .container so that it allows the page to be scrollable
EDIT
Check this out here http://jsfiddle.net/pmg92/23/ I think this is what you are looking for. I took out the non relevant css so don't just copy and paste to yours. I eliminated your background rounded image in place of using border-radius because by using a background image you can't really shrink or expand depending on content. This won't work on older browsers unless you use webkits and so on.
If you want to use an image I would suggest slicing the image between a top, bottom, and middle. The top would contain the top section with the radii. The middle would be 1px tall that repeats vertical as needed. The bottom would contain the bottom section with the radii.
The problem is that you have the position of the container fixed.
I want to modify the stylesheet on my website so that the navigation remains in the middle, but instead of just 'hanging' from the centre, I want the dark grey to expand all the way to the right and left of it.
I was wondering how i could go about this? So far, the only way I am able to get close to this is by shifting the navigation to the left, and the dark grey background colour goes all the way to the right.
My website is www.peach-designs.com
If you wish me to post my stylesheet's here then let me know. Hopefully you can use Web Developer tool for now or Firebug or something.
Hope you can help anyway,
Kind Regards,
Snakespan
you can use
width:100%
for the wrapper div to make it fill the page width
and
overflow:hidden;
for the landscape div
and
margin-right:auto;
margin-left:auto;
for the nav div to put it in the center of the wrapper div
The banner div is wrapped in div.wrapper and this has a fixed size. You could either tomake the wrapper div have width:100% or rearrange things so it does not constrain the navigation.