View Full Version : How can I center my menu?

suave design
05-11-2011, 10:03 AM
I am having difficulty centering my menu for ALL browsers and screen sizes. I am able to center the website, using <div align:center;> under the body tag in the html. However, the menu just stays in the same place, and does not center.
The link to my site is www.trecall.com. (http://www.trecall.com).

Please help!!
Thank you.

05-11-2011, 10:07 AM
Start with fixing the errors in your markup, see http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.trecall.com%2F

suave design
05-11-2011, 10:32 PM
I validated the website now. There are no errors. My problem still remains. I cannot get the main animated menu to be in the center of the site on all screen sizes. Please help!

05-11-2011, 10:45 PM
Hello suave design,
Your h1 is floated with nav beside it. Is it actually .main that you want centered?
To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto

To center main you would need to make your CSS look like this -
.main { width: /*1280px;*/125em;/*2000*/
/*border:4px solid yellow;*/
/*margin:0 auto;*/
margin: 0 auto;

suave design
05-11-2011, 11:02 PM
It's actually .cc_menu that I want to center. I tried doing margin:0 auto; on main, though, and that did not either work. Please help!
Thank you.

05-12-2011, 12:19 AM
If you folllow my earlier suggestion on how to center things you might try these changes highlighted in red -

.main { width: /*1280px;*/125em;/*2000*/
/*border:4px solid yellow;*/
/*margin:0 auto;*/
margin: 0 auto;
background: #f00;

margin: 0 auto;
background: #00f;/*9.375em;*/
position: relative;
/*border:3px solid green;*/

The background colors are just for a visual so you can see how things lay. You may want to re-think the width you have on .cc_menu right now.

05-12-2011, 01:22 AM
Maybe use this demo centering menu items as a guide.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
#linksContainer {
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
width: 900px;
overflow: hidden;
border: 1px solid red}
#linksList {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
position: relative;
left: 50%}
#linksList li {
float: left;
margin: 0px 20px 0px 20px;
position: relative;
right: 50%}

<div id="linksContainer">
<ul id="linksList">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>