Question

我的页面左侧有一个菜单，页面其余部分有内容。我有一个黑暗的纹理背景，所以我想要一个leftmenu div的半透明背景和一个内容div的半透明背景。但是，似乎body div与菜单div重叠并堆叠其透明度，同时使菜单div的内容透明。

我宁愿在两个部分之间留一个空格。有人可以查看我的代码并提出建议吗？

我有一些下面列出的代码，但是看看jsfiddle以获得完整的图片。

http://jsfiddle.net/5xmze/（注意，链接应与标题颜色相同）

CSS：

#body{
 padding-left:2px;
 width: 85%;
 position: relative;
 background-color:rgba(0,0,0,0.6);
}

#leftside {
 float: left;
 width: 15%;
 height: 100%;
}

HTML：

<div><span id="leftside">
    <ul class="leftmenu">
        <li class="leftmenu"><a href="index.php">Home</a></li>
        <li class="leftmenu"><a href="projects.php">Projects</a></li>
        <li class="leftmenu"><a href="resume.php">Resume</a></li>
        <li class="leftmenu"><a href="contact.php">Contact</a></li>
    </ul></span>
</div>
<div id="body">
Content here...
</div>

这是我想要完成的事情： This is what I'm trying to accomplish

Answer 1

最好的方法是将菜单和正文放入同一个父div中，然后float:left;将正文显示在菜单旁边。

不要忘记为两个元素设置宽度，因为如果#body的宽度大于页面上的可用空间，它将显示在菜单下。

Answer 2

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready( function(){ 
$(window).resize( function() {
var s = $("body").width();
$("body").css({ "min-width":s+"px" });
});
});
</script>
<style>
/* style.css */

body {
font-size: 1em;
background-image:url('http://i1358.photobucket.com/albums/q764/kenny_johnson5/blackorchid_zpsc8d78a87.png');
color:#FFF;
font-family:Arial;
width:85%;
margin-left:16%;
}

h1 {
 font-family:Cambria,Serif;
 color:#81E500;
 text-align:center;
}

#top{
 width: 85%;
 position: relative;
}

#body{
padding-left:90px;
width: 85%;
position: relative;
background-color:rgba(0,0,0,0.6);
}

a {
color:#81E500;
font-family:Cambria,Serif;
font-size:1.5em;
}

#leftside {
 float: left;
 width: 15%;
 height: 100%;
    margin-left:-15%;
    z-index:999;
}

ul.leftmenu {
 list-style-type:none;
 margin:0px;
 padding:1px;
 background-color:rgba(0,0,0,0.6);
 border: 1px solid;
 border-color:#000;
 height:100%;
}

li.leftmenu {
padding:5px;

}
</style>
<html>

<div><div id="leftside">
    <ul class="leftmenu">
        <li class="leftmenu"><a href="index.php">Home</a></li>
        <li class="leftmenu"><a href="projects.php">Projects</a></li>
        <li class="leftmenu"><a href="resume.php">Resume</a></li>
        <li class="leftmenu"><a href="contact.php">Contact</a></li>
    </ul></div>
</div>



<div id="body">
<div id="top">
<h1>Header</h1>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt erat sit amet dolor imperdiet dignissim. Nunc eu enim erat. Suspendisse commodo faucibus risus at facilisis. Phasellus tortor urna, fringilla sed blandit non, porta vel enim. Vivamus placerat, risus et molestie elementum, risus elit dignissim elit, non porttitor nisl tortor sed lorem. Maecenas scelerisque mattis massa, vel blandit erat blandit sed. Vivamus erat augue, varius ac aliquet non, commodo id massa. Maecenas sit amet est posuere turpis ultrices aliquam. Nulla feugiat ultrices diam vitae egestas. Phasellus risus augue, dapibus nec condimentum non, tempus eu massa. Etiam sodales sodales dolor eu convallis.
</p>
<p>
Aenean in dignissim metus. Suspendisse placerat pharetra justo, et tristique neque vestibulum non. Quisque malesuada scelerisque diam eget suscipit. Donec non sollicitudin justo. Etiam sit amet massa felis. Maecenas aliquet cursus tristique. Etiam sollicitudin augue in risus venenatis rhoncus. Pellentesque tellus diam, porttitor in dapibus eu, rutrum eu lectus. Vestibulum luctus hendrerit augue vitae interdum. Donec in turpis malesuada arcu tempor placerat. Aliquam eget nisl ipsum. Cras blandit elementum vulputate. Ut vulputate ullamcorper urna, quis congue mauris laoreet nec. Morbi vitae dui eros.
</p>
<p>
Phasellus rhoncus ultrices sem et dictum. Ut ut nisl eget eros porttitor commodo auctor vitae leo. Quisque sed nulla augue, vel venenatis augue. Pellentesque bibendum sodales lectus, quis malesuada risus consectetur a. Aliquam lobortis aliquet vulputate. Duis sed velit est, in venenatis est. Vivamus viverra lacinia sapien non sodales. Aenean eleifend quam diam, id gravida tellus. Praesent dui sem, volutpat eu blandit in, volutpat ornare nulla. Nunc sed eros dolor.
</p>
<p>
Quisque sit amet diam nisl, volutpat interdum arcu. Proin et justo lorem. Mauris vitae egestas lacus. Nullam ut laoreet turpis. Donec eget metus enim, id porta orci. Nam condimentum feugiat tempor. Nunc ultricies pellentesque euismod. In hac habitasse platea dictumst. Etiam fringilla bibendum sapien, eu vestibulum nisi imperdiet tempus. Duis tincidunt magna id sapien porta vel aliquam massa tincidunt. Maecenas ut metus id augue congue scelerisque id nec enim. Ut ac nibh est, et laoreet orci. Nulla fermentum laoreet augue, in vulputate risus varius vel. Sed ac nunc quis tortor scelerisque rutrum.
</p>
<p>
Nullam adipiscing ultricies lacus ac pretium. In hac habitasse platea dictumst. Nullam convallis libero non augue sollicitudin mattis. Nunc commodo pharetra magna, tempor sagittis sem vehicula nec. Quisque massa ligula, gravida nec fringilla quis, tempus vel dolor. Nam et sem bibendum mi consectetur tincidunt. Nam placerat venenatis odio sit amet imperdiet. Integer luctus quam quis quam lobortis aliquam. Cras dignissim semper erat, ac laoreet leo volutpat quis. </p>

</div>
</body>
</html>

如何阻止我的背景div重叠我的菜单div？

2 个答案: