Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    May 2009
    Location
    Arizona
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Exclamation Positioning my Navigation Menu

    Having some problems positioning my navigation menu. It is currently defaulting to the top left hand corner on the header but I would like to position it to the bottom right of the header, just above the blue image. Flush against it would be nice, I can control how much it touches with padding afterwards.

    http://test.tlcyouthgroup.com

    If anyone can help, it'd be appreciated!

  • #2
    New to the CF scene
    Join Date
    May 2008
    Location
    East Hampton, NY
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You'd have to post the css for the menu in order to help in fixing this.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Location
    New York City
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try margin-left:auto for the list, and a margin top. Or you can use absolute positioning with bottom:0px; right:0px;

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    #secnav, #secnav ul {/*menu.css (line 3)*/
    /*float:right;*/
    line-height:1;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
    position:absolute;
    right:0;
    bottom:0;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    straderade (05-10-2009)

  • #5
    New Coder
    Join Date
    May 2009
    Location
    Arizona
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts
    This code is working but subnav is not working properly now.

    Code:
    #secnav, #secnav ul {
    	line-height:1;
    	list-style-image:none;
    	list-style-position:outside;
    	list-style-type:none;
    	margin:0;
    	padding:0;
    	position:absolute;
    	right:0;
    	bottom:0;
    }
    This is the code for SubNav...

    Code:
    #secnav li ul {
    	background-color: #555555;
    	position: absolute;
    	width: 90px;
    	left: -999em;
    	z-index: 10;
    	border: 1px solid #555555;
    	border-top: none;
    }
    Thanks for all the help - it's almost there.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    This code is working but subnav is not working properly now.
    How do you need to get it popped out - upwards/downwards?

    If downwards, try
    Code:
    #secnav li {/*menu.css (line 43)*/
    float:left;
    font-size:14px;
    position:relative;
    }
    #secnav li ul {/*menu.css (line 50)*/
    background-color:#555555;
    border-color:-moz-use-text-color #555555 #555555;
    border-style:none solid solid;
    border-width:medium 1px 1px;
    left:-999em;
    position:absolute;
    top:2.8em;
    width:90px;
    z-index:10;
    }
    Last edited by abduraooft; 05-10-2009 at 05:50 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    straderade (05-10-2009)

  • #7
    New Coder
    Join Date
    May 2009
    Location
    Arizona
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Yes, Downwards is my goal & this code worked.

    The only thing I'm seeing is when hovering over 'Services' sometimes, in FireFox, it does not want to keep the subnav open to allow you to click on of the sub pages. It's almost like if you hover over services and go at an angle to the subnav it closes and will not allow you to select. I wasn't seeing this before.

    Seems to be working properly in IE, which is amazing! :P

    Are you experiencing the same thing?

    Again, Thanks for all your help!!

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    #secnav li:hover ul, #secnav li li:hover ul, #secnav li.sfhover1 ul, #secnav li li.sfhover1 ul {
    left:-2.7em;
    }
    /*
    #secnav li:hover, #secnav li.hover {
    position:static;
    }
    */
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    May 2009
    Location
    Arizona
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts
    That is pushing the sub nav over to the left.

    Quote Originally Posted by abduraooft View Post
    Try
    Code:
    #secnav li:hover ul, #secnav li li:hover ul, #secnav li.sfhover1 ul, #secnav li li.sfhover1 ul {
    left:-2.7em;
    }
    /*
    #secnav li:hover, #secnav li.hover {
    position:static;
    }
    */
    I am leaving for a little while so will not be able to make any immediate changes, but will be back later to add any changes you might have. Thanks much!

  • #10
    New Coder
    Join Date
    May 2009
    Location
    Arizona
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts
    That code did not work - it only pushes the sub nav to the left instead of right under the page it's supposed to be under.

    Still experiencing some buggy issues with the drop down not staying open upon hover.

    Any more help?

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You might be experiencing this issue when your mouse pointer goes beyond the the boundaries of your primary menu. You may ensure this by adding a border around them, like
    Code:
    #secnav li {/*menu.css (line 47)*/
    border:1px solid red;
    float:left;
    font-size:14px;
    position:relative;
    }
    and then having another try.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    New Coder
    Join Date
    May 2009
    Location
    Arizona
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    You might be experiencing this issue when your mouse pointer goes beyond the the boundaries of your primary menu. You may ensure this by adding a border around them
    I think we found it was a slight padding issue, however your method would probably work as well. I chaning the top from 2.8em, to 2.75em fixed it...

    Code:
    #secnav li ul {
    	background-color: #555555;
    	position: absolute;
    	width: 90px;
    	left: -999em;
    	z-index: 10;
    	border: 1px solid #555555;
    	border-top: none;
           top:2.75em;
    }
    However, are you still experiencing some bugs? I know validating my code might help with some of these bugs.


  •  

    Posting Permissions

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