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.