青いナビゲーション バーの下の画像を下に移動して、下のコンテンツの本体に接続する必要があります (Web ページのコンテンツの周りに影付きのボックスの外観を作成することになっています)。以下はページの HTML です。下に移動しようとしている画像は、boy_top.png です。誰もこれを行う方法を知っていますか? 「メイン」「ページ」および「メニュー」セクションの CSS も含めました。青色のナビゲーション エリアは「メニュー」セクションに、メイン コンテンツ エリアは「メイン」セクションに接続されており、それらはすべて「ページ」CSS にカプセル化されています。
<div class="page">
<header>
<div style="margin: 20px;">
@* <a href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </a>*@
<span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
<span style="color: white; font-size: 18px; "> </span>
</div>
@* </a>*@
@* <div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>*@
<nav>
<ul id="menu">
<li>@Html.MenuLink("Agents", "Index", "Agent")</li>
<li>@Html.MenuLink("Products", "Index", "Product")</li>
<li>@Html.MenuLink("Product Training", "Index", "Course")</li>
<li>@Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
<li>@Html.MenuLink("Help", "About", "Home")</li>
</ul>
</nav>
</header>
<img src="../../Content/images/body_top.png" id="topPic" alt="tag"/>
<section id="main">
@RenderBody()
</section>
<footer>
<span style="color: Gray;"> Copyright © 2012 Symetra Life Insurance Company. All rights reserved. Symetra® is a registered service mark of Symetra Life Insurance Company. For Internal Use Only. </span>
</footer>
</div>
CSS
#main
{
background-image: url('../../Content/Images/body_rpt.png');
background-repeat: repeat-y;
clear: both; /*add this so tabs go left! */
padding: 15px 15px 15px 30px; /*30px 30px 15px 30px; */
background-color: #fff;
/*border-radius: 4px 0 0 0;*/
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
}
.page {
width: 83.7em;
margin-left: auto;
margin-right: auto;
}
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
}
ul#menu li#greeting {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}
ul#menu li a {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
/*background-color: #e8eef4;*/
color: Navy; /*#034af3; */
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
/*ul#menu li a:hover {
background-color: #fff;
text-decoration: none;
}*/
ul#menu li a:active {
background-color: #a6e2a6;
text-decoration: none;
}
ul#menu li.selected a {
background-color: #fff;
color: #000;
}
/* this one is for the active tab */
.current
{
font-size: 120%;
font-weight: bold;
border-style: double;
}