943,587 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > CSS positioning problems
Ad:
Permalink
Aug 11th, 2009
0

CSS positioning problems

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Alexancho is offline Offline
5 posts
since Aug 2009
Permalink
Aug 11th, 2009
0

Re: CSS positioning problems

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.
Reputation Points: 45
Solved Threads: 1
Junior Poster
stevenpetersen is offline Offline
132 posts
since Jun 2009
Permalink
Aug 11th, 2009
0

Re: CSS positioning problems

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.
Reputation Points: 45
Solved Threads: 1
Junior Poster
stevenpetersen is offline Offline
132 posts
since Jun 2009
Permalink
Aug 11th, 2009
0

Re: CSS positioning problems

*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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Spine is offline Offline
2 posts
since Aug 2009
Permalink
Aug 14th, 2009
0

Re: CSS positioning problems

Thank you very much. Your advices were helpful. I've put things in order and did validation and afterward the problem was solved.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Alexancho is offline Offline
5 posts
since Aug 2009
Permalink
Aug 23rd, 2009
0

Re: CSS positioning problems

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.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: How to get this effect done ?
Next Thread in HTML and CSS Forum Timeline: CSS element positions





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC