如何在窗口調整大小時停止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); 
    }); 
});

我不能爲我的生活弄清楚該做什麼確保用戶仍然可以看到導航窗口的大小。

來源

2013-05-02 Joshua Tasman

請不要使用製表符。代碼塊每行需要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-02 01:31:14

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

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

如何在窗口調整大小時停止HTML元素gettting？

回答

相關問題