This is my current site, and I am trying to make the navigation less bloated; but I am stuck on the top navigation. I am trying to just have the top navigation display Home | Calendars | Alumni with a drop-down menu appearing just like the main navigation when a user hovers over Calendars. Which will display the four calendars.
I tried tweaking my existing navigation and adding it to my CSS file, but it came out looking really weird; like this.
Thanks in advance!
For one thing, look at what is being generated in the HTML for that. You have some anchors not in the <ul><li> and also your class/ID naming scheme for the navigation part is screwed up as well. Names aren’t matching, etc. What went wrong from a copy/paste point of view :)?
Are you doing completely new CSS for the testing page?
OK, I’ve changed some things in my CSS file and it’s looking MUCH better. However, the Home, Calendars, and Alumni links are not outside of the container. My site cant be found here
#container needs overflow:hidden; to clear off (aka stop snagging) on the floated navigation you’re working on :).
Thanks Ryan, just a few more teaks to go.
How do you lower the spacing between the top navigation links and the top of the page? I’ve tried experimenting with the margin-top and padding-top, but I can’t get the spacing to close. Ideally, I would like 10px spacing above and below the top navigation.
How do you just have the top navigation links underlined without having the links in the drop down menu being underlined?
How do you right align the top navigation links? So that they are above the address on the far right-hand side.
Thanks!
#nav [b]li li a[/b]{text-decoration:none;}
The spacing between the top navigation and top of the page is still greater than 10px, even after I’ve removed the margin tag from the body.
I removed the width 960px and the top navigation links now too far to the right. I would like the i in Alumni to be inline with the container border on the right-hand side.
My site can be found here and here is my [URL=“http://covschool.org/stylesheet.php?cssid=61”]CSS sheet.
Thanks in advance!
The <body> still needs margin:0 set. The user agent stylesheet still sets a margin for <body> by default.
Also, the #top-nav by default (a <ul>) has top margin(and bottom) applied. Remove those margins.
Edit-Seems you have this rule set.
#top-nav, #top-nav ul {
padding: 0;
list-style: none;
margin-bottom: 10px;
}
You set the bottom margin but the top margin still has some margins set by default.
To fix the alignment issue, you should know that margin:0 auto centering trick (on #top-navigation) doesn’t work when the item is floated. Just static blocks. Remove the float:right on #top-navigation and give it overflow:hidden; instead (to contain the floated menu items)
I don’t see where you removed hte 960px width (on what??). Not that it matters. The resolution had nothing to do with whatever element you removed the width on
Just a few more tweaks to go…
The drop-down menu for the calendars link is going behind the container. I need it go to in front of the container so that the links are visible. I’ve experimented with the z-index values but I haven’t been able to get it work.
In IE6, and IE7 there’s no space between the top navigation links and the container and the top of the page. While in modern browsers there is. I would like there to be 10px above and below the top navigation links.
Thanks!
Navigation issue-You would THINK it’s just going behind, however that’s not the case. Tricked me up for a second. The issue is that #top-nav has overflow:hidden (my bad) and as a result it’s chopping off the navigation menu.
To rectify this, you can just add a clearing element (<div style=“clear:both;height:0;overflow:hidden;”></div>) (use a separate class and not that inline garbage) as the very last element of the #top-navigation div. Remove overflow:hidden now, obviously.
However now it’s almost working but it’s going behind the other navigation. To solve this, give #top-navigation position:relative and z-index:9999 (just a high value like that :)). That’s done.
As for the spacing in IE6/7, you need to relize that different browsers use margins to space elements vertically (like <ul>) and some use padding. Just a simple fact. You set the padding to 0 on “#top-nav, #top-nav ul” and as a result, all brwosers that use padding for vertical spacing on <ul>'s have no vertical spacing like those who use margin do. If you just simply remove that padding:0 in there it’ll work
It’s late, and I am SO tired and frustrated over this.
In Chrome and Safari the horizontal alignment is correct, it’s just the vertical alignment that’s off. While in IE8, IE9, Firefox and Opera the top navigation is off to the right-hand side.
Oddly enough, it’s now coming out exactly how I want it to be in IE6 and IE7.
Don’t worry, I’m still up too. I procrastinated. I started at midnight (it being 2:11 A.M. right now) and I finished one project, and I’m 4 pages done out of a 8 page paper (all due in the morning). BOY DO I LOVE PROCRASTINATING.
Anyway, let’s see…You didn’t do what I said. I never siad give #top-navigation clear:both. I said create an element, put it as the last child in there, and give THAT clear:both. Big difference ;).
Try again. (I’m viewing in Chrome, and the main page is overlapping the top menu)
I mght be a bit cranky so don’t take this post harshly. I don’t know how this post comes across. I’m just tired 
No worries Ryan, you didn’t come across as cranky or harsh.
So something like this:
#top-navigation-footer {
clear: both;
}
Then put this right after the top navigation, but before the container?
<div id="top-navigation-footer">
</div>
OK the above code worked perfectly!
Now I just need there to be 10px spacing above and below the top navigation links in the modern browsers. It’s coming out just like I want it to be in IE6 and IE7.
Hi, you almost had it right. You put the top-navigation-footer before container, yes, but AFTER the top navigation div. I said to put it as the last child, not as an adjacent child :).
Your HTML should be this, exactly. Notice where the tpo-navigation-footer is. RIGHT BEFORE the closing <div> :).
<div id="top-navigation">
<ul id="top-nav" class="sf-menu">
<li><a href="http://covschool.org/">Home</a></li>
<li><a href="http://covschool.org/calendars" onclick="target='newwindow'">Calendars</a>
<ul>
<li><a href="http://covschool.org/calendars/master-calendar" onclick="target='newwindow'">Master Calendar</a></li>
<li><a href="http://covschool.org/calendars/school-calendar" onclick="target='newwindow'">School Calendar</a></li>
<li><a href="http://covschool.org/preschool/preschool-calendar" onclick="target='newwindow'">Preschool Calendar</a></li>
<li><a href="http://covschool.org/athletics/athletics-calendar" onclick="target='newwindow'">Athletics Calendar</a></li></ul>
</li>
<li><a href="http://covschool.org/alumni/">Alumni</a></li>
</ul>
[B]<div id="top-navigation-footer">
</div>[/B]
</div>
Now you’ll notice IE6/7 give the correct behavior (what it’s supposed to be showing) and it will show like modern browsers now (untested but I’m sure it does)
Now you can just update this…
#top-navigation {
width: 960px;
margin: 10px auto;
}
To this 
#top-navigation {
width: 960px;
margin: 0px auto;
}
Modern browsers are adding that original 10px from #top-navigation and adding it to the margins set on the <ul>. IE isn’t.
If that doesn’t work, just holler back.
Thanks Ryan for all of your help patients. I deeply appreciate it.
The 10px still isn’t working in the modern browsers.
I already answered this previously
You didn’t change top-navigations margins like I said in my last post. However that works out better for you.
Read the last paragraph of post #10. Read it? Good. Add this in now.
#top-nav{padding:0;margin:0}
Boom.
THANKS A MILLION RYAN!!!
It’s now working perfecting in IE6, IE7, IE8, IE9, Chrome (my default browser), Firefox, Safari, and Opera!
Joy of joys, dream of dreams!
Got there in the end didn’t we ;).
You’re welcome (times a million ;)).
Argg…why me? I just noticed something. It’s not really a big deal, but I just noticed that on the top navigation the hot spot area for the links are extending to the across the spaces that sperate the links.
#top-nav li a { /* non-rollover link formatting for the main menu links */
float: none;
color: yellow;
text-decoration: underline;
display:block;
padding-left: 23px;
}
I tried moving the padding-left: 23px; to the
#top-nav li {
}
and that did keep the spaces without having the spaces being links, but doing that messed up the drop-down menu.
I know it’s not really hurt anything, but how do you keep the spaces that sperate each of the links without spaces being links and without messing up the drop-down menu?