?
Solved

Push nav bar over to right

Posted on 2009-12-28
11
Medium Priority
?
204 Views
Last Modified: 2012-05-08
How do I push the nav buttons over to the right by about 50 px?  When  I try to do it the entire green bar moves and that is not what I want.  I need to just move the buttons.  I will be putting in a search box to the right of the buttons so I need to keep that space open.

http://nsitedesigns.com/nsitedesigns/hvs/index.html
http://nsitedesigns.com/nsitedesigns/hvs/hvs.css
/*NAVIGATION */
ul#main-nav {font-family:helvetica,arial,sans-serif;margin-left:4px;padding:0px;float:left;width:899px;background-color:#5fad03;}
ul#main-nav li {margin:0;padding:0;list-style:none;float:left;margin:0;width:9em;}
ul#main-nav li a {font-family: Arial, Helvetica, sans-serif;font-size:1.2em;text-decoration:none;display:block;padding:0.3em 0.6em;color:white;background-color:#5fad03;}
ul#main-nav li a:hover, ul#main-nav	li a:focus {background-color:#000;color:#fff;}
ul#main-nav li ul {padding:0;margin:0;display:none;position:fixed;}
ul#main-nav li:hover ul {display:block;}
ul#main-nav li ul li {float:none;width:auto;}
ul#main-nav li ul li a {font-size:1em;}

Open in new window

0
Comment
Question by:nsitedesigns
  • 6
  • 5
11 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 26133327
You could throw another DIV around the #main-nav and then position it with a margin-left.
0
 

Author Comment

by:nsitedesigns
ID: 26133401
I did something wrong.  Can you look at my code.  Nothing changed.

http://nsitedesigns.com/nsitedesigns/hvs/resources.html
http://nsitedesigns.com/nsitedesigns/hvs/hvs.css

ps  I was told never to float left with a left margin so I am not sure your solution will work.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 26133759
Did you want the nav text centered then?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:nsitedesigns
ID: 26133814
I want the buttons to not be flush left but pushed off the left margin by about 50 pixels.  I need to keep the right margin clean because we will be putting in a search box there.  I attached a mockup of what I am trying to do.
header.jpg
0
 
LVL 30

Expert Comment

by:LZ1
ID: 26133863
Oh!  Sorry....please excuse me, it's Monday after a long weekend.  
Try adding margin-left: 50px; to your ul#main-nav.  You should be fine.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 26133876
You will have to adjust your width to about 849px to compensate.
0
 

Author Comment

by:nsitedesigns
ID: 26133956
That just pushes the entire green bar to the right.  I need the green bar to remain the width of the page like it currently is set.  I just need to move the buttons.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 26135057
I tested in FF and it worked fine.  Just needed to update the width of the bar.  What browser did you test in?
0
 

Author Comment

by:nsitedesigns
ID: 26137113
safari, opera and ff on a mac.
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 26137362
I am sorry again.  I meant padding-left: 50px;
 That should work fine actually.
0
 

Author Closing Comment

by:nsitedesigns
ID: 31670513
That's the ticket!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month15 days, 10 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question