0

サイトのタイトルをバナー画像に置き換えようとするたびに、フォーマットがおかしくなり、不安定になります。通常、ヘッダーの下部に配置する必要があるすべてのリンクが上部に浮き上がり、混乱します。以前にこれに遭遇し、修正方法を知っている人はいますか?

私が使用しているヘッダーは次のとおりです。

<header>
    <div class="content-wrapper">
        <div class="float-left">
            <p class="site-title">@Html.ActionLink("FantasiTrade", "Index", "Home")</p>
        </div>
        <div class="float-right">
            <section id="login">
                @Html.Partial("_LoginPartial")
            </section>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Browse Units", "", new { area = "", controller = "Units"})</li>
                    @{ if (User.Identity.Name != null) { if (User.Identity.Name != ""){
                    <li>@Html.ActionLink("Sell Unit", "Create", new { area = "", controller = "ActiveTrades" })</li>
                    <li>@Html.ActionLink("Your Profile", "profile", new { user = User.Identity.Name, area = "", controller = "ActiveTrades"})</li>}}}
                </ul>
            </nav>
        </div>
    </div>
</header>

リンクの「メニュー」リストを、置き換えたときにヘッダーの上部に浮かび上がるのではなく、ヘッダーの下部に配置したままにします。

<p class="site-title">@Html.ActionLink("FantasiTrade", "Index", "Home")</p>

と:

<img src = "mybanner.jpg" />

私を助けてくれる人に感謝します!

要求された CSS です。これらは関連する部分だと思います。実際のファイルは膨大です。すべてを見たい場合はお知らせください。

/* site title
----------------------------------------------------------*/
.site-title {
    color: #000000;
    font-family: "Franklin Gothic Medium", Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 3em;
    margin: 0px;
    margin-left: 25px;
}

.site-title a, .site-title a:hover, .site-title a:active {
    background: none;
    color: #000000;
    outline: none;
    text-decoration: none;
}


/* login
----------------------------------------------------------*/
#login {
    display: block;
    font-size: .85em;
    margin: 0 0 10px;
    text-align: right;
}

    #login a {
        background-color: #d3dce0;
        margin-left: 10px;
        margin-right: 3px;
        padding: 2px 3px;
        text-decoration: none;
    }

    #login a.username {
        background: none;
        margin: 0;
        padding: 0;
        text-decoration: underline;
    }

    #login ul {
        margin: 0;
    }

    #login li {
        display: inline;
        list-style: none;
    }


/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
    }

        ul#menu li a {
            background: none;
            color: #999;
            text-decoration: none;
        }

        ul#menu li a:hover {
            color: #333;
            text-decoration: none;
        }
4

1 に答える 1