css background image problem

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 456,564 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,578 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1216 | Replies: 1

•

Join Date: Sep 2007

Posts: 54

Reputation: curt22 is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

curt22

Offline

Junior Poster in Training

css background image problem

Oct 20th, 2007

Why aren't the css background images showing up in the sidebar?

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Your Page</title>
  <style type="text/css">


        body,
        html {
                margin:0;
                padding:0;
                background:#000000;
                color : #00cc00;

        }
        body {
                min-width:810px;
        }
        #wrap {
                background:#000000;
                margin: 0 auto;
                width:810px;

        }
        #wrap img {
        float:left;
        }
        #header {
        background-color:#000000;
        height:75px;
        margin-top:3px;
        }



        #header h1 {

                padding:0;
                line-height:75px;
                font-family:"Comic Sans MS";
                margin-left:80px;
                color:#00CC00;
    }

        #main {
                background:#000000;
                float:right;
                width:560px;
                color:#00FF00;
        }
        #main h2, #main h3, #main p {
                padding:0 10px 0 0;
    }
        #sidebar {
                background:#000000;
                float:left;
                width:240px;
				

        }
        #sidebar ul {

                margin:0 0 0 0; padding: 0 0 0 0; list-style-type: none; 
    }


    #sidebar h3{
                padding:0 0 0 0;
                margin-top:5px;
                margin-left:3px;
                margin-bottom:3px;
                text-align:center;
                color:#00FF00;
				

    }
        #sidebar a
        {
        line-height:20px;
        text-decoration:none;
        margin-left:3px;
        color:#00FF00;
        text-align:left;
        }
        #sidebar a:hover
        {

        text-decoration:underline;
        }
        #sidebar img
        {
        margin-left:3px;
        border:0;
        float:left;
		}
		a.image{ 
		
		background-image: url("glowing-green-button.gif");
		height:20px;
		width:20px;
		}
        #footer {
        clear:both;
        color:#00ff00;
        background-color: #000000;
        font-size:12px;
        margin:0;
        }
		#footer p{
		padding-top:0;
		}



  </style>
</head>

<body>
  <div id="wrap">
    <div id="header">
      <img src="green-planet.gif" width="75" height="75" alt=
      "Green Planet" />

      <h1>Your Website</h1>
    </div>

    <div id="main">
      <h2>Column 1</h2>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Mauris vel magna. Mauris risus nunc, tristique varius,
      gravida in, lacinia vel, elit. Nam ornare, felis non faucibus
      molestie, nulla augue adipiscing mauris, a nonummy diam
      ligula ut risus. Praesent varius. Cum sociis natoque
      penatibus et magnis dis parturient montes, nascetur ridiculus
      mus.</p>

      <p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Fusce pulvinar lobortis purus.
      Cum sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus. Donec semper ipsum et urna. Ut
      consequat neque vitae felis. Suspendisse dapibus, magna quis
      pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat
      vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec
      ante in quam sollicitudin congue. Quisque congue egestas
      elit. Quisque viverra. Donec feugiat elementum est. Etiam vel
      lorem.</p>

      <p>Aenean tempor. Mauris tortor quam, elementum eu, convallis
      a, semper quis, purus. Cras at tortor in purus tincidunt
      tristique. In hac habitasse platea dictumst. Ut eu lectus eu
      metus molestie iaculis. In ornare. Donec at enim vel erat
      tempor congue. Nullam varius. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Nulla feugiat hendrerit risus.
      Integer enim velit, gravida id, sollicitudin at, consequat
      sit amet, leo. Aliquam nec ante in quam sollicitudin congue.
      Quisque congue egestas elit. Quisque viverra. Quisque congue
      egestas elit. Quisque viverra.</p>
    </div>

    <div id="sidebar">
      <h3>Column 2</h3>

      <ul>
        <li><a href="#" class="image"></a><a href=
        "#">Link 1</a></li>

        <li><a href="#" class="image"></a><a href=
        "#">Link 2</a></li>

        <li><a href="#" class="image"></a><a href="#">Link 3</a></li>

        <li><a href="#" class="image"></a><a href=
        "#">Link 4</a></li>

        <li><a href="#" class="image"></a><a href=
        "#">Link 5</a></li>

        <li><a href="#" class="image"></a><a href=
        "#">Link 6</a></li>

        <li><a href="#" class="image"></a><a href=
        "#">Link 7</a></li>

        <li><a href="#" class="image"></a><a href=
        "#">Link 8</a></li>
      </ul>
    </div>

    <div id="footer">
      <p>Portions of this website were created using the free web
      resources available at www.elated.com and are copyright
      Elated Communications Ltd 1996-2002
	  <br />
	  Designed by Curtis LeBlanc</p>
    </div>
  </div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Your Page</title>
  <style type="text/css">


        body,
        html {
                margin:0;
                padding:0;
                background:#000000;
                color : #00cc00;

        }
        body {
                min-width:810px;
        }
        #wrap {
                background:#000000;
                margin: 0 auto;
                width:810px;

        }
        #wrap img {
        float:left;
        }
        #header {
        background-color:#000000;
        height:75px;
        margin-top:3px;
        }



        #header h1 {

                padding:0;
                line-height:75px;
                font-family:"Comic Sans MS";
                margin-left:80px;
                color:#00CC00;
    }

        #main {
                background:#000000;
                float:right;
                width:560px;
                color:#00FF00;
        }
        #main h2, #main h3, #main p {
                padding:0 10px 0 0;
    }
        #sidebar {
                background:#000000;
                float:left;
                width:240px;
				

        }
        #sidebar ul {

                margin:0 0 0 0; padding: 0 0 0 0; list-style-type: none; 
    }


    #sidebar h3{
                padding:0 0 0 0;
                margin-top:5px;
                margin-left:3px;
                margin-bottom:3px;
                text-align:center;
                color:#00FF00;
				

    }
        #sidebar a
        {
        line-height:20px;
        text-decoration:none;
        margin-left:3px;
        color:#00FF00;
        text-align:left;
        }
        #sidebar a:hover
        {

        text-decoration:underline;
        }
        #sidebar img
        {
        margin-left:3px;
        border:0;
        float:left;
		}
		a.image{ 
		
		background-image: url("glowing-green-button.gif");
		height:20px;
		width:20px;
		}
        #footer {
        clear:both;
        color:#00ff00;
        background-color: #000000;
        font-size:12px;
        margin:0;
        }
		#footer p{
		padding-top:0;
		}



  </style>
</head>

<body>
  <div id="wrap">
    <div id="header">
      <img src="green-planet.gif" width="75" height="75" alt=
      "Green Planet" />

      <h1>Your Website</h1>
    </div>

    <div id="main">
      <h2>Column 1</h2>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Mauris vel magna. Mauris risus nunc, tristique varius,
      gravida in, lacinia vel, elit. Nam ornare, felis non faucibus
      molestie, nulla augue adipiscing mauris, a nonummy diam
      ligula ut risus. Praesent varius. Cum sociis natoque
      penatibus et magnis dis parturient montes, nascetur ridiculus
      mus.</p>

      <p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Fusce pulvinar lobortis purus.
      Cum sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus. Donec semper ipsum et urna. Ut
      consequat neque vitae felis. Suspendisse dapibus, magna quis
      pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat
      vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec
      ante in quam sollicitudin congue. Quisque congue egestas
      elit. Quisque viverra. Donec feugiat elementum est. Etiam vel
      lorem.</p>

      <p>Aenean tempor. Mauris tortor quam, elementum eu, convallis
      a, semper quis, purus. Cras at tortor in purus tincidunt
      tristique. In hac habitasse platea dictumst. Ut eu lectus eu
      metus molestie iaculis. In ornare. Donec at enim vel erat
      tempor congue. Nullam varius. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit. Nulla feugiat hendrerit risus.
      Integer enim velit, gravida id, sollicitudin at, consequat
      sit amet, leo. Aliquam nec ante in quam sollicitudin congue.
      Quisque congue egestas elit. Quisque viverra. Quisque congue
      egestas elit. Quisque viverra.</p>
    </div>

    <div id="sidebar">
      <h3>Column 2</h3>

      <ul>
        <li><a href="#" class="image"></a><a href=
        "#">Link 1</a></li>

        <li><a href="#" class="image"></a><a href=
        "#">Link 2</a></li>

        <li><a href="#" class="image"></a><a href="#">Link 3</a></li>

        <li><a href="#" class="image"></a><a href=
        "#">Link 4</a></li>

        <li><a href="#" class="image"></a><a href=
        "#">Link 5</a></li>

        <li><a href="#" class="image"></a><a href=
        "#">Link 6</a></li>

        <li><a href="#" class="image"></a><a href=
        "#">Link 7</a></li>

        <li><a href="#" class="image"></a><a href=
        "#">Link 8</a></li>
      </ul>
    </div>

    <div id="footer">
      <p>Portions of this website were created using the free web
      resources available at www.elated.com and are copyright
      Elated Communications Ltd 1996-2002
	  <br />
	  Designed by Curtis LeBlanc</p>
    </div>
  </div>
</body>
</html>