CSS 定心问题

Question

I'm having problems with my site i am currently trying to redesign it.

The site: Link

This is my css style-power.css

/* main body style */
body {
background: #c7ff9a;
color: #000000;
font-family: Tahoma, Verdana, sans-serif;
font-size: 12px;
margin: auto;
text-align:center;
}

.container {
width:1800px;
}

.bodycentre {
text-align: center;
width:1300px;
vertical-align:middle;
margin-left:40px;
margin-right:40px;
font-family: Tahoma, Verdana, sans-serif;
}

.header {
text-align:center;
vertical-align:middle;
background:url(../images/powerplay.png) center top no-repeat;
height:150px;
width:1300px;
margin: -10px 0 0 0;
border-bottom:2px solid #ddd;
border-left:2px solid #ddd;
border-right:2px solid #ddd;
box-shadow: 0 0 6px #000;
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
padding: 4px 10px 4px 15px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

.menu {
position:relative;
float:left;
z-index:5001;
width:190px;
height:215px;
margin: 0 0 0 -305px;
border: 2px solid #ddd;
box-shadow: 0 0 6px #000;
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
padding: 4px 10px 4px 15px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

.footer {
text-align: center;
vertical-align:baseline;
position: relative;
width:1300px;
}

Problem is that when you go to the link above the.menu div is not there i have fiddled with the css but it just doesn't center. Also when it did center the problem i also had was that when you zoomed in with the java-script zoom the menu was partly of the screen and you could not scroll over to it.

This is the code for the index page:

<link rel="stylesheet" type="text/css" media="screen" href="../styles/style-power.css" />
<div class="container">
<div class="header"></div>
<br />
<br />
<div class="menu">
<ul id="nav">
  <p align="left"><strong>Power Play Pro Shop</strong></p>
  <li><a href="/?module=power-play&n=index" title="Home">Home</a></li><br />
  <li><a href="#"><strong>Deals</strong></a><ul>
  <li><a href="/?module=power-play&n=balls" title="Balls">Balls</a></li>
  <li><a href="/?module=power-play&n=bags" title="Bags">Bags</a></li>
  <li><a href="#">Shoes</a></li>
  <li><a href="/?module=power-play&n=Combos" title="Combos">Combos</a></li>
  </ul></li>  
<br>
  <li><a href="/" title="Doubles Home">Doubles Home</a></li><br>
<li><a href="/?module=admin&n=index" title="Admin">Admin Login</a></li></ul>
</div>
<div class="bodycentre">
  <h3>Power Play Pro Shop</h3>
  <p>&nbsp;</p>
  <h1>Deals</h1>
  <p>Special Deals for the Bowlplex Doubles 2011</p>
  <p><a href="/?module=power-play&n=balls" title="Balls">Balls</a></p>
  <p><a href="/?module=power-play&n=bags" title="Bags">Bags</a></p>
  <p>Shoes</p>
  <p><a href="/?module=power-play&n=Combos" title="Combos">Combos</a></p>
  <p>&nbsp;</p>
  <h2>Staff</h2>
  <p><img src="../images/players_8_1.jpg" alt="Steve Thornton" width="150" height="200" border="1" /></p>
  <p><strong>Steve Thornton</strong></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>For Admin Access <a href="/?module=admin&n=login" title="Admin">Click Here</a></p>
</div>
<br />
<div class="footer">
<p>© 2011 David Passmore (David Passmore Web Development)<a href="http://www.powerplayproshop.com"></a></p>
</div>
</div>

Any help would be appreciated,

Thanks Guys and Girls!

Answer 1

Put it into your CSS:

.container > *{margin:0 auto}

There are a few other problems too. meta , link and code for IE should be in head , not body .

Answer 2

try,

.menu {
    position:relative;

    z-index:5001;
    width:190px;
    height:215px;
    margin:0 auto;
    border: 2px solid #ddd;
    box-shadow: 0 0 6px #000;
    -moz-box-shadow: 0 0 6px #000;
    -webkit-box-shadow: 0 0 6px #000;
    padding: 4px 10px 4px 15px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

just i remove float:left; and margin:0 auto; i don't why are you put float but i worked your fiddle link. menu going center the page.