css placement of drop shadow gif [How To]

Hi guys...anyone willing to tell me how to achieve the following..

test site
http://mikalaerin.com/realtor/index.php

im trying to get a gif to "butt" up against the sides of the sides of the template..to look like a lil drop shadow...If u look u can see the gif to the far left (hiding)...lol and then repeats a lil over half way....

can someone tell me how to get it to butt up against both the the left and right sides of the template?
like this here


much appreciated

tones

 

Is the div a fixed width in pixels, or is it fluid in ems or %?

Anywho - check out this: http://battletech.hopto.org/html_tutorials/eightcorners/

Its pretty hard to wrap your head around, but once it clicks, it's easy enough.

 

emm...if i understand u right...

the "div" in question is this

in the html page its like this
<div id="container">

css its like this
#container
{
width: 700px;
margin-left: -350px;
}


now im guessing right off...i put the gif in wrong section...as i have it here..

body
{
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
margin: 0px;
padding-left: 50%;
clear: both;
position: absolute;
background: url('{template_url}/images/bg-body.gif') repeat-y;
background-color: #9EAC93;
}


Thank u for replying

 

Well, seeming as your div is 700px wide, make an image 700px in size. On the edges add your shadow, leave the middle transparent,and just set that as the y-repeating background. The image only has to be 1px high.

 

hmm....think i get wat ure saying... but dont see how that will get to butt up against the left and teh right side? or am i missing sumtin...

thanks again for replying

can i ask....is there an easy way to increase the width of the template...keeping all the "menu placements" and settings that are there now...

i tried but couldnt get it....would love to see if i could get it fluid..but im guessing its a no no...

 

Making it fluid is easy enough, just change width:700px to somethng like: width:45%

Look at the tutorial posted above. I am not good at explaining these things, I can do it, but I cannot explain it.

Sorry.

 

thanks

will check out the tut and see how i get on... appreciate it


as for just changing the 700px to %...wouldnt othewr stuff have to be changed? other references to pixels ?

see below for current css.... thanks again

/* CSS Document - Author: Shaibal Mandal */

body 
{
	font-size: 11px;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	margin: 0px;
	padding-left: 50%;
	clear: both;
	position: absolute;
	background: url('{template_url}/images/bg-body.gif') repeat-y;
	background-color: #9EAC93;
}

a 
{
	text-decoration: none;
	color: #747474;
}

a:hover 
{
	text-decoration: underline;
	color: #000;
}

#container 
{
	width: 80%;
	
}

#nav1 
{
	width: 124px;
	height: 30px;
	float: left;
	background: url('{template_url}/images/nav1a.jpg') no-repeat;
}

#nav2 
{
	width: 112px;
	height: 30px;
	float: left;
	background: url('{template_url}/images/nav2a.jpg') no-repeat;
}

#nav3 
{
	width: 114px;
	height: 30px;
	float: left;
	background: url('{template_url}/images/nav3a.jpg') no-repeat;
}

#nav4 
{
	width: 112px;
	height: 30px;
	float: left;
	background: url('{template_url}/images/nav4.jpg') no-repeat;
}

#nav5 
{
	width: 112px;
	height: 30px;
	float: left;
	background: url('{template_url}/images/nav5.jpg') no-repeat;
}

#nav6 
{
	width: 126px;
	height: 30px;
	float: left;
	background: url('{template_url}/images/nav6a.jpg') no-repeat;
}

.buttonText 
{
	text-align: center;
	padding-top: 14px;
	font-size: 11px;
	font-weight: bold;
}

#navcontainer 
{
	clear: both;
	margin-top: 10px;
}
#hidden {
	clear: both;
	height: 15px;
}

#main 
{
	padding: 5px;
	text-align: justify;
	color: #333;
	line-height: 1.6em;
	background-color: #E2E2E2;
	border: 1px solid #888;
	float: left;
}

#text
{
padding-right: 200px;

}


#fpic
{
	width: 686px;
	border: 1px inset #888;	
	height: 206px;
	background-color: #999999;
	clear: both;
	background: url('{template_url}/images/Export Wizard-1.png') no-repeat;
}

#sidebar 
{
	width: 155px;
	border-left: 1px solid #BBB;
	float: right;
	margin-left: 9px;
	margin-top: 5px;
	padding-left: 20px;
	text-align: left;
	clear: both;
}

h1 
{
	font-size: 20px;
	font-weight: bold;
	padding-top: 5px;
}

.hideme 
{
	display: none;
	color: white;
}

.headertext1 
{
	font-size: 18px;
	font-weight: bold;
}

.headertext2 
{
	font-size: 10px;
	font-weight: bold;
}

#footer 
{
	background-color: #484848;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	height: 30px;
	padding-top: 5px;
	clear: both;
	width: auto;
}

#b2 
{
	width: 213px;
	padding: 0 0 0 0;
	margin-bottom: 1em;
	font-size: 11px;
	font-weight: normal;
	font-family: Verdana;
	color: #333;
}

#b2 ul 
{
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}

#b2 li 
{
	border-bottom: 1px solid #113321;
	margin: 0;
	width: auto;
}

#b2 li a 
{
	display: block;
	padding: 3px 0px 2px 0.5em;
	border-left: 5px solid #113321;
	border-right: 5px solid #113321;
	color: #fff;
	text-decoration: none;
	width: auto;
	background-color:#9eac93;
}

#b2 li a:hover 
{
	border-left: 5px solid #222;
	border-right: 5px solid #222;
	color: #fff;
	background-color: #113321;
	font-weight:bold;
}

.bhz 
{
	width: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: left;
	font-weight: bold;
	color: #ffffff;
	padding-top: 3px;
	padding-bottom: 4px;
	padding-left: 4px;
	border-left: 5px solid #113321;
	border-right: 5px solid #113321;
	display: block;
	background-color: #113321;
}

.ht1 
{
	font-size: 10px;
	font-weight: bold;
	color: #888;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
}

.hw2 
{
	font-size: 11px;
	font-weight: bold;
	color: #999;
	font-family: verdana, arial, helvetica, sans-serif;
	text-decoration: none;
}

#smenu
{
    position: relative;
    width: 213px;
    height: 206px;
    background: #e2e2e2e2;
    float: right;
    clear:both;
}

.noteblock1
{
    background: #d0d0d0;
    width: 465px;
    padding: 5px;
    border: 1px solid #000;
    color: #000;
    margin: 7px 0px 7px 0px;
}

.mod
{
    margin: 5px 0px 10px 0px;
    padding: 0;
}

.push
{
    margin: 7px 0px 7px 0px;
}

.noteheader
{
    width:auto;
    border-bottom: 1px solid #888;
    color: #000;
    height: 24px;
    font-family: verdana;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 3px;
	text-align:left;
}

p
{
	margin:0;
	padding: 0;
}

Code (markup):