Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   Even spacing of menu bar (http://forum.bytesforall.com/showthread.php?t=21964)

msg-meteorites Apr 3, 2014 04:50 AM

Even spacing of menu bar
 
I am trying to get my menu bar justified to the left and the right but cant find a way to do so. It is justified to the left but it finsishes at a different place on the right dependant on which browser is used. I ideally want it evenly spaced and justified to the left and the right. Is this possible? My website is

www.msg-meteorites.co.uk

Cheers

Martin

juggledad Apr 3, 2014 04:57 AM

to center it, look at the theme options
to evenly space it you will need to add some CSS padding to the elements

msg-meteorites Apr 4, 2014 04:22 AM

Thank you. I can centre it via the ATO options but this still means it is not evenly spaced and for some reason it now has a dashed border around it which i can't remove?

The spacing looks very different when viewed in IE compared to Chrome. If the CSS is changed how will this affect how it is viewed in different browsers? Also forgive my ignorance but how do i add CSS padding to the elements?

Thanks again

Cheers

Martin

lmilesw Apr 4, 2014 08:43 AM

Trying to get a menu to span the full width is problematic. As you have seen different browsers render things differently. I fiddled with padding on the menu items and could not get them to span the full width. At one point they almost got to full width but then when I add even slightly more padding the menu wrapped to two lines.

When I want to do this I generally use percentage widths for the menu items which makes them all 15% or maybe 13.4% or whatever works but in your case if you make all the menu items the same width they will need to be made wide enough for the longest menu title to fit and so your menu will wrap to a second line.

You can get rid of the dashed borders on a centered menu with CSS. You just need to use a tool like Firebug with Firefox to determine the selectors and then use CSS to get rid of the dashes.

msg-meteorites Apr 7, 2014 04:07 AM

Thank you very much. I am a total beginner when it comes to website coding and have just about scraped through to create what i done so far by trial and error and lots of help and assistance! When you say use CSS to remove the dashed line when the menu is centred, what code? And where do you insert it? If the menu is spaced evenly as you suggest with each menu item being a certain percentage width adding up to 100% does it matter whether it is centred or left justified? The idea of having a percentage width makes sense so how do i go about doing this for my menu? Any help much appreciated :-)

Cheers

Martin

juggledad Apr 7, 2014 04:31 AM

Quote:

When you say use CSS to remove the dashed line when the menu is centred, what code? And where do you insert it?
Did you look thru the FAQ - ATAHUALPA section of the forum?

Quote:

If the menu is spaced evenly as you suggest with each menu item being a certain percentage width adding up to 100% does it matter whether it is centred or left justified?
Try it and see which you think looks better

geezergeek Apr 7, 2014 11:48 AM

Don't know if this will help, but …

In one case where I found I had extra space in my horizontal menubar, I used a bullet point and a single space before each page title, as follows: • menu item

These filled up the horizontal space sufficiently that the menubar looked right. Depending on how much space you have, you could use bullet points, em dashes, or some other doodad for this purpose.

You can see the result here: http://www.nearbycafe.com/loveandlust/eroticbynature/

msg-meteorites Apr 7, 2014 01:48 PM

Hi,

Yes i did, but i apologise as lots of it makes no sense to me :-( I was after a bit more info on how to make the menu bar items a certain percentage width to make them evenly spaced. I have not got a clue how to achieve this.

No worries and thanks for your assistance so far.

Cheers

Martin

msg-meteorites Apr 7, 2014 03:23 PM

Thanks :-)

Think i have fixed it as best i can. Not sure how but it sort of works ;-) I added a percentage to each menu item in the CSS insert section and kept it to left justify and near as damnit it sorta works. If i change it to centred for some reason then it reverts to wrapping onto a second line. this looks fine for me on firefox, chrome and IE.

www.msg-meteorites.co.uk


Thanks all for your help :-)

Cheers

Martin


All times are GMT -6. The time now is 10:30 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.