ユーザーが[サインイン]をクリックしたときに、jQueryを使用してサインインボックスを下にスライドさせています。クリックすると、ロゴも含めてページ全体を下にスライドさせたいです。これまでのところ、ロゴを除いて、ページは下にスライドします。あなたはここでページを見ることができます:
「サインイン」または「サインアップ」のいずれかをクリックすると、ページの本文が下にスライドします(誇張するには下マージンを500pxに設定します)。ただし、ご覧のとおり、ロゴ「mi.ni」は下にスライドしません。
<div id = 'header'>
<a href = '/' title = 'mi.ni' id = 'logo'>mi.ni</a>
</div>
上はロゴのHTML、下は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;
}