Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS, Centering the Menu

Posted on 2015-02-14
2
Medium Priority
?
111 Views
Last Modified: 2015-02-15
This should be pretty easy, but I need some help. I inherited this CSS, and it seems to be a bit messy.

Please visit http://prowodev.com/links/dh.html.

Take a look at the menu. I simply want his menu to be centered horizontally, and for the text links to be moved so that the PNG bar is the background. See the mockup here for reference: http://prowodev.com/links/mockup.html.

I'm also attaching the CSS code that controls this area. Any cleanup, in addition to above, would be appreciated! Thanks in advance.
.main-menu {background:url(images/menu-bg.png) repeat-x; padding:44px 0 0 0; margin:35px auto; height:56px;}
.main-menu li {float:left; padding:0; background:none;}
.main-menu li a {display:block; padding:10px 32px; color:#ffffff; text-transform:uppercase; text-decoration:none; font-size:18px;}
.main-menu li a:hover {color:#e7e2a1;}
.main-menu li a.active {color:#e7e2a1;}

Open in new window

0
Comment
Question by:isaacr25
2 Comments
 
LVL 15

Accepted Solution

by:
Edwin Hoffer earned 1000 total points
ID: 40610488
Hello isaacr25,

Find this code ".main-menu" in the style.css file and update "padding:40px 0 0 0; to "padding:8px 0 0 0"

Thanks
Edwin
0
 
LVL 45

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 1000 total points
ID: 40610766
To centre the menu horizontally, you need to add the following to your style.css

#main-menu { width: 100%; text-align:center; } 

Open in new window


And then change the style for the .main-menu li (around line 60 of style.css) to the following:

.main-menu li { display:inline-block; padding:0; background:none;}

Open in new window


i.e. drop the float and add the display

As Edwin has already pointed out - to move the menu items up, change the top padding of the .main-menu class - line 59 of style.css
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

580 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