창 크기를 조정할 때 HTML 요소 gettting을 막는 방법은 무엇입니까?

저는 웹 사이트에 nav bar와 a div가 있습니다. div는 nav 막대를 약간 덮고 있지만 내 창의 크기를 조정하면 nav 막대를 완전히 덮습니다. 항상 어느 정도 탐색 표시 줄을 감추고 싶지만 완벽하지는 않습니다.창 크기를 조정할 때 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>

나는 내 인생의 사용자가 아직 있는지 볼 수 있도록 무슨 일을하는지 알 수 없을

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

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);

자바 스크립트 창 크기가 조정되면 탐색하십시오.

출처

2013-05-02 Joshua Tasman

탭을 사용하지 마십시오. 코드 블록에는 행당 4 개의 공백이 필요하고 레벨 당 4 개의 공백이 필요합니다. –

또한 .nav가 포함 된 항목 대신 목록에서 사용되지 않아야합니까? –

left: 200px;을 #bod에 설정하면 문제가 해결됩니다. 그런 다음 width: 86%;을 제거 할 수 있으며 이는 #bod에도 설정되어 있습니다. #bod을 절대적으로 배치하고 있습니다. 즉, #bod이 규칙적인 흐름에서 벗어나 자신의 것으로 바뀌 었음을 의미합니다. 이제 top, left, bottom 및 right을 설정하여 웹 페이지의 측면과 #bod 사이의 공백을 지정할 수 있습니다. #bod에 bottom: 0px;을 설정하면 #bod에 height: 100%;이 필요하지 않습니다.

출처

2013-05-02 01:31:14

완벽하게 작동했습니다. 고마워요! –

위대한 :) 그럼 대답을 받아 들일 수 있습니다. –

창 크기를 조정할 때 HTML 요소 gettting을 막는 방법은 무엇입니까?

답변

관련 문제