如何在窗口调整大小时停止HTML元素gettting？

问题描述：

我在网站上有一个导航栏和一个div。该div略微覆盖导航栏，但是当我调整我的窗口时，它完全覆盖导航栏。我希望它总是有点覆盖导航栏，但不完全。如何在窗口调整大小时停止HTML元素gettting？

HTML

<body> 
    <div id="wrapper"> 
     <ul> 
      <li class="nav"><a href="#">Home</a></li> 
      <li class="nav"><a href="#">About Me</a></li> 
      <li class="nav"><a href="#">Projects</a></li> 
      <li class="nav"><a href="#">Resume</a></li> 
      <li class="nav"><a href="#">Contact</a></li> 
     </ul> 
     <div id="bod"> 
      <h1 class="title">Home</h1> 
     </div> 
    </div> 
</body>

CSS

#bod { 
    height: 100%; 
    width: 86%; 
    background-color: #F4F3EE; 
    position: absolute; 
    top: 0px; 
right: 0px; 
    box-shadow: -1px 0px 10px 1px #999; 
    -moz-box-shadow: -1px 0px 10px 1px #999; 
    -webkit-box-shadow: -1px 0px 10px 1px #999;} 

.nav { 
    border: 1px solid #F4F3EE; 
    width:20%; 
    height:100px; 
    color: #F4F3EE; 
    margin: 2px 0px 0px 10px; 
    text-align: left; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 30px; 
    padding: 0px 0px 5px 0px; 
    list-style-type: none; 
    border-radius: 5px; 
    box-shadow: -1px 0px 10px 1px #999; 
    -moz-box-shadow: -1px 0px 10px 1px #999; 
    -webkit-box-shadow: -1px 0px 10px 1px #999; 
    box-shadow: inset 1px 2px 4px #F4F3EE; 
    -moz-box-shadow: inset 1px 2px 4px #F4F3EE; 
    -webkit-box-shadow: inset 1px 2px 4px #F4F3EE; 
    background: #b58aa5; 
    background: -moz-linear-gradient(top, #ad8599 1%, #b58aa5 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ad8599), color-stop(100%,#b58aa5)); 
    background: -webkit-linear-gradient(top, #ad8599 1%,#b58aa5 100%); 
    background: -o-linear-gradient(top, #ad8599 1%,#b58aa5 100%); 
    background: -ms-linear-gradient(top, #ad8599 1%,#b58aa5 100%); 
    background: linear-gradient(to bottom, #ad8599 1%,#b58aa5 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ad8599', endColorstr='#b58aa5',GradientType=0);

的JavaScript

$(document).ready(function() { 
    $('.nav').mouseenter(function() { 
     $(this).animate({marginLeft: '-=20px'}, 100); 
    $(this).addClass('.nav1'); 
    }); 
    $('.nav').mouseleave(function() { 
     $(this).animate({marginLeft: '+=20px'}, 100); 
    }); 
});

我不能为我的生活弄清楚该做什么确保用户仍然可以看到导航窗口的大小。

请不要使用制表符。代码块每行需要4个空格，每个级别需要额外4个空格。 – 2013-05-02 01:27:42

另外，不应该在列表中使用.nav而不是其中的项目？ – 2013-05-02 01:36:58

答

设置left: 200px;在#bod，这将解决它。然后，您可以摆脱设置在#bod上的width: 86%;。你绝对定位#bod，这意味着#bod被取消了正常流程，并转化为它自己的东西。现在您可以设置top，left，bottom和right指定网页两侧和#bod之间的空间。如果您在#bod上设置bottom: 0px;，则#bod上也不需要height: 100%;。

完美运作。非常感谢！ – 2013-05-06 02:35:57

太棒了:)你可以接受答案。 – 2013-05-06 04:18:32

如何在窗口调整大小时停止HTML元素gettting？

相关推荐