Frustrated over Css Menu positioning

User 464893 Photo


Ambassador
1,611 posts

I have tried many approaches to center a menu the latest following the help file. So I have uploaded a simple html file with menu and the center class added in the css, also uploaded. I changed the href to the S_Drive location. to demonstrate my angst.

Files html http://inkmon.coffeecup.com/storage/Trial.html
Converted css http://inkmon.coffeecup.com/storage/menu-menu.css

Also I am puzzled about this <li class="first"> I thought that "first" had to be declared in the css before used as type of Li or does this exist somewhere else. Or it is just a name in this case.

I could be barking up the wrong tree as I am apt to do. So I would dearly love to be corrected. I know it is something I am missing here. I Need a Master Class. It may be white but I still have some hair left. Please help me keep it.
The Guy from OZ


User 1948478 Photo


Senior Advisor
1,850 posts

You have an extraneous ">" at the end of your .center declaration:

.center { margin-left:auto; margin-right:auto; >}

Remove it and see if it makes any difference,...

EDIT: Just tried it here; didn't seem to help...
User 1948478 Photo


Senior Advisor
1,850 posts

You need to define widths for the body as well as for the container (i.e. the 'center' class in your case).
This will center the menu:

body {
width:100%;
}
.center {
width:50%; /* Here, for demo purposes, I used 50% quite arbitrarily... */
margin: 0px auto;
}
User 464893 Photo


Ambassador
1,611 posts

Did you try it Per. It still holds left. I changed the css to test. I will upload the change if you want.

You have an extraneous ">" at the end of your .center declaration:
That is how the the help file states it verbatim., I just copied even though it did not seem right. I am learning, took it to be another form.

body {
width:100%;
}
.center {
width:50%; /* Here, for demo purposes, I used 50% quite arbitrarily... */
margin: 0px auto;
}
I tried that in css above but still hard left. I have seen dozens of requests for help with centering the menu. Some thing seems to fight it.

Thanks for help you haven't asked for your copy of Snippet. I am using it and it is a great help with this sort of thing.

I will see if I can break down the code to make it work. It does a good menu and in a grid seems to comply on compression. I can put it in the center of a grid system but I also want to put it in the center of a simple browser display. I hate re inventing the wheel.

I shall switch to compressive form elements. I Have a lot of work there but at least straight forward.

I have another menu designer, Not as useful but I can compare differences. Still it will help me learn a little more. Thanks again for your help.Still have not ruled out yours truly as the culprit.

The Guy from OZ


User 1948478 Photo


Senior Advisor
1,850 posts

Per wrote:
You need to define widths for the body as well as for the container (i.e. the 'center' class in your case).
This will center the menu:

body {
width:100%;
}
.center {
width:50%; /* Here, for demo purposes, I used 50% quite arbitrarily... */
margin: 0px auto;
}

This code definitely centers the menu! ;) And, yes, I tried it to make sure. See the attached screenshot from Chrome. It's a little left of center, but that's because of my arbitrary choice of 50% for the total width of the menu.
Remember the cascading part of 'cascading style sheet'. It's always the latest, or more specific, style rule that governs. If you have a later rule for the same class(es) in the hierarchy of external-internal-inline style rules, it will override prior rules
Attachments:
User 1948478 Photo


Senior Advisor
1,850 posts

If you continue to have problems with the centering, please upload your current html and css files so we can have a look.
User 38401 Photo


Senior Advisor
10,951 posts

Also, you should be applying these codes to the menu tags themselves rather than to a separate class. Unless of course you're planning to use it for other things, but those settings really should be on the nav elements themselves rather than applying a class to it. Just another thought tidbit :)
User 122279 Photo


Senior Advisor
14,628 posts
Online Now

This is my way of doing it:

http://www.coffeecup.com/forums/website … post167612
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 464893 Photo


Ambassador
1,611 posts

Thanks Inger It is working, I shall go over the code that you and Per suggested and see where I went wrong.
Dear Jo Ann, I agree, I will take your advice and add the css to the menu to keep it neat. I shall save it as a snip. I will see just what is needed as a minimum.
I have reloaded the version Inger showed here. I did drop the border though. Easy when you know.

Files html http://inkmon.coffeecup.com/storage/Trial.html
Converted css http://inkmon.coffeecup.com/storage/menu-menu.css

You people humble me, thanks. Now to iron it into the grid. Onward to future and beyond.
The Guy from OZ


User 464893 Photo


Ambassador
1,611 posts

I have had a go at adding the centering to the existing code and it messes the menu. That is why the help file shows adding another class I think. Something the developers should address, a positional choice perhaps. Anyway I shall go with the flow.
The Guy from OZ



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.