SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 34
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Top navigation isn't working right

    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!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    #container needs overflow:hidden; to clear off (aka stop snagging) on the floated navigation you're working on .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  14. #14
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #16
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan for all of your help patients. I deeply appreciate it.

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

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #18
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sword Dancer View Post
    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 ).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  20. #20
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  21. #21
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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;
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked perfectly! Thanks!

  24. #24
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  25. #25
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •