4 Replies Latest reply on Mar 15, 2010 2:54 PM by annbdavis

    Div with background won't render correctly

    annbdavis

      Hi,

       

      I hope you can help me out.  I'm a newbie, but I'm enjoying learning Dreamweaver and learning *with* DW as well.  I've been able to successfully put up one site with DW, but a second one has got me flummoxed.  With this site, I'm trying to use a photo as the background for a main div.  I was experimenting with different appearances, and when I removed the #main height/width, and then pasted back in the height/width for the div, the div did not go back to the old height/width before.  I have tried all kinds of edits to see what else could have changed, but I am sure this css is exactly the same as when it was rendering correctly.

       

      My overall goal is to create a page with a left sidebar and a main div displaying the photo background and an on-page title, and a footer at the bottom.

       

      Here is the URL: www.learningtreefarm.org/mainindex.html

       

      Here is the CSS:

       


      body  {
          margin: 0;
          padding: 0;
          text-align: center;
      }

       

      #container    {
          width: 80%;
          background-color: #9C9;
          margin: 0 auto;
          overflow: hidden;   
          text-align: left;
      }

       

      #sidebar {
          width: 13em;
          font-family: Calibri, Arial, sans-serif;
          float: left
          padding-top: 15px;
          padding-right: 0;
          padding-bottom: 15px;
          padding-left: 0;
      }

       

      #main {
          background-image:url(../images/webLTFbankbarnandpasture.jpg);
          height: 575 px;
          width: 773 px;
          float: right;
          background-repeat: no-repeat;
          font-family: "Monotype Corsiva";
          font-size: 350%;
          color: #FFF;
          text-align: left;
          margin: 0px;
          padding: 0px;
      }

       

      #container #sidebar img {
          padding-top: 15px;
          padding-right: 20px;
          padding-bottom: 5px;
          padding-left: 30px;
      }
      #container #sidebar ul {
          padding-left: 40px;
      }
      #footer {
          height: 100px;
          font-family: Calibri, Arial, sans-serif;
          text-align: center;
          clear: both;
          padding: 0px;
          border-top-width: thin;
          border-top-style: solid;
          border-top-color: #000;
      }
      #container #footer hr {
          color: #000;
          padding-top: 15px;
      }

       

      Hope this gives you enough information to see my problem.

        • 1. Re: Div with background won't render correctly
          osgood_ Level 8

          annbdavis wrote:


           

          My overall goal is to create a page with a left sidebar and a main div displaying the photo background and an on-page title, and a footer at the bottom.

           

          Here is the URL: www.learningtreefarm.org/mainindex.html

           


           

          That's never going to happen if you attach the backgroud image to the 'main' <div>. If you want the background image to appear across both the 'sidebar' and the 'main' <divs> then you have to apply it to the 'container' <div>

          • 2. Re: Div with background won't render correctly
            annbdavis Level 1

            Thanks, Osgood, but I don't want the background across the entire site, just in the main div.  The sidebar and footer

            will be part of a template for future pages, but this is the front page for the site. I'm pretty sure I know how to maintain the size of the div with just the background and the one line of text.  So my confusion is why, when I removed the size properties and then pasted them back in, didn't the div go back to what it was doing before?

             

            abdavis4

            • 3. Re: Div with background won't render correctly
              osgood_ Level 8

              annbdavis wrote:

               

              Thanks, Osgood, but I don't want the background across the entire site, just in the main div.  The sidebar and footer

              will be part of a template for future pages, but this is the front page for the site. I'm pretty sure I know how to maintain the size of the div with just the background and the one line of text.  So my confusion is why, when I removed the size properties and then pasted them back in, didn't the div go back to what it was doing before?

               

              abdavis4

               

              Your main <div> is not picking up the width and height because you have a space inbetween the unit of measurement and px. (see below)

               

              #main {
                  background-image:url(../images/webLTFbankbarnandpasture.jpg);
                  height: 575 px;
                  width: 773 px;
                  float: right;
                  background-repeat: no-repeat;
                  font-family: "Monotype Corsiva";
                  font-size: 350%;
                  color: #FFF;
                  text-align: left;
                  margin: 0px;
                  padding: 0px;
              }

              • 4. Re: Div with background won't render correctly
                annbdavis Level 1

                Doh!  Knew it was something I just wasn't seeing!  Thank you very much!

                 

                abdavis4