Member Avatar for npatel0317

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
  • 109 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by tashakota

Dani AI

Generated

Your #hads is using position: fixed, which locks it to the browser viewport — not the 800px container — so it will never move with the container when the window changes. To keep the ad inside the centered container, make the container a positioned parent and absolutely position the ad relative to it.

A minimal CSS change:

#container { position: relative; }

#hads {
  position: absolute;
  top: 10px;      /* tweak to taste */
  right: 10px;    /* or use left/centering methods below */
  z-index: 10;
}

If you want the ad centered inside the container instead of pinned to a side, use left:50% plus a transform:

#hads {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

JavaScript note: avoid document.write and reusing names like image (it clashes with built-ins). Build and insert an <img> with DOM methods and append it into #hads so the markup and layout stay predictable:

var files = ['cdtradepost.gif','farm.gif','gambinos.gif','rocky.gif'];
var i = Math.floor(Math.random()*files.length);
var img = document.createElement('img');
img.src = files[i];
img.alt = 'ad';
document.getElementById('hads').appendChild(img);

Quick troubleshooting tips: check the computed styles in browser devtools to confirm the element’s position and offsets; add or adjust z-index if it’s hidden; remember very old browsers (IE6) do not support position: fixed. For details on CSS positioning and why fixed behaves differently, see the MDN docs on position and on why document.write is discouraged see Document.write. As suggested, inspecting the live page (or the computed styles) will quickly show if the element is still using fixed.

Member Avatar for tashakota

what happens on the page? Can you link to it?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.