image position in a container.

Reply

•
•
Join Date: May 2007
Posts: 15
Reputation: npatel0317 is an unknown quantity at this point 
Solved Threads: 1
npatel0317 npatel0317 is offline Offline
Newbie Poster

image position in a container.

 
0
  #1
Apr 15th, 2008
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
HTML and CSS Syntax (Toggle Plain Text) 
  1. <div id="hads">
  2. <SCRIPT language="Javascript">
  3.    function image() { };  
  4.    image = new image(); 
  5.    number = 0;  
  6.    image[number++] = "<img src='cdtradepost.gif' border='0'>" 
  7.    image[number++] = "<img src='farm.gif' border='0'>" 
  8.    image[number++] = "<img src='gambinos.gif' border='0'>" 
  9.    image[number++] = "<img src='rocky.gif' border='0'>" 
  10.    increment = Math.floor(Math.random() * number);  document.write(image[increment]);  
  11.    </SCRIPT>
  12.  
  13. </div>

Here is the full css stylesheet.

HTML and CSS Syntax (Toggle Plain Text) 
  1. html { font-size: 100%; }
  2. body {
  3. 	font-family: Verdana, Arial, Helvetica, sans-serif;
  4. 	font-size: 62.5%;
  5. 	margin: 0;
  6. 	padding: 0;
  7. }
  8. #container {
  9. 	width: 800px;
  10. 	margin: 0 auto 0 auto;
  11. }
  12.  
  13. h1#header {
  14. 	margin: 0;
  15. 	height: 95px;
  16. 	padding-bottom: 50px;
  17. 	background: #FFF url('headergradient.gif') bottom repeat-x;
  18. }
  19. #logo {
  20. 	position: relative;
  21. 	top: 15px;
  22. 	left: 17px;
  23. }
  24. #hads {
  25. 	position: fixed;
  26. 	top: 0px;
  27. 	left: 0px;
  28. } 
  29.  
  30. #content {
  31. 	margin-top: 20px;
  32.  
  33. }
  34. #content .gradient, #footer {
  35. 	font-size: 1.1em;
  36. 	font-weight: bold;
  37. 	color: #FFF;
  38. }
  39. #left {
  40. 	width: 169px;
  41. 	float: left;
  42. }
  43. #right {
  44. 	width: 169px;
  45. 	float: right;
  46. }
  47. #main {
  48. 	width: 442px;
  49. 	margin: 0 10px 0 10px;
  50. 	float: left;
  51. 	font-size: 1.2em;
  52. 	color: #444;
  53. 	margin-bottom: 30px;
  54. }
  55. .clear {
  56. 	clear: both;
  57. }
  58. #content .gradient {
  59. 	height: 24px;
  60. 	border: 1px solid #191bcb;
  61. 	margin: 0;
  62. }
  63. #left .gradient {
  64. 	background: #404ac0 url('leftgradient.gif') no-repeat;
  65. 	padding: 5px 10px 0 20px;
  66. }
  67. #right .gradient {
  68. 	background: #404ac0 url('rightgradient.gif') no-repeat;
  69. 	padding: 5px 20px 0 10px;
  70. }
  71. #footer {
  72. 	margin-top: 30px;
  73. 	text-align: center;
  74. 	border: 1px solid #191bcb;
  75. 	height: 24px;
  76. 	padding: 5px 10px 0 10px;
  77. 	background: #404ac0 url('footergradient.gif') repeat-x;
  78. }
  79. ul#menu {
  80. 	margin: 5px 0 5px 0;
  81. 	padding: 0;
  82. }
  83. ul#menu li {
  84. 	margin-bottom: 4px;
  85. 	list-style-type: none;
  86. }
  87. ul#menu li a {
  88. 	display: block;
  89. 	padding: 3px;
  90. 	text-decoration: none;
  91. }
  92. ul#menu li a:hover {
  93. 	background-color: #7071ec;
  94. 	color: #FFF;
  95. }
  96. ul#menu li.alt a:link, ul#menu li.alt a:visited {
  97. 	background: #CCC;
  98. }
  99. #right .box {
  100. 	margin-top: 3px;
  101. 	border: 1px solid #AAA;
  102. 	background: #DCDCDC;
  103. 	text-align: center;
  104. 	color: #333333;
  105. 	padding: 4px;
  106. }
  107. #content h1 {
  108. 	font-size: 1.8em;
  109. 	font-weight: bold;
  110. 	border-bottom: 2px dotted #acace5;
  111. }
  112. #content h2 {
  113. 	font-size: 1.6em;
  114. 	font-weight: normal;
  115. 	border-bottom: 1px solid #acace5;
  116. }
  117. #content h3 {
  118. 	font-size: 1.3em;
  119. 	font-weight: bold;
  120. }
  121. #content img {
  122. 	border: 1px dotted #CCC;
  123. 	padding: 4px;
  124. 	margin: 3px;
  125. }
  126. #main p {
  127. 	line-height: 1.8em;
  128. }

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.
Last edited by npatel0317; Apr 15th, 2008 at 4:19 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 13
Reputation: tashakota is an unknown quantity at this point 
Solved Threads: 0
tashakota tashakota is offline Offline
Newbie Poster

Re: image position in a container.

 
0
  #2
Apr 15th, 2008
what happens on the page? Can you link to it?
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the HTML and CSS Forum


Views: 2417 | Replies: 1
Thread Tools Search this Thread



Tag cloud for HTML and CSS
2002 appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity create css deleted design development displayimageinsteadofflash dreamweaver drupal emailmarketing epilepsy explorer firefox flash font fonts form format frontpage google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft missing mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. templates textcolor theme timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 wordpress xml xsl
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC