944,124 Members | Top Members by Rank

Ad:
Oct 20th, 2007
0

css background image problem

Expand Post »
Why aren't the css background images showing up in the sidebar?
HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <title>Your Page</title>
  7. <style type="text/css">
  8.  
  9.  
  10. body,
  11. html {
  12. margin:0;
  13. padding:0;
  14. background:#000000;
  15. color : #00cc00;
  16.  
  17. }
  18. body {
  19. min-width:810px;
  20. }
  21. #wrap {
  22. background:#000000;
  23. margin: 0 auto;
  24. width:810px;
  25.  
  26. }
  27. #wrap img {
  28. float:left;
  29. }
  30. #header {
  31. background-color:#000000;
  32. height:75px;
  33. margin-top:3px;
  34. }
  35.  
  36.  
  37.  
  38. #header h1 {
  39.  
  40. padding:0;
  41. line-height:75px;
  42. font-family:"Comic Sans MS";
  43. margin-left:80px;
  44. color:#00CC00;
  45. }
  46.  
  47. #main {
  48. background:#000000;
  49. float:right;
  50. width:560px;
  51. color:#00FF00;
  52. }
  53. #main h2, #main h3, #main p {
  54. padding:0 10px 0 0;
  55. }
  56. #sidebar {
  57. background:#000000;
  58. float:left;
  59. width:240px;
  60.  
  61.  
  62. }
  63. #sidebar ul {
  64.  
  65. margin:0 0 0 0; padding: 0 0 0 0; list-style-type: none;
  66. }
  67.  
  68.  
  69. #sidebar h3{
  70. padding:0 0 0 0;
  71. margin-top:5px;
  72. margin-left:3px;
  73. margin-bottom:3px;
  74. text-align:center;
  75. color:#00FF00;
  76.  
  77.  
  78. }
  79. #sidebar a
  80. {
  81. line-height:20px;
  82. text-decoration:none;
  83. margin-left:3px;
  84. color:#00FF00;
  85. text-align:left;
  86. }
  87. #sidebar a:hover
  88. {
  89.  
  90. text-decoration:underline;
  91. }
  92. #sidebar img
  93. {
  94. margin-left:3px;
  95. border:0;
  96. float:left;
  97. }
  98. a.image{
  99.  
  100. background-image: url("glowing-green-button.gif");
  101. height:20px;
  102. width:20px;
  103. }
  104. #footer {
  105. clear:both;
  106. color:#00ff00;
  107. background-color: #000000;
  108. font-size:12px;
  109. margin:0;
  110. }
  111. #footer p{
  112. padding-top:0;
  113. }
  114.  
  115.  
  116.  
  117. </style>
  118. </head>
  119.  
  120. <body>
  121. <div id="wrap">
  122. <div id="header">
  123. <img src="green-planet.gif" width="75" height="75" alt=
  124. "Green Planet" />
  125.  
  126. <h1>Your Website</h1>
  127. </div>
  128.  
  129. <div id="main">
  130. <h2>Column 1</h2>
  131.  
  132. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  133. Mauris vel magna. Mauris risus nunc, tristique varius,
  134. gravida in, lacinia vel, elit. Nam ornare, felis non faucibus
  135. molestie, nulla augue adipiscing mauris, a nonummy diam
  136. ligula ut risus. Praesent varius. Cum sociis natoque
  137. penatibus et magnis dis parturient montes, nascetur ridiculus
  138. mus.</p>
  139.  
  140. <p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
  141. consectetuer adipiscing elit. Fusce pulvinar lobortis purus.
  142. Cum sociis natoque penatibus et magnis dis parturient montes,
  143. nascetur ridiculus mus. Donec semper ipsum et urna. Ut
  144. consequat neque vitae felis. Suspendisse dapibus, magna quis
  145. pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat
  146. vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec
  147. ante in quam sollicitudin congue. Quisque congue egestas
  148. elit. Quisque viverra. Donec feugiat elementum est. Etiam vel
  149. lorem.</p>
  150.  
  151. <p>Aenean tempor. Mauris tortor quam, elementum eu, convallis
  152. a, semper quis, purus. Cras at tortor in purus tincidunt
  153. tristique. In hac habitasse platea dictumst. Ut eu lectus eu
  154. metus molestie iaculis. In ornare. Donec at enim vel erat
  155. tempor congue. Nullam varius. Lorem ipsum dolor sit amet,
  156. consectetuer adipiscing elit. Nulla feugiat hendrerit risus.
  157. Integer enim velit, gravida id, sollicitudin at, consequat
  158. sit amet, leo. Aliquam nec ante in quam sollicitudin congue.
  159. Quisque congue egestas elit. Quisque viverra. Quisque congue
  160. egestas elit. Quisque viverra.</p>
  161. </div>
  162.  
  163. <div id="sidebar">
  164. <h3>Column 2</h3>
  165.  
  166. <ul>
  167. <li><a href="#" class="image"></a><a href=
  168. "#">Link 1</a></li>
  169.  
  170. <li><a href="#" class="image"></a><a href=
  171. "#">Link 2</a></li>
  172.  
  173. <li><a href="#" class="image"></a><a href="#">Link 3</a></li>
  174.  
  175. <li><a href="#" class="image"></a><a href=
  176. "#">Link 4</a></li>
  177.  
  178. <li><a href="#" class="image"></a><a href=
  179. "#">Link 5</a></li>
  180.  
  181. <li><a href="#" class="image"></a><a href=
  182. "#">Link 6</a></li>
  183.  
  184. <li><a href="#" class="image"></a><a href=
  185. "#">Link 7</a></li>
  186.  
  187. <li><a href="#" class="image"></a><a href=
  188. "#">Link 8</a></li>
  189. </ul>
  190. </div>
  191.  
  192. <div id="footer">
  193. <p>Portions of this website were created using the free web
  194. resources available at www.elated.com and are copyright
  195. Elated Communications Ltd 1996-2002
  196. <br />
  197. Designed by Curtis LeBlanc</p>
  198. </div>
  199. </div>
  200. </body>
  201. </html>
Similar Threads
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
curt22 is offline Offline
56 posts
since Sep 2007
Oct 20th, 2007
0

Re: css background image problem

Never mind I fixed it. I needed to use divs instead of a's.
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
curt22 is offline Offline
56 posts
since Sep 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: question about sofware
Next Thread in HTML and CSS Forum Timeline: Anyone know how I can get a blog for my site?





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


Follow us on Twitter


© 2011 DaniWeb® LLC