I have spent the better part of today running around in circles and I am stumped. I am an amateur so please be patient.
This is what I want to do, (I will try to explain it as clearly as possible).
I have a script that will rotate full screen background images on page refresh. I also have a permanently “fixed” png semi-transparent top banner. The scrolling content will go just below the top banner, and will have a top graphic that will also be using the css “fixed” property in place, while the content scrolls in and fades out of view. There is also a fixed footer where there will be the same fading effect on the scrolling content in a fixed window that will change in size depending on the user’s viewport.
As mentioned, I am stumped, I have tried pure css, a hybid using both table and css, I do not want to use javascript, or any other language, I am pretty sure someone has tried this before, could I be directed to a tutorial or resource that could point the way.
Hi Paul, thank you for getting back to me and excuse my noobness, the obstacle I cannot get around, and I feel I will not be getting around, is the desire to use a top banner png with transparent areas. The problem arises when the content div, that is situated below the top, semi-transparent banner scrolls, the text container moves vertically to the top of the page and the text bleeds through the transparent areas of the banner, and so ruins the effect I was after. If there is a way to solve that problem I would be interested, but it would appear I will have to go with a boxy top header.
Hi Paul, thanks for contributing, I will be calling it a night soon, and will play with your solution tomorrow, having already demo’d it tonight, in my version of Firefox I am seeing a right scroll-bar, where you would normally expect it, (although, in my page markup, all the content, including the text div will be centered, with space on either side), vertically the height of the div I want to scroll, with space above and below, I am sure this is what you are referring to, although to my eyes, not too elegant.
Three other options I am slowly coming round to are jquery or javascript, I am ambivalent about both, any views on this link, at least the scrollbars can be both elegant and unobtrusive… http://www.net-kit.com/jquery-custom-scrollbar-plugins/, or another scripting solution… , or would iframes be worth considering?
Don’t center that container as that is the new window. Just add an inner div with appropriate with and center that instead
I was referring to the fact that the scrollbar is now on the container instead of on the body as per normal. It will still be at the right edge but if you have fixed width content and close the window then in some browsers the vertical scrollbar may disappear off the right of the viewport unlike the body scrollbar that always stays in view. You will also get the horizontal scrollbar above the footer which is no to nice either.
Three other options I am slowly coming round to are jquery or javascript, I am ambivalent about both, any views on this link, at least the scrollbars can be both elegant and unobtrusive… http://www.net-kit.com/jquery-custom-scrollbar-plugins/, or another scripting solution… , or would iframes be worth considering?
Don’t consider iframes at all they cause more problems than they solve.
I’d need to see your design but I’m guessing that my demo is post #2 could work like you wanted. You could apply a matching background under the fixed banner so that scrolling text is not seen through the banner.