...

View Full Version : Positioning my Navigation Menu



straderade
05-10-2009, 10:35 AM
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!

roban
05-10-2009, 11:36 AM
You'd have to post the css for the menu in order to help in fixing this.

codedpsd
05-10-2009, 11:41 AM
Try margin-left:auto for the list, and a margin top. Or you can use absolute positioning with bottom:0px; right:0px;

abduraooft
05-10-2009, 04:28 PM
Try

#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;
}

straderade
05-10-2009, 05:45 PM
This code is working but subnav is not working properly now.


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


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

abduraooft
05-10-2009, 05:48 PM
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

#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;
}

straderade
05-10-2009, 05:58 PM
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!!

abduraooft
05-10-2009, 06:05 PM
Try

#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;
}
*/

straderade
05-10-2009, 06:12 PM
That is pushing the sub nav over to the left.


Try

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

straderade
05-10-2009, 09:36 PM
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?

abduraooft
05-11-2009, 09:11 AM
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

#secnav li {/*menu.css (line 47)*/
border:1px solid red;
float:left;
font-size:14px;
position:relative;
} and then having another try.

straderade
05-11-2009, 04:57 PM
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...



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum