Block Code, Center Menu

User 2924428 Photo


Registered User
1,718 posts

Hey guy's, I've had this problem before but it's not seeming to respond to me very well.. I have a CSS menu that was built using CC's internal coder, and what I need is to make it center on all computers, what would be a code that would center it ?
.menu {
position: absolute;
right: 325px;
z-index: 1000;
margin: auto;
width: 750px;
height: 150px;
border: none;
padding-bottom: 0;
display: block;
}

This is what I have so far..
User 187934 Photo


Senior Advisor
20,267 posts

Link?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2924428 Photo


Registered User
1,718 posts

www.torchmod.com
It's still in building stages..
User 122279 Photo


Senior Advisor
14,626 posts

Matt, add this to your menu-menu stylesheet:

.center {
width:750px;
margin: auto;
height: 35px;
border: 1px solid yellow;
}

Then in the html, put the whole <ul></ul> containing the menu inside the <div class="center"></div>

Remove this from the .menu:
position: absolute;
right: 325px;

The width of the class center has to be the exact width of your menu, so if 750 is too much or too little, change it. The yellow border is only there to show you the outline of the class menu, so when you have adjusted the width you can delete the border.
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 122279 Photo


Senior Advisor
14,626 posts

Actually, you can remove the whole .menu, as it is being replaced by the .center.
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 2924428 Photo


Registered User
1,718 posts

Thank you Inger!! :)
User 2924428 Photo


Registered User
1,718 posts

It pushed off to the left for some reason, it didn't auto center. :(
User 187934 Photo


Senior Advisor
20,267 posts

.menu {
z-index: 1000;
margin: auto;
width: 600px;
height: 150px;
border: none;
padding-bottom: 0;
display: block;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 122279 Photo


Senior Advisor
14,626 posts

You have made an error in the html file here:

<ul class="menu-menu">
<div class="center">

Reverse the sequence of those two, then the menu will pop into the center, and you don't need the class .menu.

Also, you can see by the yellow outline that the class .center is too wide. Set it to 603px as shown below:

.center {
width:603px; /* Has to wrap tightly around the menu ul */
margin: auto;
height: 35px;
border: 1px solid yellow; /* should be removed after width has been adjusted. */
}

Actually, you don't need to specify the height, just delete it. If you for some reason give the menu a larger font, or add another couple of menu items, remember to adjust the width (and the height if you haven't deleted it) accordingly.
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 2924428 Photo


Registered User
1,718 posts

Thanks Inger, Eric, I am currently running around trying to begin my Monster Hunter modification and code for the website, while preparing for school tomorrow so I don't think to look at the code more than once. I wish I could slow down but i'm going full steam ahead!! Thank you guys for helping!!

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.