HTML and CSS RSS HTML and CSS RSS

CSS positioning problems

Reply

•
•
Join Date: Aug 2009
Posts: 5
Reputation: Alexancho is an unknown quantity at this point 
Solved Threads: 0
Alexancho Alexancho is offline Offline
Newbie Poster

CSS positioning problems

 
0
  #1
Aug 11th, 2009
I am creating website using CSS. It must be something like this:
http://webdesign-gold.awardspace.biz/model_1.html
A picture of a header(fuchsia) is made from many small fragments. The same with a navigation bar(green). To perform this task i used absolute positioning for these fragments. So, actually i need everything in this website to be positioned absolutely. But i can't. Everything is moving instead of the picture. Something obviously wrong with the positioning:
http://webdesign-gold.awardspace.biz...e1/index1.html
I uploaded only a few fragments of a pictures, hope it doesn't create problems for understanding. Could you help me to understand what is wrong?
HTML:
html Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3.  <head>
  4.   <title>Webmaster2008_first example</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=ANSI" />
  6. <link rel="stylesheet" href="styles.css" type="text/css" />
  7.  </head>
  8.  
  9.  <body>
  10.  
  11. <div id="container">
  12. <div id="header">
  13.  
  14.  <!-- Definition of a cod for building the top part of the header -->
  15.  
  16. <div id="index_01">
  17. <img src="images/index_01.jpg"/>
  18. </div>
  19. <div id="index_02">
  20. <img src="images/index_02.jpg"/>
  21. </div>
  22. <div id="index_03">
  23. <img src="images/index_03.jpg"/>
  24. </div>
  25. <div id="index_04">
  26. <img src="images/index_04.jpg"/>
  27. </div>
  28. <div id="index_05">
  29. <img src="images/index_05.jpg"/>
  30. </div>
  31. <div id="index_06">
  32. <img src="images/index_06.jpg"/>
  33. </div>
  34. <div id="index_07">
  35. <img src="images/index_07.jpg"/>
  36. </div>
  37. <!-- End of a cod for building the top part of the header -->
  38.  
  39. <!-- Definition of cod for building the middle part of the header -->
  40.  
  41. <div id="index_08">
  42. <img src="images/index_08.jpg"/>
  43. </div>
  44. <div id="index_09">
  45. <img src="images/index_09.jpg"/>
  46. </div>
  47. <div id="index_10">
  48. <img src="images/index_10.jpg"/>
  49. </div>
  50. <div id="index_11">
  51. <img src="images/index_11.jpg"/>
  52. </div>
  53. <div id="index_12">
  54. <img src="images/index_12.jpg"/>
  55. </div>
  56. <div id="index_13">
  57. <img src="images/index_13.jpg"/>
  58. </div>
  59. <div id="index_14">
  60. <img src="images/index_14.jpg"/>
  61. </div>
  62. <div id="index_15">
  63. <img src="images/index_15.jpg"/>
  64. </div>
  65. <div id="index_16">
  66. <img src="images/index_16.jpg"/>
  67. </div>
  68. <div id="index_17">
  69. <img src="images/index_17.jpg"/>
  70. </div>
  71. <div id="index_18">
  72. <img src="images/index_18.jpg"/>
  73. </div>
  74. <div id="index_19">
  75. <img src="images/index_19.jpg"/>
  76. </div>
  77. <!-- The picture of the header is created -->
  78.  
  79. <!-- blue stripe -->
  80. <div id="index_21">
  81. <img src="images/index_21.jpg" width="770" height="10" />
  82. </div>
  83. <!-- end of blue stripe -->
  84.  
  85. </div> <!-- end #header -->
  86.  
  87. <!-- Hotel search and Special offer -->
  88.  
  89. <div id="index_23">
  90. <img src="images/index_23.jpg" width="616" height="95" />
  91. </div>
  92. <div id="index_27">
  93. <img src="images/index_27.jpg" width="245" height="27" />
  94. </div>
  95. <div id="index_24">
  96. <img src="images/index_24.jpg"/>
  97. </div>
  98. <div id="index_25">
  99. <img src="images/index_25.jpg"/>
  100. </div>
  101. <div id="index_26">
  102. <img src="images/index_26.jpg"/>
  103.  
  104. </div>
  105. <div id="index_28">
  106. <img src="images/index_28.jpg"/>
  107. </div>
  108. <div id="index_29">
  109. <img src="images/index_29.jpg"/>
  110. </div>
  111.  
  112. <div id="content">
  113. 	<div id="content_left">
  114. 	<img src="images/index_31.jpg" alt="airplane" />
  115.  
  116. 	<div class="box">
  117. 	<img src="images/index_34.jpg" align="middle">
  118.     <p class="left_box"> <b>fonte lactis ubertim manante:</b> atque aundante opis egentissimum et illoa dhuc uno 
  119. 	alimento vitam ucentemon sortem non pati. sed blante tole ran tur haec, non quia .
  120. 	<br />
  121. 	<span class="readmore"><a href="#" target="_blank">read more>></a></span> </p>
  122. 	</div>
  123.  
  124. <p> &nbsp; </p>
  125.  
  126. 	<div class="box">
  127. 	<img src="images/index_34.jpg" align="middle">
  128.     <p class="left_box"> <b>fonte lactis ubertim manante:</b> atque aundante opis egentissimum et illoa dhuc uno 
  129. 	alimento vitam ucentemon sortem non pati. sed blante tole ran tur haec, non quia 
  130. 	.<br />
  131. 	<span class="readmore"><a href="#" target="_blank">read more>></a></span> </p>
  132. 	</div>
  133.  
  134. <p> &nbsp; </p>
  135.  
  136. 	<div class="box">
  137. 	<img src="images/index_34.jpg" align="middle">
  138.     <p class="left_box"> <b>fonte lactis ubertim manante:</b> atque aundante opis egentissimum et illoa dhuc uno 
  139. 	alimento vitam ucentemon sortem non pati. sed blante tole ran tur haec, non quia 
  140. 	.<br />
  141. 	<span class="readmore"><a href="#" target="_blank">read more>></a></span> </p>
  142. 	</div>
  143.  
  144.  
  145. 	</div> <!-- end #content_left -->
  146. <div id="content_right">
  147.  
  148. </div> <!-- end #content_right -->
  149.  
  150. <br class="clearfloat" />
  151. </div> <!-- end #content -->
  152.  
  153. <div id="menu_bottom">
  154. </div> <!-- end #menu_bottom -->
  155.  
  156. <div id="footer">
  157. </div> <!-- end #footer -->
  158. </div> <!-- end #container -->
  159.  
  160.  </body>
  161. </html>

CSS:

css Syntax (Toggle Plain Text) 
  1. body{
  2. margin: 0;
  3. padding: 0;
  4. background-image:url('images/main_bg.jpg');
  5. background-repeat:repeat;
  6. }
  7.  
  8. a:link, a:visited { color: blue; text-decoration: none; font-weight: bold;} 
  9. a:active, a:hover { color: blue; text-decoration: underline;}
  10.  
  11. #container {
  12. width: 770px;
  13. margin: 0 auto;
  14. padding: 0;
  15. border-left: 0px 
  16. border-right: 0px 
  17. background-color: AliceBlue;
  18. text-align: left;
  19. }
  20.  
  21. #header {
  22. background-color: fuchsia;
  23. }
  24.  
  25. /* pictures of a header. The pictures from the middle starts with high of 100 => 100-29=71*/
  26.  
  27. #index_01 {
  28. position: absolute; 
  29. left: 200px; 
  30. top: 0 px;
  31. }
  32. #index_02 {
  33. position: absolute; 
  34. left: 323px; 
  35. top: 0 px;
  36. }
  37. #index_03 {
  38. position: absolute; 
  39. left: 402px; 
  40. top: 0 px;
  41. }
  42. #index_04 {
  43. position: absolute; 
  44. left: 509px; 
  45. top: 0 px;
  46. }
  47. #index_05 {
  48. position: absolute; 
  49. left: 616px; 
  50. top: 0 px;
  51. }
  52. #index_06 {
  53. position: absolute; 
  54. left: 728px; 
  55. top: 0 px;
  56. }
  57. #index_07 {
  58. position: absolute; 
  59. left: 847px; 
  60. top: 0 px;
  61. }
  62. #index_08 {
  63. position: absolute;
  64. left: 200px; 
  65. top: 29px;
  66. }
  67. #index_09 {
  68. position: absolute;
  69. left: 261px; 
  70. top: 29px;
  71. }
  72. #index_10 {
  73. position: absolute;
  74. left: 323px; 
  75. top: 29px;
  76. }
  77. #index_11 {
  78. position: absolute;
  79. left: 389px; 
  80. top: 29px;
  81. }
  82. #index_12 {
  83. position: absolute;
  84. left: 524px; 
  85. top: 29px;
  86. }
  87. #index_13 {
  88. position: absolute;
  89. left: 823px; 
  90. top: 29px;
  91. }
  92. #index_14 {
  93. position: absolute;
  94. left: 893px; 
  95. top: 29px;
  96. }
  97. #index_15 {
  98. position: absolute;
  99. left: 524px; 
  100. top: 58px;
  101. }
  102. #index_16 {
  103. position: absolute;
  104. left: 524px; 
  105. top: 133px;
  106. }
  107. #index_17 {
  108. position: absolute;
  109. left: 752px; 
  110. top: 133px;
  111. }
  112. #index_18 {
  113. position: absolute;
  114. left: 752px; 
  115. top: 185px;
  116. }
  117. #index_19 {
  118. position: absolute;
  119. left: 752px; 
  120. top: 204px;
  121. }
  122. /* end of pictures of a header */
  123. /* blue stripe */
  124. #index_21 {
  125. position: absolute;
  126. left: 200px; 
  127. top: 220px;
  128. }
  129.  
  130.  
  131. /* Hotel search and Special offer */
  132.  
  133. #index_23 {
  134. position: absolute;
  135. left: 200px; 
  136. top: 235px;
  137. }
  138. #index_24 {
  139. position: absolute;
  140. left: 616px; 
  141. top: 235px;
  142. }
  143. #index_25 {
  144. position: absolute;
  145. left: 690px; 
  146. top: 235px;
  147. }
  148. #index_26 {
  149. position: absolute;
  150. left: 845px; 
  151. top: 235px;
  152. }
  153. #index_27 {
  154. position: absolute;
  155. left: 200px; 
  156. top: 330px;
  157. }
  158.  
  159. #index_28 {
  160. position: absolute;
  161. left: 445px; 
  162. top: 330px;
  163. }
  164. #index_29 {
  165. position: absolute;
  166. left: 544px; 
  167. top: 330px;
  168. }
  169.  
  170. /* End of Hotel search and Special offer */
  171.  
  172. #index_31 {
  173. position: absolute;
  174. left: 200px; 
  175. top: 357px;
  176. }
  177.  
  178. /* content */
  179.  
  180. #content {
  181. width: 770px;
  182. padding: 0px;
  183. top:357px
  184. background-color: Gainsboro; /* gray */
  185. }
  186.  
  187. /* content_left */
  188.  
  189. #content #content_left {
  190. float: left;
  191. margin-top: 357px;
  192. width: 256px;
  193. background-color: aqua;
  194. position: absolute;
  195. }
  196.  
  197. #content_left img {
  198. margin-left: 0px;
  199. margin-top: 0px;
  200. padding: 0px;
  201. }
  202.  
  203. #content_left .box {
  204. float: left;
  205. width: 256px;
  206. }
  207.  
  208. .box  img {
  209. float: left;
  210. margin-right: 0px;
  211. }
  212.  
  213. .box p.left_box {
  214. font-family: verdana;
  215. font-size: 10px;
  216. color: blue;
  217. margin-left: 18px;
  218. margin-right: 21px;
  219. }
  220.  
  221. .box p.left_box > b:first-child
  222. {
  223. font-weight:bold
  224. }
  225.  
  226. .box .readmore {
  227. font-family: verdana;
  228. font-size: 10px;
  229. color: blue;
  230. padding-top:0px;
  231. padding-left:131px;
  232. }
  233.  
  234. #content #content_right {
  235. float: right;
  236. width: 12em;
  237. }
  238.  
  239. #footer p {
  240. margin: 0;
  241. padding: 10px 0;
  242. background-color: #DDDDDD;
  243. text-align: center;
  244. font-size: .8em;
  245. }
  246. .clearfloat {
  247. clear: both;
  248. height: 0;
  249. font-size: 1px;
  250. }
Last edited by peter_budo; Aug 11th, 2009 at 2:52 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 130
Reputation: stevenpetersen is an unknown quantity at this point 
Solved Threads: 1
stevenpetersen's Avatar
stevenpetersen stevenpetersen is offline Offline
Junior Poster

Re: CSS positioning problems

 
0
  #2
Aug 11th, 2009
http://www.daniweb.com/forums/thread210478.html

<div id="container"
read laura_ci info
Last edited by stevenpetersen; Aug 11th, 2009 at 3:41 pm.
Steven Petersen
Web Designer / Web Master
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 130
Reputation: stevenpetersen is an unknown quantity at this point 
Solved Threads: 1
stevenpetersen's Avatar
stevenpetersen stevenpetersen is offline Offline
Junior Poster

Re: CSS positioning problems

 
0
  #3
Aug 11th, 2009
container may need to be bigger than 770px. It could be the problem to your site.
Last edited by stevenpetersen; Aug 11th, 2009 at 6:08 pm.
Steven Petersen
Web Designer / Web Master
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2009
Posts: 2
Reputation: Spine is an unknown quantity at this point 
Solved Threads: 0
Spine's Avatar
Spine Spine is offline Offline
Newbie Poster

Re: CSS positioning problems

 
0
  #4
Aug 11th, 2009
*Line 183 is missing a semi-colon at the end.

HTML and CSS Syntax (Toggle Plain Text) 
  1. #content {
  2. width: 770px;
  3. padding: 0px;
  4. top:357px /* <-- missing semi-colon */
  5. background-color: Gainsboro; /* gray */
  6. }

It seems to me you have also have quite a bit of unnecessary code.

You can absolutely position the images without needing a div tag for each one.

HTML and CSS Syntax (Toggle Plain Text) 
  1. <style type="text/css'> 
  2. /* sets properties for all IMG tags so you don't need to type "position: absolute;" over and over */
  3. #header img { display: block; position: absolute; } 
  4.  
  5. /* when positioning, it's usually a good idea to provide width and height if you know it */
  6. #image_id { top: XXpx; left: XXpx; width: XXpx; height: XXpx; }
  7. </style>

HTML and CSS Syntax (Toggle Plain Text) 
  1. <img id="image_id" src="image_src.jpg" />

If you need more help with understanding absolute positioning.. try this: http://stopdesign.com/archive/2003/09/03/absolute.html
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2009
Posts: 5
Reputation: Alexancho is an unknown quantity at this point 
Solved Threads: 0
Alexancho Alexancho is offline Offline
Newbie Poster

Re: CSS positioning problems

 
0
  #5
Aug 14th, 2009
Thank you very much. Your advices were helpful. I've put things in order and did validation and afterward the problem was solved.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,203
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: CSS positioning problems

 
0
  #6
Aug 23rd, 2009
Neither 0 px nor 0px is a valid code.

0 px has a space in it, which makes it two different items.

0px does not work on some browsers, and causes the entire style to be eliminated. Those browsers can not take a unit of measure with a 0 value.
Daylight-saving time uses more gasoline
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:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



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

©2003 - 2009 DaniWeb® LLC