thanks nile for your response.:)
my site isn't online. i am developing this by using dreamweaver.
here is my code:
CSS code:
#container {
width: 850px;
margin-right: auto;
margin-left: auto;
}
#header {
border:1px solid #E1E1E1;
height: 100px;
width: 850px;
background-image: url(images/header.jpg);
}
#content {
width: 500px;
padding: 10px;
margin-right: 160px;
margin-left: 160px;
}
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#ddcolortabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}
#ddcolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}
#ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}
#ddcolortabs a{
float:left;
color: white;
background: #678b3f url(media/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}
#ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding:4px 9px 2px 6px;
}
#ddcolortabs a span{
float:none;
}
#ddcolortabs a:hover{
background-color: #8cb85c;
}
#ddcolortabs a:hover span{
background-color: #8cb85c;
}
#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #8cb85c;
}
#ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #678b3f;
}
</style>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.arrowlistmenu{
width: 180px; /*width of menu*/
}
.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}
.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #A70303;
background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
</style>
#sidebar {
border:1px solid #E1E1E1;
padding: 10px;
float: right;
width: 130px;
background-color: #ffffff;
height: 390px;
}
#footer {
border:1px solid #E1E1E1;
background-color: #ffffff;
padding: 10px;
clear: both;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: bold;
color: #063B81;
line-height: 24px;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
color: #2F77F1;
line-height: 20px;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
color: #000000;
line-height: 20px;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 11pt;
margin-top: 3px;
margin-right: 0;
margin-bottom: 3px;
margin-left: 0;
padding-bottom: 9px;
}
a {
color: #E82525;
font-weight: bold;
text-decoration: underline;
}
a:visited {
color: #E82525;
text-decoration: underline;
font-weight : bold;
}
a:hover {
color: #901BBE;
text-decoration: none;
}
.smalltext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 3px 0;
margin: 3px 0;
line-height: 12pt
}
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://www.flat-stomach-exercises.com/favicon.ico" />
<title>Your Title</title>
<META Name="Description" Content="description" />
<META Name="Keywords" Content="keywords separated by commas"/>
<link rel="Shortcut Icon" href="/favicon.ico" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="../Banner/loss-d8.jpg" alt="weight loss" width="850" height="100" /></div>
<div id="ddcolortabs">
<ul>
<li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>Product Reviews</span></a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised"><span>Weight Loss Article</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools"><span>Newsletter</span></a></li>
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums"><span>Contact Us</span></a></li>
</ul>
</div>
<div id="ddcolortabsline"> </div>
<div class="arrowlistmenu">
<h3 class="headerbar">CSS Library</h3>
<ul>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS </a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS </a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and </a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Button</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>
<h3 class="headerbar">CSS Drive</h3>
<ul>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
</ul>
</div>
<div id="sidebar">
<p> This is where you put sidebar text. It's a great place for text and banner ads or news items.</p>
<p>Define the look and feel of this area by editing the <strong>sidebar</strong> section in the style.css file
that came with this template.</p>
<p>You can also adjust the color, height, etc. of this area if you wish.</p>
</div>
<div id="content">
<h1>Title of Page (Edit the H1 Tag on style sheet to change look of title.)</h1>
<p>This area is controlled by the "container" section on your style sheet. If you want to adjust the size of this space, change the gray background color, etc. then you can play with the values underneath "container" section in the style.css file.</p>
<p>To change the font size and style, edit the "p" attribute.<a href="http://www.yahoo.com">This is a hyperlink</a>. To change the color of the hyperlink and the color it changes when you mouseover it, edit the "a", "a: visited" and "a: hover" sections in style.css.</p>
<h2>This is H2 Subtitle Text. Change the H2 tag in the style sheet to change the design of this text.</h2>
<h3>This is H3 Subtitle Text. Change the H3 tag in the style sheet to change the design of this text.<br />
</h3>
</div>
<div align="center" id="footer">
<p>This is the footer section. To edit the colors, font style, etc. Edit the "footer" section in style.css</p>
<p class="smalltext">copyright 2008 ©Pill4weightloss.com - All Rights Reserved </p>
</div>
</div>
</body>
</html>
i would be glad if you can help me:D