로고가 아래로 움직이지 않습니다 (HTML, CSS, jQuery)

Question

"로그인"을 클릭 할 때 jQuery를 사용하여 로그인 상자를 아래로 슬라이드합니다. 클릭하면 로고를 비롯하여 전체 페이지가 아래로 슬라이드됩니다. 지금까지 로고는 제외하고 페이지가 아래로 내려갔습니다. 현재 페이지를 볼 수 있습니다

중 "로그인"또는 클릭 "회원 가입"

http://mini.lukedude5.com

이 페이지의 몸이 아래로 슬라이드 (설정 아래쪽 여백을 500 픽셀로 과장). 그러나 보시다시피, "mi.ni"로고는 아래로 미끄러지지 않습니다.

<div id = 'header'> 
    <a href = '/' title = 'mi.ni' id = 'logo'>mi.ni</a> 
</div> 

위 로고는 로고입니다. 아래는 CSS입니다.

#wrapper 
{ 
    width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#wrapper #header 
{ 
    height: 100px; 
    width: 260px; 
    background: url('/styles/images/logo2.png') no-repeat; 
    margin: 20px auto 0px auto; 
} 

#wrapper #header #logo 
{ 
    height: 100px; 
    width: 260px; 
    display: block; 
    text-indent: -9999px; 
} 

헤더가 래퍼로 묶여 있습니다. 로그인 상자가 아래로 내려 오는 막대는 래퍼 안에 없습니다.

/최대 상자에서 기호의 CSS는 다음과 같습니다

은

#topBar #signIn, #signUp 
{ 
    width: 250px; 
    float: right; 
    color: #FFF; 
    margin-top: 5px; 
    font-weight: bold; 
    display: none; 
    margin-bottom: 500px; 
} 

은이 문제에 어떤 도움에 감사드립니다!

편집 : 페이지 상단에있는 막대의 HTML. 바

<div id = 'topBarWrapper'> 
     <div id = 'topBar'> 
      <div id = 'mainTop'> 
       mi.ni is a URL shortening service. Learn more about mi.ni. I am trying my hardest to get the domain http://mi.ni. 
      </div> 
      <div id = 'rightTop'> 
       <span id = 'signInText'>Sign In</span> 
       | 
       <span id = 'signUpText'>Sign up</span> 
      </div> 
      <div id = 'signIn'> 
       <form action = '' method = 'POST'> 
        <table> 
         <tr> 
          <td>Username:</td> 
          <td><input type = 'text' name = 'username' id = 'usernameSignIn' class = 'input' /></td> 
         </tr> 
         <tr> 
          <td>Password:</td> 
          <td><input type = 'password' name = 'password' id = 'passwordSignIn' class = 'input' /></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td><div class = 'signInSubmit'></div></td> 
         </tr> 
        </table> 
       </form> 
      </div> 
      <div id = 'signUp'> 
       <form action = '' method = 'POST'> 
        <table> 
         <tr> 
          <td>Username:</td> 
          <td><input type = 'text' name = 'username' id = 'usernameSignUp' class = 'input' /></td> 
         </tr> 
         <tr> 
          <td>Email:</td> 
          <td><input type = 'text' name = 'email' id = 'emailSignUp' class = 'input' /></td> 
         </tr> 
         <tr> 
          <td>Password:</td> 
          <td><input type = 'password' name = 'password' id = 'passwordSignUp' class = 'input' /></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td><div class = 'signUpSubmit'></div></td> 
         </tr> 
        </table> 
       </form> 
      </div> 
     </div> 
    </div> 

CSS는 :

#topBarWrapper 
{ 
    width: 100%; 
    height: 25px; 
    padding-top: 5px; 
    background: #000; 
    color: #FFF; 
} 

#topBar 
{ 
    width: 1050px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#topBar #mainTop 
{ 
    display: inline; 
} 

#topBar #rightTop 
{ 
    display: inline; 
    margin-left: 50px; 
    font-weight: bold; 
} 

#topBar #rightTop #signInText 
{ 
    cursor: pointer; 
    margin-right: 5px; 
} 

#topBar #rightTop #signUpText 
{ 
    cursor: pointer; 
    margin-left: 5px; 
} 

#topBar #signIn, #signUp 
{ 
    width: 250px; 
    float: right; 
    color: #FFF; 
    margin-top: 5px; 
    font-weight: bold; 
    display: none; 
    margin-bottom: 500px; 
} 

Answer 1

명확한 설정 : 두 래퍼 DIV에. 거기에 약간의 붕괴가있었습니다.

#wrapper { 
width: 1000px; 
margin-left: auto; 
margin-right: auto; 
clear: both; 
}