0

I am trying to position a javascript with in my 800px container but when i try to do that the script stays outside of the container.

Here is my html code for the javascript

<div id="hads">
<SCRIPT language="Javascript">
   function image() { };  
   image = new image(); 
   number = 0;  
   image[number++] = "<img src='cdtradepost.gif' border='0'>" 
   image[number++] = "<img src='farm.gif' border='0'>" 
   image[number++] = "<img src='gambinos.gif' border='0'>" 
   image[number++] = "<img src='rocky.gif' border='0'>" 
   increment = Math.floor(Math.random() * number);  document.write(image[increment]);  
   </SCRIPT>

</div>

Here is the full css stylesheet.

html { font-size: 100%; }
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	margin: 0;
	padding: 0;
}
#container {
	width: 800px;
	margin: 0 auto 0 auto;
}

h1#header {
	margin: 0;
	height: 95px;
	padding-bottom: 50px;
	background: #FFF url('headergradient.gif') bottom repeat-x;
}
#logo {
	position: relative;
	top: 15px;
	left: 17px;
}
#hads {
	position: fixed;
	top: 0px;
	left: 0px;
} 

#content {
	margin-top: 20px;
	
}
#content .gradient, #footer {
	font-size: 1.1em;
	font-weight: bold;
	color: #FFF;
}
#left {
	width: 169px;
	float: left;
}
#right {
	width: 169px;
	float: right;
}
#main {
	width: 442px;
	margin: 0 10px 0 10px;
	float: left;
	font-size: 1.2em;
	color: #444;
	margin-bottom: 30px;
}
.clear {
	clear: both;
}
#content .gradient {
	height: 24px;
	border: 1px solid #191bcb;
	margin: 0;
}
#left .gradient {
	background: #404ac0 url('leftgradient.gif') no-repeat;
	padding: 5px 10px 0 20px;
}
#right .gradient {
	background: #404ac0 url('rightgradient.gif') no-repeat;
	padding: 5px 20px 0 10px;
}
#footer {
	margin-top: 30px;
	text-align: center;
	border: 1px solid #191bcb;
	height: 24px;
	padding: 5px 10px 0 10px;
	background: #404ac0 url('footergradient.gif') repeat-x;
}
ul#menu {
	margin: 5px 0 5px 0;
	padding: 0;
}
ul#menu li {
	margin-bottom: 4px;
	list-style-type: none;
}
ul#menu li a {
	display: block;
	padding: 3px;
	text-decoration: none;
}
ul#menu li a:hover {
	background-color: #7071ec;
	color: #FFF;
}
ul#menu li.alt a:link, ul#menu li.alt a:visited {
	background: #CCC;
}
#right .box {
	margin-top: 3px;
	border: 1px solid #AAA;
	background: #DCDCDC;
	text-align: center;
	color: #333333;
	padding: 4px;
}
#content h1 {
	font-size: 1.8em;
	font-weight: bold;
	border-bottom: 2px dotted #acace5;
}
#content h2 {
	font-size: 1.6em;
	font-weight: normal;
	border-bottom: 1px solid #acace5;
}
#content h3 {
	font-size: 1.3em;
	font-weight: bold;
}
#content img {
	border: 1px dotted #CCC;
	padding: 4px;
	margin: 3px;
}
#main p {
	line-height: 1.8em;
}

To be breif i want that javascript "#hads" to be postioned inside the container so when you resize your browser screen everything stays postion where i set it to be.

Thanks in advanced for your help.

2
Contributors
1
Reply
2
Views
9 Years
Discussion Span
Last Post by tashakota
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.