Solved

CSS, Centering the Menu

Posted on 2015-02-14
2
99 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 13

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 42

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

746 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now