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