Solved

CSS, Centering the Menu

Posted on 2015-02-14
2
105 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 14

Accepted Solution

by:
Edwin Hoffer earned 250 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 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 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

Industry Leaders: 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!

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

688 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