Hi everyone, I have a problem with my CSS and would appreciate input from anyone on how I might be able to solve it. Specifically the left hand pane navigation on my pages is fixed. That is it remains where it is relative to the browser screen no matter where in the page a user is at. The problem is that when a user gets to the bottom of a page the menu in question overwrites the footer of the page. Can I post a link to my web site to better show the problem? Not sure how to fix it. Carlos
Thanks. I felt a need to ask about posting a link first because some forums are real paranoid about that. Anyway here is a link to my site: http://www.carlosgonzalezconsulting.com If you go to the home page by visiting the above link and then scroll down on your browser as far as you can go you will see that the navigation (CSS) on the left goes down with you but then overwrites the left hand side of the footer. I definitely want the menu to "float" and be visible to the user at all times. Not just for the user but also to fill the left hand navigation pane with something. But I have to figure out a way to keep it (or the page) from being scrolled down so far that the menu overwrites part of the footer. And it has to be a cross browser compatible solution. Any ideas? Carlos
Hmm interesting... The only way I can currently think of, is to use JavaScript, because the only way I think of a solution is via a conditional, e.g if at bottom of the page then stop.. this conditional can only be solved via JavaScript. The problem with adding some JavaScript is that it has accessiblity issues, for example what happens if a user doesn't have it, or has it disabled. This is just my opinion maybe somebody can find another way around this using just CSS. So for what I can think atm, it's either JavaScript, or change the way you want it too look. For me having it scroll down doesn't look all too good anyways
Well...I am definitely not inclined to go with a JavaScript solution because, like you said, what happens when people surf without JavaScript? Same problem resurfaces. Maybe I need to change the overall look and feel of the web site to avoid the need to fill the left hand empty space normally taken up by the navigation menu. The reason I fixed it into position was in response to others who were telling me the empty space on the left was looking bad. But apparently, you don't like the menu coming down the page with you. What to do? What to do? Maybe I can just have the menu as is at the top of the page and then have the text float around the menu like it would float around an image and fill the area between the page margins fully that way. Though I haven't seen many web sites do that. Any other suggestions? Carlos
For <div id="menu">, try adding a padding-bottom: 20px; (or what ever the height of your footer is plus a couple of pixels). This will force the menu container to have a blank space at the bottom which won't be seen. Then when those links hit the bottom of the page like it is doing now, that 20px (or what ever) blank space will overlap the footer because that space is at the bottom, not your last menu link. It's probably not the most proper way to do things but it should do the trick.
Well i've had a think about the way you currently have it, and the only way I think it can work, is if you could fix a DIV within a block, so it stays within the block whatever happens, now is that possible I don't know To me personally, having it scroll looks a bit cheesy and un-proffesional, but that is just my opinion, hopefully others can clarify what they think on it, because my opinions sometimes do not reflect what the majority think. If you had no other content, I mean you could fill up the sidebar with the usual junk like recent news, rss feeds, advertisments, weather (they put anything in their sidebar nowadays)! Another option would be to have the menu under the header as you said, and have the content span 100% width.
Interesting suggestion but it doesn't work. What happens is that the fixed menu block just adds whatever the excess padding or margin is to the bottom of the...well..fixed menu block in place. In other words it doesn't push the menu block up or otherwise change where on the screen it appears. It just adds it to the bottom of the menu block (even off the screen to the bottom) such that the menu block elements that appear still overwrite the footer. I'm probably going to have to redo my overall site look and feel to get around having a left navigation area that appears empty when a user is scrolling down the page other than filling it with the navigation menu. You know I found something interesting when playing with this. Apparently a position:fixed interferes with attempts to outline or color the background of higher level div in the hiarchy of divs when attempting to make them stand out through such coloring. That's interesting. I never realized that before. Carlos
Also, if someone has a screen which is less high that the total of your menu and the top spacing it has, the bottom elements are never, ever reachable. When you're at the bottom of the screen, the menu is simply off-screen.