...

View Full Version : How can I center my menu?



suave design
05-11-2011, 09:03 AM
Hi.
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.

abduraooft
05-11-2011, 09: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, 09: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!

Excavator
05-11-2011, 09: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;*/
/*text-align:center;*/
margin: 0 auto;
}

suave design
05-11-2011, 10: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.

Excavator
05-11-2011, 11:19 PM
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;*/
/*text-align:center;*/
margin: 0 auto;
background: #f00;
}

.cc_menu{
width:/*1290px;*//*99.625em;*//*100%;*/97.5em;
/*margin-left:150px;*/
margin: 0 auto;
background: #00f;/*9.375em;*/
/*margin:0:auto;*/
/*height:591px;*/
position: relative;
/*top:/*13.75em;*/
/*220px;left:/*0.938em;*//*15px;*/
font-size:14px;
text-transform:uppercase;
color:#fff;
overflow:hidden;
/*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.

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



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<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%}

</style>
</head>
<body>
<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>
</ul>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum