0

I'm trying to design a website where everything is contained withing one main div that restricts everything to 85% of the screen width. I am trying to center the outer div, which seems to have worked, and make the inner div (menubar) float to the left. But no matter what I do I can't get it to go to the left of the outer div, it goes all the way to the left of the page. Thanks for any help. 

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

2

在您的 CSS 中，添加

#menubar {
    position: relative;
    left: 0px;
}

并删除内联 CSS：

<div id="menubar">
于 2013-07-29T18:17:47.323 回答
2

您可能想要使用HTML5符号。

现场演示

HTML

<main>
    <aside>Menu</aside>
    <section>
        <article>Content</article>
    </section>
</main>

CSS

html {
    background-color:black;
}
main {
    background-color:red;
    width:85%;
    height:400px;
    margin: 0 auto;
    padding:4px;
}
aside {
    width:20%;
    height:90%;
    margin-top:5%;
    background-color:blue;
    color:white;
    clear:left;
    display:inline-block;
}
section {
    display:inline-block;
    background-color:green;
    padding:4px;
}
article {
    background-color:#F60;
}
于 2013-07-29T18:18:33.663 回答