I’m working on a website and am having some alignment problems with my navigation DIVs.
When someone is on a page, I would like the button for that page to be inactive. And so along with the navigation I created a class that would display the lower half of the navigation button. This trick works fine on the index page but even though I use the same approach it doesn’t work on any other page (to see an example, click on the podcast.htm link on the page above).
I have checked the CSS over and over again and can’t figure out a solution. All of the DIV tags have the same properties, so they should work on every page. The classes in question are at the very end of the CSS file linked below (.program-on, .podcast-on, .about-on). Any help would be greatly appreciated!
The podcast page would be fine if you removed the clear_both from the podcast_on class in your CSS. Remove it for all the “on” CSS classes
Actually, you actually should REALLY consider redoing that page. Or at least the header section. It’s quite poorly done. You are trying to position it all the wrong ways. Not trying to be rude but the current way will give you more headaches than you want.
IF you wanted to take the lazy approach, just removing clear:both from the podcast_on class would be fine.
You don’t have many pages so it wouldn’t take a huge toll on you.
Ack! I spoke too soon… Now that I take out the clear:both on the “on” states, the index page is messed up (nav buttons appearing about 40px too high. Why do the attributes on the “on” classes affect the normal navigation? So you’re suggesting the nav menu should in it’s own container and then positioning that where it’s supposed to be?
Thanks a lot everyone. The two main fixes were: 1) put everything inside the #container DIV, and then 2) put all of the navigation inside a #navcontainer DIV and handle positioning there. Didn’t post new pages to the dev site, but everything is looking great now.