HTML and CSS RSS HTML and CSS RSS

css background image problem

Reply

•
•
Join Date: Sep 2007
Posts: 56
Reputation: curt22 is an unknown quantity at this point 
Solved Threads: 0
curt22 curt22 is offline Offline
Junior Poster in Training

css background image problem

 
0
  #1
Oct 20th, 2007
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>
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2007
Posts: 56
Reputation: curt22 is an unknown quantity at this point 
Solved Threads: 0
curt22 curt22 is offline Offline
Junior Poster in Training

Re: css background image problem

 
0
  #2
Oct 20th, 2007
Never mind I fixed it. I needed to use divs instead of a's.
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