Question

我的网站出现问题我正在尝试重新设计它。

网站：Link

这是我的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; 我不是为什么你放浮，但我工作你的小提琴链接。菜单中心页面。

CSS中心问题

2 个答案: