0

ユーザーが[サインイン]をクリックしたときに、jQueryを使用してサインインボックスを下にスライドさせています。クリックすると、ロゴも含めてページ全体を下にスライドさせたいです。これまでのところ、ロゴを除いて、ページは下にスライドします。あなたはここでページを見ることができます：

http://mini.lukedude5.com

「サインイン」または「サインアップ」のいずれかをクリックすると、ページの本文が下にスライドします（誇張するには下マージンを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;
}
4

1 に答える 1

3

clear：bothをラッパーdivに設定します。そこでは崩壊が起こっていました。

#wrapper {
width: 1000px;
margin-left: auto;
margin-right: auto;
clear: both;
}
于 2012-04-10T02:21:52.213 に答える