An error in my ASP.NET Web Application

Question

I'm using Microsoft Visual Studio 2010 as my editor. I experienced a problem regarding the layout. I haven't put on any content place holder yet so the links/header can be seen when I view it in browser.

<div id="header_container">
    <div id="header">
             <a href="App_Themes/Theme1/index.html"><img src="Images/bannermj.png" alt="MichaelJona Trucking Services, Co." title="MichaelJona Trucking Services, Co." border="0" width="276" height="217" /></a>
        <ul>
          <li ><a href="default.aspx">Home</a> </li>
          <li ><a href="about_us.aspx">About Us</a></li>
          <li ><a href="trucks.aspx">Trucks</a></li>
          <li ><a href="services.aspx">Services</a></li>
          <li ><a href="register.aspx">Register</a></li>
         <li class="contact"><a href="#">Contact</a></li>
        </ul>
    <h1></h1>                
</div>

But because it needs a content place holder, I put the content place holder inside the tag:

<div id="header_container">
    <div id="header">
              <a href="App_Themes/Theme1/index.html"><img src="Images/bannermj.png" alt="MichaelJona Trucking Services, Co." title="MichaelJona Trucking Services, Co." border="0" width="276" height="217" /></a>
   <asp:ContentPlaceHolder ID="sidebar" runat="server">
       <ul>
       <li ><a href="default.aspx">Home</a> </li>
       <li ><a href="about_us.aspx">About Us</a></li>
       <li ><a href="trucks.aspx">Trucks</a></li>
       <li ><a href="services.aspx">Services</a></li>
       <li ><a href="register.aspx">Register</a></li>
      <li class="contact"><a href="#">Contact</a></li>
     </ul>
    <h1></h1>
   </asp:ContentPlaceHolder>                    
</div>

When I viewed it in browser, the headers can't be seen anymore. I'm not sure if the problem is on the css.

/*----TOP PANEL----*/
#header_container
{
height:299px; 
position:relative; 
margin:0 auto; 
padding:0px; 
background-image:url(images/header_slice.gif); 
background-repeat:repeat-x; 
background-position:top;
 }

#header
{
width:755px; 
height:299px; 
position:relative; 
margin:0 auto; 
padding:0px 9px 0px 14px;
 }

#header img
{
height:86px; 
width: 728px; 
position:absolute; 
top:0; 
left:50px; 
padding:0px;}

#header ul
{
width:94px; 
height:145px; 
padding:23px 29px 20px 40px; 
position:absolute; 
top:103px; 
left:0px; 
background:url(images/ul.gif) 0 0 no-repeat;
}

#header ul li
{
background:url(images/bullet1.gif) 0 7px no-repeat #ccc; 
border-bottom:#929292 dotted 1px; 
font:12px/24px Verdana, Helvetica, sans-serif; 
font-weight:bold; 
color: #000; 
padding-left:10px;}

#header ul li.contact
{
border:none;
}

#header ul li a
{
font-family:Verdana, Helvetica, sans-serif; 
font-size:12px; 
font-weight:bold; 
text-decoration:none; 
background:#ccc; 
color:#212121;
}

#header ul li a:hover
{
 background:#ccc; 
 color:#B53332; 
 text-decoration:none;
}

#header h1
{
padding:137px 0px 0px 33px; 
background:url(Images/truck3.jpg) 0 0 no-repeat #fff; 
width:547px; 
height:51px; 
font-family:Verdana, Helvetica, sans-serif; 
font-size:13px; 
font-weight:bold; 
color: #3B3B3B; 
position:absolute; 
top:103px; 
left:175px;
}

/*----sidebar----*/

#sidebar
{
width:94px; 
height:145px; 
padding:23px 29px 20px 40px; 
position:absolute; 
top:103px; 
left:0px; 
background:url(images/ul.gif) 0 0 no-repeat;
}

#sidebar ul
{
width:94px; 
height:145px; 
padding:23px 29px 20px 40px; 
position:absolute; 
top:103px; 
left:0px; 
background:url(images/ul.gif) 0 0 no-repeat;
}

#sidebar ul li
{
 background:url(images/bullet1.gif) 0 7px no-repeat #ccc; 
 border-bottom:#929292 dotted 1px; 
 font:12px/24px Verdana, Helvetica, sans-serif; 
 font-weight:bold; 
 color: #000; 
 padding-left:10px;
 }

#sidebar ul li.contact
{
 border:none;
}

#sidebar ul li a
{
font-family:Verdana, Helvetica, sans-serif; 
font-size:12px; 
font-weight:bold; 
text-decoration:none; 
background:#ccc; 
color:#212121;
 }

#sidebar ul li a:hover
{
 background:#ccc; 
 color:#B53332; 
text-decoration:none;
 }

#sidebar h1
{
padding:137px 0px 0px 33px; 
background:url(Images/truck3.jpg) 0 0 no-repeat #fff; 
width:547px; 
height:51px; 
font-family:Verdana, Helvetica, sans-serif; 
font-size:13px; 
font-weight:bold; 
color: #3B3B3B; 
position:absolute; 
top:103px; 
left:175px;
}

I really need help. I can't even identify where the problem is. I'm new in web application.

Answer 1

The ContentPlaceHolder should be inside a Master page and should not have any elements within it.

You then place Content tags in your ASPX pages which point to the corresponding master page file.

The Content tags will have a ContentPlaceHolderID attribute which should match the ID of your ContentPlaceHolder in your Master Page.

Check this: http://msdn.microsoft.com/en-us/library/wtxbf3hh.ASPX

Answer 2

Place everything which is inside the content place holder outside of it.