Проблемы с центрированием CSS

Question

У меня проблемы с моим сайтом, в настоящее время я пытаюсь изменить его.

Сайт: Ссылка

Это мой 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;
}

Проблема в том, что когда вы переходите по ссылке выше .menu div там нет, я возился с css, но он просто не центрируется.Кроме того, когда проблема была в центре, у меня также было то, что когда вы увеличивали масштаб с помощью java-скрипта, меню было частично на экране, и вы не могли прокрутить его.

Это код дляглавная страница:

<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>

Буду признателен за любую помощь,

Спасибо, парни и девушки!

Answer 1

Поместите это в свой CSS:

.container > *{margin:0 auto}

Есть и несколько других проблем. meta, link и код для IE должен быть в head, а не body.

Answer 2

попробовать

.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;
}

только я удаляю float:left; и margin:0 auto; Я не знаю, почему ты положил поплавок, но я поработал над твоей скрипкой. меню идет по центру страницы.