0

すべてを画面幅の 85% に制限する 1 つのメイン div にすべてが含まれる Web サイトを設計しようとしています。機能しているように見える外側の div を中央に配置し、内側の div (メニューバー) を左にフロートさせようとしています。しかし、私が何をしても、外側のdivの左側に移動することはできません。ページの左側にずっと移動します。助けてくれてありがとう。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accessorize With Style | Index</title>
<style type="text/css">
body {
    overflow:hidden;
}
img.background {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    z-index:-1;
}
.menu{
    margin:0; 
    padding:0; 
    width:300px; 
    list-style:none;
    background:rgb(255,255,255);
}
.menu li{
    padding:0; 
    margin:0 0 1px 0; 
    height:40px; 
    display:block; 
}
.menu li a{
    text-align:left;
    height:40px; 
    padding:0px 25px; 
    font:16px Verdana, Arial, Helvetica, sans-serif; 
    color:rgb(255,255,255); 
    display:block; 
    background:url('images/verMenuImages.png') 0px 0px no-repeat; 
    text-decoration:none;
}
.menu li a:hover{
    background:url('images/verMenuImages.png') 0px -40px no-repeat; 
    color:rgb(0,0,0);
}
.menu li a.active, .menu li a.active:hover{
    background:url('images/verMenuImages.png') 0px -80px no-repeat; 
    color:rgb(255,255,255);
}
.menu li a span{
    line-height:40px;
}
#site {
    width:85%;
}
</style>
</head>

<body>
<img src="images/background.jpg" class="background" /> 
<div id="site" align="center">
<div id="menubar" align="left">
<ul class="menu">
  <li><a href="index.html" class="active"><span>Home</span></a></li>
  <li><a href="about.html"><span>About</span></a></li>
  <li><a href="necklaces.html"><span>Necklaces</span></a></li>
  <li><a href="bracelets.html"><span>Bracelets</span></a></li>
  <li><a href="earings.html"><span>Earings</span></a></li>
  <li><a href="rings.html"><span>Rings</span></a></li>
  <li><a href="scarves.html"><span>Scarves</span></a></li>
  <li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
<div id="gallery" align="center">
</div>
</div>
</body>
</html>
4

2 に答える 2