3 Replies Latest reply on Apr 16, 2010 2:00 PM by Nancy OShea

    Question on Background image of div.Please Help

    FlashNewGuy

      I am having trouble with adding a shadow to my website. I made some divs and the outside wrapper dive i made larger by 40px then the site. I then made a shadow in photoshop added to the wrapper div css background property and i see it show up in dreamweaver put not when i preview in a browser. I did notice when i add text to one of the divs it then shows up in the browser. Sorry if i amnot explaining it well maybe some code and images might help this:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      <style type="text/css">
      <!--

       

      }

       

      #header {
          width: 1000px;
          height: auto;
          clear: none;
          position: relative;
      }
      #wrapper {
          width: 1000px;
          margin-right: auto;
          margin-left: auto;
          background-color: #FFFFFF;
      }
      #container {
          width: 1040px;
          background-image: url(shadow.jpg);
          background-repeat: repeat-y;
          margin: auto;
          background-position: center;
          top: auto;
      }
      #left column {
          background-color: #00CC99;
          width: 200px;
          float: left;
          position: relative;
      }
      div.InnerLeft {
          width: 784px;
          height:123px;
          position: relative;
          background: #CCCCCC;
          float: left;
      }
      div.InnerRight {
          width: 216px;
          height:123px;
          position: relative;
          background: #AAAAFF;
          float: right;
      }

       

      -->
      </style>
      </head>

       

      <body>
      <div id="container">
        <div id="wrapper">
          <div id="header">
            <div class="InnerLeft"></div>
               <div class="InnerRight"></div>
          </div>
          <div id="left column"></div>
        </div>
      </div>
      </body>
      </html>

       

      this is what it looks like when i preview:

      example1.jpg

      Not shadow, but when i add some text to the code like a so:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      <style type="text/css">
      <!--

       

      }

       

      #header {
          width: 1000px;
          height: auto;
          clear: none;
          position: relative;
      }
      #wrapper {
          width: 1000px;
          margin-right: auto;
          margin-left: auto;
          background-color: #FFFFFF;
      }
      #container {
          width: 1040px;
          background-image: url(shadow.jpg);
          background-repeat: repeat-y;
          margin: auto;
          background-position: center;
          top: auto;
      }
      #left column {
          background-color: #00CC99;
          width: 200px;
          float: left;
          position: relative;
      }
      div.InnerLeft {
          width: 784px;
          height:123px;
          position: relative;
          background: #CCCCCC;
          float: left;
      }
      div.InnerRight {
          width: 216px;
          height:123px;
          position: relative;
          background: #AAAAFF;
          float: right;
      }

       

      -->
      </style>
      </head>

       

      <body>
      <div id="container">
        <div id="wrapper">
          <div id="header">
            <div class="InnerLeft"></div>
               <div class="InnerRight"></div>
          </div>
          <div id="left column">fgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfg</div>
        </div>
      </div>
      </body>
      </html>

      Now the shadow shows up, and it looks like this:example2.jpg

      Now I cant figure this out, some help would be great, also i checked my paths so i don't thinks is that and again i can see the shadow in dreamweaver just not when i preview