I have existing html page, css, and image folder
attached is screenshot of page
basically, I want to add a box with a different color background spaced 40px to the left of the main content
here's the css:
html
{
overflow: hidden;
height: 99%;
}
body
{ background: rgb(154, 205, 50);
height: 99%;
margin: 0;
padding: 0;
line-height: 150%;
text-align: center;
}
*
{
font-size: 8pt;
font-family: Tahoma, Verdana, sans-serif;
color: #000000;
text-align: left;
}
.list
{
margin: 5px;
border-top: 1px solid white;
border-bottom: 1px solid white;
}
/* === Containers === */
#first_container
{
margin: 0 auto 0 auto;
display: table;
height: 100%;
position: relative;
overflow: hidden;
width: 660px;
}
#second_container
{
position: absolute;
top: 50%;
vertical-align: middle;
width: 100%;
}
#third_container
{
position: relative;
top: -163px;
width: 660px;
}
/* === Menu === */
#menu
{
height: 31px;
padding-right: 2px;
margin: 0;
list-style: none;
}
#menu li
{
float: right;
display: block;
width: 82px; height: 31px;
}
#menu a
{
display: block;
width: 82px; height: 31px;
background-color: inherit;
text-decoration: none;
line-height: 31px;
text-align: center;
}
#menu a:link, #menu a:visited
{
color: #749942;
background-color: #9acd32;
}
#menu a:hover, #menu a:active
{
background-image: url('images/taba2.jpg');
color: #ffffff;
}
#menuselected
{
display: block;
width: 82px; height: 31px;
background-image: url('images/taba.jpg');
text-decoration: none;
line-height: 31px;
color: #ffffff;
text-align: center;
}
/* === Tile & Paint === */
#submenu
{
float: left;
height: 31px;
width: 300px;
padding-left: 10px;
margin: 0;
list-style: none;
}
#submenu li
{
float: left;
display: block;
width: 82px; height: 31px;
}
#submenu a
{
display: block;
width: 82px; height: 31px;
background-color: inherit;
text-decoration: none;
line-height: 25px;
text-align: center;
}
#submenu a:link, #submenu a:visited
{
color: #749942;
background-color: #9acd32;
}
#submenu a:hover, #submenu a:active
{
background-image: url('images/tabb2.jpg');
color: #ffffff;
}
#submenuselected
{
display: block;
width: 82px; height: 31px;
background-image: url('images/tabb.jpg');
text-decoration: none;
line-height: 25px;
color: #ffffff;
text-align: center;
}
/* === Other Divs === */
.border
{
background-color: #ffd700;
padding: 15px 15px 15px 146px;
height: 232px;
background-image: url('images/back.jpg');
background-repeat: no-repeat;
background-position: center center;
text-align: left;
}
.title
{
position: absolute;
margin-left: 15px;
margin-top: 15px;
width: 32px;
height: 215px;
background-image: url('images/cupan.gif');
}
.content
{
height: 217px;
overflow: auto;
padding: 7px;
}
.designinfo
{
margin-top: 5px;
text-align: right;
color: #749942;
background-color: inherit;
}
/* === Inline Text Styles === */
h1
{
margin: 10px 0 -40px -2px;
padding: 0 10px 40px 9px;
font-size: 16px;
color: #ffffff;
background-color: inherit;
border-left: 5px solid rgb(211, 226, 195);
}
.details
{
display: none;
font-size: 9px;
color: #6E7468;
}
.text
{
display: block;
margin: 5px 5px 20px 12px;
}
.text a
{
color: #ffc125;
text-decoration: none;
font-weight: bold;
}
.text a:hover, .text a:active
{
color: #000000;
}
blockquote
{
margin: 3px 0 3px 0;
padding: 5px 10px 5px 10px;
}
.note
{
display: block;
margin: 10px 15px 10px 15px;
color: #006400;
}
.bold
{
font-weight: bold;
}
and
here's the index.html:
<html>
<head>
<title>Cupan Custom Tile and Paint contractor Charlotte, NC (704)668-1386</title>
<META name="verify-v1" content="BhU0sBMeCQN0MUMVw8QgindU1zLzl5nVn6LhXenK9 zE=" />
<META NAME="keywords" CONTENT="Cupan Custom Tile & Paint, tile, paint, contractor, Charlotte, NC, North Carolina, install, estimates">
<META NAME="description" CONTENT="Cupan Custom Tile & Paint contractor in Charlotte, NC specializing in Ceramic, Porcelain, and Natural Stone tile install and repair. Interior / Exterior Paint - Free Estimates - Call (704)668-1386">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="robots" content="index,follow">
<meta name="revisit-After" content="4 days">
<link rel="stylesheet" type="text/css" href="basic.css" />
</head>
<body>
Cupan Custom Tile & Paint, Charlotte tile contractor, North Carolina painting, free estimates<BR>
<div id="first_container">
<div id="second_container">
<div id="third_container">
<ul id="menu">
<li><a href="Contact.html">Contact</a></li>
<li><a href="Gallery.html">Portfolio</a></li>
<li><a href="Tools.html">Tools</a></li>
<li><a href="Services.html">Services</a></li>
<li><span id="menuselected">About Us</span></li>
</ul>
<div class="title"></div>
<div class="border">
<div class="content">
<h1>Cupan Custom Tile & Paint</h1>
<div class="text">
Tile and Paint contractor serving Charlotte, NC and surrounding areas.<br>
Ceramic, Porcelain, and Stone tile installation and repair. Interior and Exterior painting.<br>
Get <A HREF="Contact.html">FREE Estimate</a> for your project. <A Href="Contact.html"><img src="images/Estimate.png" alt="Contact us for a free estimate" border="0"></a>
<br/><br/>
<span class="note">
Whether you're remodeling a kitchen or bath, tiling a backsplash, setting floor tile, installing crown mouldings, finishing a basement, cleaning and staining a deck, or painting your house - we've got you covered as a quality contractor you can trust.<br><br>
</span>
Quality materials. On time and productive. Attention to detail.<br>
<i>Get the job done right the first time!</i><br>
Licensed & Insured for work in residential and commercial settings<br><br>
<A Href="Contact.html"> Contact Cupan Custom Tile and Paint home improvement contractor serving Charlotte, NC for a FREE estimate.</a><br>
<br>
<br>
Cupan Custom Tile & Paint :: Charlotte, NC :: (704)668-1386 ::
www.CupanTileAndPaint.com :: mcupan@lycos.com<br><br>
</div>
</div>
</div>
<ul id="submenu">
<li><span id="submenuselected">Tile</span></li>
<li><a href="index_paint.html">Paint</a></li>
</ul>
<div class="designinfo">
Cupan Custom Tile & Paint | Charlotte, NC | (704)668-1386<br>
<br>
<br>
<a href="<A href="http://www.cupantileandpaint.com/tools.html">charlotte">http://www.cupantileandpaint.com/tools.html">charlotte tiles</a> |
<a href="<A href="http://www.cupantileandpaint.com/services.html">hiring">http://www.cupantileandpaint.com/services.html">hiring a tile contractor</a> |
<a href="<A href="http://www.cupantileandpaint.com/services.html">tile">http://www.cupantileandpaint.com/services.html">tile installation</a> |
<a href="<A href="http://www.cupantileandpaint.com/services.html">bathroom">http://www.cupantileandpaint.com/services.html">bathroom remodel</a> |
<a href="<A href="http://www.cupantileandpaint.com/services.html">Grout</a">http://www.cupantileandpaint.com/services.html">Grout</a> |
<a href="<A href="http://www.cupantileandpaint.com/services.html">Sealer</a">http://www.cupantileandpaint.com/services.html">Sealer</a> |
<a href="<A href="http://www.cupantileandpaint.com/services.html">backsplash</a">http://www.cupantileandpaint.com/services.html">backsplash</a> |
<a href="<A href="http://www.cupantileandpaint.com/services.html">tile">http://www.cupantileandpaint.com/services.html">tile countertop</a> |
<br>
<a href="
http://www.cupantileandpaint.com/tools.html" Target="Paint Colors">paint</a> |
<a href="<A href="http://www.cupantileandpaint.com/services.html">paint">http://www.cupantileandpaint.com/services.html">paint contractor</a> |
<a href="<A href="http://www.cupantileandpaint.com/services.html">interior">http://www.cupantileandpaint.com/services.html">interior painting</a> |
<a href="<A href="http://www.cupantileandpaint.com/services.html">exterior">http://www.cupantileandpaint.com/services.html">exterior painting</a> |
<a href="<A href="http://www.cupantileandpaint.com/services.html">deck">http://www.cupantileandpaint.com/services.html">deck stain and waterproofing</a> |
<a href="
http://www.google.com/maps?f=l&hl=en...6&om=1&iwloc=A" Target="Directions">Charlotte, NC</a> |
</div>
</div>
</div>
</div>
</body>
</html>
__________________________
can someone help with the scripting?
thanks
