7 Replies Latest reply on Apr 13, 2010 12:19 AM by osgood_

    CSS - navbar background dispappear

    William-01 Level 1

      My navbar buttons i.e. home, about us etc. stacks vertically ( when I want it to display horizontal); my property:value is display:inline.

       

      Also, my navbar background disappears in Live View. In design view, it's visible, although pushed down towards the bottom of the vertical stack of button images.

       

      I'm confused as to why this is happening. I tired changing my code to start with:

       

      <div id="mainNav">
      <ul>

      It didn't work. So here is my code as I have it currently.

       

      <!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>My Siten</title>
      <link href="css/billy_raygun.css" rel="stylesheet" type="text/css" />
      </head>

       

      <body>
      <div id="container">

       

        <div id="header_wrap">
          <div id="header"><img src="images/brd_logo.jpg" width="400" height="155" alt="My Site" /></div>
        </div>
       
        <div id="nav_wrap">
          <div id="nav_bar">
            <ul id="mainNav">
            <li><a href="index.html"><img src="images/home.png" alt="home"/></a></li>
            <li><a href="about_us.html"><img src="images/about_us.png" alt="about_us"/></a></li>
            <li><a href="whatwedo.html"><img src="images/whatwedo.png" alt="what we do"/></a></li>
            <li><a href="portfolio.html"><img src="images/portfolio.png" alt="portfolio"/></a></li>
            <li><a href="testimonials.html"><img src="images/testimonials.png" alt="testimonials"/></a></li>
            <li><a href="contact_us.html"><img src="images/contact.png" alt="contact_us"/></a></li>
            </ul>
          </div>
        </div>
       
        <div id="top_row">Content for  id "top_row" Goes Here</div>
        <div id="bottom_row">Content for  id "bottom_row" Goes Here</div>
        <div id="footer">Content for  id "footer" Goes Here</div>
      </div>
      </body>
      </html>

       

      @charset "utf-8";
      /* CSS Document */

       

      #container {
          width: 960px;
          background: #fff;
          margin: 0 auto;
          padding-left: 0px;
          padding-right: 0px;
          overflow: hidden;
      }

       

      /* HEADER */

       

      #header_wrap {
          margin: 0;
          padding: 20px 0px 0px 0px;
          background-color: #000;
      }

       

      #header {
          background-color: #000;
      }

       

      /* NAVIGATION BAR */

       

      #nav_wrap {
          background-image: url(/images/nav_bar.jpg);
          background-position: left bottom;
          background-repeat: repeat-x;
      }

       

      #mainNav {
          margin: 0;
          display: inline;
      }

        • 1. Re: CSS - navbar background dispappear
          osgood_ Level 8

          You need to apply the display: inline to the 'li' tag, like below:

           

          #mainNav li {
          margin: 0;

          padding: 0;
          display: inline;

          list-sytle: none;
          }

           

           

          I don't use display: inline; anymore for horizontal naviagtion positioning but float: left;

           

          #mainNav {
          margin: 0;
          padding: 0;
          }

          #mainNav li {
          margin: 0;
          padding: 0;
          float: left;
          list-style: none;
          }
          #mainNav a {
          float: left;
          display: block;
          }

           

          When using 'float' you need to force the parent container, in this case 'nav_wrap', to wrap itself around the floated content within it. You do this by adding overflow; hidden; to the selector as shown below:

           

          #nav_wrap {
          background-image: url(/images/nav_bar.jpg);
          background-position: left bottom;
          background-repeat: repeat-x;
          overflow: hidden;
          }

          • 2. Re: CSS - navbar background dispappear
            William-01 Level 1

            Thank you Osgood for your continued interest as I tackle my first website.

             

            The information you provided worked great and arranged by buttons horizontally as I wanted. However, my navbar background still disappears and I have a thin white line between my header and navbar that won't go away.

             

            I first thought my button image height was taller than my navbar background but everthing is the same. Navbar background is 40px high and so is each button.

             

            I'm wondering, do I make my button images shorter than 40px?  In either case, why does my navbar background disappear in live view?

             

            William-01

            • 3. Re: CSS - navbar background dispappear
              osgood_ Level 8

              William-01 wrote:

               

              Thank you Osgood for your continued interest as I tackle my first website.

               

              The information you provided worked great and arranged by buttons horizontally as I wanted. However, my navbar background still disappears and I have a thin white line between my header and navbar that won't go away.

               

              I first thought my button image height was taller than my navbar background but everthing is the same. Navbar background is 40px high and so is each button.

               

              I'm wondering, do I make my button images shorter than 40px?  In either case, why does my navbar background disappear in live view?

               

              William-01

               

              Don't know what you mean by 'live view'. Do you mean when hitting the 'live view' button in Dreamweaver or when you view the page in a browser?

               

              Can you upload this page somewhere so I can visually view what's going on?

              • 4. Re: CSS - navbar background dispappear
                William-01 Level 1

                I answered and solved one of my own questions...

                 

                The navbar with a thin line at the top was a result of my button images being the same pixel height as my navbar background. By slicing the buttons around just text, I was able to add padding values to my CSS which gave me the results I wanted and more control of the button positioning on the navbar itself.

                 

                As for the navbar background disappearing in live view... This happens when I hit the "Live View" button in Dreamweaver next to code, split, design view buttons.

                 

                I will try to load what I have on my site today as that would probably be a lot easier to understand. I'm just excited about solving the button layout problem!

                 

                William-01

                • 5. Re: CSS - navbar background dispappear
                  William-01 Level 1

                  Site is loaded. please note, I already have a site up that looks similar but it was built by a web designer. I'm learning how to build sites on my own by following my own, and making minor improvements as I go.

                   

                  www.billyraygun.com/brd

                  • 6. Re: CSS - navbar background dispappear
                    William-01 Level 1

                    Ok, this is really weird.

                     

                    As I reverse engineering everything, I tackled my CSS again by cutting and pasting the code from osgood versus typing out my own. This time, the navbar background is visible in Live View within Dreamweaver. However, when test the site in Firefox through Dreamweaver using the preview/debug button, the navbar background disappears again.

                     

                    Any ideas about what is going on?

                     

                    Thanks in advance. This is some wild technology.

                     

                    william-01

                    • 7. Re: CSS - navbar background dispappear
                      osgood_ Level 8

                      Path to image is incorrect. You should have ../ in front of it as below:

                       

                       

                      #nav_wrap {
                          background-image: url(../images/nav_bar.jpg);
                          background-position: left bottom;
                          background-repeat: repeat-x;
                          overflow: hidden;
                      }