Top navigation isn't working right

**Sword Dancer** · Apr 16, 2012 08:24

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!

**RyanReese** · Apr 16, 2012 10:51

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?

**Sword Dancer** · Apr 16, 2012 13:50

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

**RyanReese** · Apr 16, 2012 14:12

#container needs overflow:hidden; to clear off (aka stop snagging) on the floated navigation you're working on

.

**Sword Dancer** · Apr 17, 2012 07:39

Thanks Ryan, just a few more teaks to go.

1. 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.

2. How do you just have the top navigation links underlined without having the links in the drop down menu being underlined?

3. How do you right align the top navigation links? So that they are above the address on the far right-hand side.

Thanks!

**RyanReese** · Apr 17, 2012 07:56

1) Remove the margin set on <body>
2) Specifcy the anchors of the navigation to have text-decoration:underline;. Then do something like (I don't know your HTML so this is generic)..

Code:

#nav li li a{text-decoration:none;}

3) Remove the width on the nav container. It's set to 960px. It's starting on the left by default. If for some reason you don't want the width changed, float:right the <li>'s instead of left (although you'll need to switch up the source order)

**Sword Dancer** · Apr 17, 2012 10:55

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 CSS sheet.

Thanks in advance!

**RyanReese** · Apr 17, 2012 19:32

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.

Code:

#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)

Off Topic:

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

**Sword Dancer** · Apr 18, 2012 15:03

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!

**RyanReese** · Apr 18, 2012 19:54

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

**Sword Dancer** · Apr 18, 2012 22:18

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.

**RyanReese** · Apr 18, 2012 23:14

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)

Off Topic:

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

**Sword Dancer** · Apr 20, 2012 07:27

No worries Ryan, you didn't come across as cranky or harsh.

So something like this:

Code:

#top-navigation-footer { 
	clear: both;
}

Then put this right after the top navigation, but before the container?

Code:

<div id="top-navigation-footer">
</div>

**Sword Dancer** · Apr 20, 2012 08:31

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.

**RyanReese** · Apr 20, 2012 09:55

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>

.

Code:

<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>
<div id="top-navigation-footer">
</div>
</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...

Code:

#top-navigation {
width: 960px;
margin: 10px auto;
}

To this

Code:

#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.

**Sword Dancer** · Apr 20, 2012 10:12

Thanks Ryan for all of your help patients. I deeply appreciate it.

The 10px still isn't working in the modern browsers.

**RyanReese** · Apr 20, 2012 10:30

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.

Code:

#top-nav{padding:0;margin:0}

Boom.

**Sword Dancer** · Apr 20, 2012 11:06

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!

**RyanReese** · Apr 20, 2012 18:53

Originally Posted by Sword Dancer

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

).

**Sword Dancer** · Apr 20, 2012 22:07

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.

Code:

#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

Code:

#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?

**Sword Dancer** · Apr 20, 2012 22:55

Alright shoot-gunning it for about 45 minutes, I got the border to be inline with the drop-down menu.

Sadly when you hover over one of the items in the drop-down menu the the light brown background actually extends to the past the gray border on the left.

**RyanReese** · Apr 21, 2012 08:12

Hello

.

The problem is that on #top-nav li{} you had a left padding of 23px set. Along with that, you have, on #top-nav li li{}, a negative left margin of 23px set.

So on #top-nav li li{} remove that left margin rule, and add in padding:0;. So your rule should look exactly like this

Code:

#top-nav li li{
padding:0;
}

**Sword Dancer** · Apr 21, 2012 08:27

That worked perfectly! Thanks!

**RyanReese** · Apr 21, 2012 08:28

You're welcome

.

**Sword Dancer** · Apr 25, 2012 07:54

Hey Ryan,

I got the underline to appear when hovering over the links on the top navigation, but when I hover over the Calendars link all of the items in the drop-down menu have an underline. I don't want there to be any underlining on the drop-down menu links, even when hovering.

Thanks!

My test page can be found here.

User Tag List

Thread: Top navigation isn't working right

Thread Tools

Display

Top navigation isn't working right

Bookmarks

Bookmarks

Posting Permissions