Centering Hortizonal Text Menu

Hello!

I am having problems centering three rows of a horizontal text menu at the bottom of a web page.

I will put the link up in my follow up comment.

I admit that there are too many selectors -- but I can't easily get rid of them.

Looking for your help in centering the three rows of menu items!

Thanks

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rowby GorenAuthor Commented:
Hello

Here's a link to a redirect to the site.  The menu consists of three rows at the bottom of the page:

Click on this Link to go to redirect
I have so many selectors and so many divs I am not sure how to fix this!

Thanks!
0
GaryCommented:
In template.css line 2495 you have a negative margin pushing everything over to the left.
0
Rowby GorenAuthor Commented:
Hi GaryC123,

Thanks for helping.  I zapped that negative margin --it  has improved the centering.

There are still some remaining issues, I could probably figure them out now, but do you have any other suggestions?

Rowby
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

GaryCommented:
On rowby2columnfooter-text line 1460 in template.css
You are setting the width to 1028px - bigger than your page - remove it.

On ul.first-of-type line 2495 you are setting the width to 1040px - remove it.

On #ariyui219.yui-skin-sam .yuimenubarnav .yuimenubaritem, #ariyui219.yui-skin-sam .yuimenunav .yuimenuitem - line 2463 remove the class
#ariyui219.yui-skin-sam .yuimenubarnav .yuimenubaritem



Add this rule at the end of your css

.bd ul li {
display:inline-block
}

Make those changes and we will see where we are. (remember to make a backup of the css file)
0
GaryCommented:
Though I do suggest removing all the nested divs and just have your lists one after each other.
0
GaryCommented:
If you removed all the divs so you only had the containers:
<div class="rowby2columnfooter">
<div class="rowby2columnfooter-body">
<div class="rowby2columnfooter-text">


followed by your 3 UL's and copyright bit.

You could just use this css and you would be done
.rowby2columnfooter-text ul{
      display:inline-block;
      clear:both;
}

.rowby2columnfooter-text ul li{
      background-image;
}


And a bit of padding to the LI class to suit your needs.
0
Rowby GorenAuthor Commented:
Hi GaryC123,

I think I made the changes you suggested.

I would redo the nested divs -- but they are each created by individual modules.  I know they could have been built better -- but this site will soon have an upgrade and at that time the bottom menu will be constructed as you suggested.

But for now I'd just like to get that menu properly centered :)

If it is too late for you we can resume tomorrow or whenever it is convenient for you.

Rowby
0
Rowby GorenAuthor Commented:
I missed your previous comment, and yes, you are right,.

But for now if we could patch up what is there (without me having to recreate the three modules that created the menu that would be a good temporary fix until the site is upgraded soon.....

Rowby
0
GaryCommented:
Add this css
.bd ul {
    display: inline-block;
}


There doesn't seem to be any purpose to this class - template.css line 2469
#ariyui244.yui-skin-sam .yuimenubar {
    background: url("js/assets/menu/sam/sprite.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #808080;
    font-size: 93%;
    line-height: 2;
    margin-left: 300px;
}

If there isn't then remove it, if there is some point to it then remove the margin-left:300px

And that should be it.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor Commented:
I think those last changes fixed it!  ?? :)


Rowby
0
GaryCommented:
Looks fine to me ;o)
0
Rowby GorenAuthor Commented:
Good!  Thanks!  It really was a mess for me -- you zeroed right in on the issue

Thanks!!

Rowby
0
Rowby GorenAuthor Commented:
Bravo!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.