• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 116
  • Last Modified:

CSS, Centering the Menu

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
isaacr25
Asked:
isaacr25
2 Solutions
 
Edwin HofferTechnical ExpertCommented:
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
 
Chris StanyonCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now