I am working on the following website: http://91.146.110.84/~pacspeop/
I am nearing completion but have noticed that if you make the browser window smaller than the defined width of the container (960px) a scroll bar appears (as it should). However when you scroll to the right the header and footer loose any content.
Anyone any idea how I can resolve this?
Cheers
Hey now do the body min width as like this
body{
min-width:960px;
}
Related
I have a big issue, i'm using a page builder to create four button with one modal per button. I want to display the modal in full screen over the FIXED header. Where i'm wrong?
Actual image:
expectation image:
There is a link to the page if wanna see the css:
I've tried with z-index, overflow-y but nothing seems work. Thank you so much
First make sure that the header has a lower z-index than the modalbox, then make sure modalbox has display set to fixed display: fixed; with width/heigh of 100%.
Remember to set top/bottom to 0 if you want it to occupy full viewport.
I have a div sidebar which scrolls with the page on my website. Everytime the window resizes, the sidebar would overlap the page content.
Here is a demo page to show the problem:
http://wrasa.org/memberpage_demo.html
Here is the CSS code for the menubar I'm using for my page
.menubar {width: 200px;position: fixed;left: 20px;down: 200px;}
Any suggestions for fixing the problem or using a different code would be welcomed,
Thanks in advance!
As, you are using fixed positioning; div will remain fixed relative to the browser and will overlap if other content shift in the area. This happens because browser don't allocate any space to such divs.
In your problem you be solved by specifying the min-margin to left of main content, which can actually be achieved by min-width css property. just place one more to left of main content with some min width.
You can know more on this from this link
Using a percentage margin in CSS but want a minimum margin in pixels?
I cannot scroll to the bottom of a web page I am working on. My <body> is styled with overflow: auto (which I believe is just normal web page default behavior). My content is narrow and tall so a vertical scroll bar is necessary. However, when I scroll as far as the scrollbar will let me, the bottom approx 40px of my content is clipped out of the viewport and there's no way to scroll any farther. A screenshot is below (the black is just my desktop background). The box in the bottom right corner is the scroll bar itself, but there's no down arrow below if for some reason and it won't go any further. The rounded rectangle on the left is the top bit of a cancel button that is clipped. This problem occurs on a WebKit based browser on Windows, but does not happen on the Mac.
Here's my CSS situation: <body> has overflow auto and 0 padding 0 margin.
overflow: visible is the browsers default. I had to see more of your css to be able to help you, but, either way, try setting overflow to visible.
Though, I dont really think it will solve the issue. With overflow auto you should get a vertical scrollbar when the contents height is greater than the containing blocks height. That's not your case.
i had problem like this before, I removed position: fixed on my header and its worked. Hope that help someone
I'm using http://www.cssstickyfooter.com/ for the footer of two sites I'm working on. Seems to be fine on a large monitor, no issues at all.
However when going to a smaller monitor and shrinking the page size down I'm getting a scroll bar at the bottom of the screen and the Footer is not stretching the full width of the screen.
A working example of this issue is here
Just shrink the screen size down and you can see the issue.
Any ideas on how I can fix this. It has also happened on this site I've made
Thanks in advance.
You need to set a min-width for your footer. Currently the footer is correctly adjusting itself to the size of your screen, even if the rest of the content no longer fits on the screen and scrollbars are added.
Find the width at which scrollbars appear and set your footer's min-width to that. Example:
.footer {
min-width: 1000px;
}
I have a background-image used to separate my page footer from the main content. It displays fine when viewed in a browser window wider than the supported min-width of the page. However, if the window is resized to be narrower the image is pushed to the right relative to the main body.
How it displays in wide browser windows:
How it displays in narrow browser windows:
Can I set the main body content not to push right up against the left-hand side of the window, but rather keep the 30 pixel margin when viewed in a narrow browser window?
The page is live here if the CSS will be helpful.
Yes, you should give the <body> a min-width. Just a little above 1000 works for me on your website, but I don't have an exact value. Probably the exact width of the ribbon.
-edit-
ribbon (1000px) + border (2 * 1px) = 1002px, that should do it.
The problem is that your #footerTop and #footer are too big and are responding to the window shrink. The way I would get around this is by adding the background to the #footerContainer instead. If you align it to the centre it will always work since #footerContainer does not have a fixed width.
This will also mean that you won't get the horizontal scroll bar when the browser window is resized to 999px wide. It all depends on how small you want the window to be able to go