Hi all;

 

It's been a long while since I last used this forum (and a long while since I even looked at my website, life is busy!) I am hoping that some one can help my rusty brain that can't seem to figure this out by itself. I am trying to center a horizontal menu but whatever I do it just aligns left. I am not good with css at the best of times but this is beyond me! See below for what I am using - I have no idea at all which bits I might need to change or what to change them too

 

.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('topMenuImages.png') repeat-x;}

.menu li{padding:0; margin:0; list-style:none; display:inline;}

.menu li a{float:left; padding-left:15px; display:block; color:rgb(5,5,5); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}

.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}

.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}

.menu li a:hover span{background-position:100% -60px;}

.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(3,1,5);}

.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}

<ul class="menu">

<li><a href="http://winemakingemporium.co.uk" class="active"><span>Home</span></a></li>

<li><a href="http://winemakingemporium.co.uk/winemaking.html"><span>Wine</span></a></li>

<li><a href="http://winemakingemporium.co.uk/beer-making.html"><span>Beer</span></a></li>

<li><a href="http://winemakingemporium.co.uk/cider-making.html"><span>Cider</span></a></li>

<li><a href="http://winemakingemporium.co.uk/make-spirits.html"><span>Spirits</span></a></li>

<li><a href="http://winemakingemporium.co.uk/resources.html"><span>Resources</span></a></li>

<li><a href="http://winemakingemporium.co.uk/contact.html"><span>Contact</span></a></li>

</ul>

Any help would be mega appreciated

 

Add text-align: center to the menu class

Change .menu li a to display: inline-block

Get rid of the floats from .menu li a and .menu li a span

 

That ought to do it.

 

.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; text-align: center; background:url('topMenuImages.png') repeat-x;}

 

.menu li{padding:0; margin:0; list-style:none; display:inline;}

 

.menu li a{padding-left:15px; display:inline-block; color:rgb(5,5,5); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}

 

.menu li a span{line-height:30px; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}

 

.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}

.menu li a:hover span{background-position:100% -60px;}

 

Dorian

Thanks for taking the time out for that; I will give that a try. Thanks again

There was a lot of wierd stuff going on in your code there,

 

Here is a navigation that is centered like you wanted with less verbose css. There's no need to declare styles for elements that already have them by default, display:block for instance on a ul.

 

http://jsfiddle.net/yw5xb679/

 

The way I center the nav is I wrap it in a div which has the property-value of text-align-center, this will only operate on inline or inline-block elements, so I then set the ul's display value to inline-block. The Li's are floated left and the lnks spaced out by a combination of padding and line-height.

Edited September 22, 201411 yr by rbrtsmith

A better reply than mine I think

 

CSS is confusing enough already. No sense adding declarations that we don't need...

 

Dorian

I can see how simplifying it is better, thanks for your replies. Simple is always good with me!

Simple is good, whenever I have complex css code I always ask the question of WHY if I cannot come up with a good concrete reason that it is done in that way I remove it and look for a better alternative. In my opinion everything on a webpage must have a purpose, it's not good to have stuff cluttering up your webpage and source code that doesn't enhance the users experience in someway or aid in conversion.

Edited September 23, 201411 yr by rbrtsmith

To make it even simpler if you have an object you call a 'nav', why not wrap it in tags that say <nav>...</nav> rather than <div> tags. The <nav> element can then be targeted without much risk of other elements inheriting the styles.

nav {

/* Put your nav styles here */

}

 

To make it even simpler if you have an object you call a 'nav', why not wrap it in tags that say <nav>...</nav> rather than <div> tags. The <nav> element can then be targeted without much risk of other elements inheriting the styles.

nav {

/* Put your nav styles here */

}

 

 

It should be wrapped in a nav tag you're right, but you should still give it a classname and target that, it's not a good idea to target all nav elements unless it is a base style that is always gonna be used on all your nav elements on the site.

Depends how many nav elements you're going to have but if there is one at the top and one at the bottom for example then giving them each a distinct ID or class would be appropriate.

 

However the point I was making was that there is a ready made HTML element available that is semantically preferable to a plain old div.

 

Feel quite sorry for <div> it has been a faithful, loyal friend over the years. Now it is like looking around a kitchen and seeing all those neatly arranged, named storage jars, Tea, Coffee, Sugar, Flour, Pasta, etc, and there tucked in the corner is poor old <div>, a grey, utilitarian bucket with a mop stuck in it.

Simply you just create a DIV outside of .menu class. give the name has #nav and width can be 100%.

 

for example:

#nav{width: 100%;}

.menu{margin:0 auto; padding:0; height:30px; width:75%; display:block; background:url('topMenuImages.png') repeat-x;}

.menu li{padding:0; margin:0; list-style:none; display:inline;}

.menu li a{float:left; padding-left:15px; display:block; color:rgb(5,5,5); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}

.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}

.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}

.menu li a:hover span{background-position:100% -60px;}

.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(3,1,5);}

.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}

<div id="nav">

<ul class="menu">

<li><a href="http://winemakingemporium.co.uk" class="active"><span>Home</span></a></li>

<li><a href="http://winemakingemp.../span></a></li>

<li><a href="http://winemakingemp.../span></a></li>

<li><a href="http://winemakingemp.../span></a></li>

<li><a href="http://winemakingemp.../span></a></li>

<li><a href="http://winemakingemp.../span></a></li>

<li><a href="http://winemakingemp.../span></a></li>

</ul>

</div>

Use this way you,ll be get the menu place in center position.

The thing is you dont know what will happen with the site in the future, maybe more nav elements will be used. Good css is reuseable and scalable. Element selectors are neither. As for ids - useful for javascript hooks and so forth. They have no place in css and screw up your specificity. A number of the industrys leading css experts have covered this in great detail. But of course using the html5 elements to increase sementic meaning is a good thing.