I want to adjust the positioning of the image below the blue navigation bar so that it aligns with the main content area below, creating the appearance of a shaded box around the webpage's content. The image in question is boy_top.png. Is there a way to achieve this? Below, you'll find the HTML code for the page, along with the CSS for the "main," "page," and "menu" sections. The blue navigation area is linked to the "menu" section, the main content area to the "main" section, and all of them are styled using the "page" 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;
}