Skip navigation
Dlewis78
Currently Being Moderated

Having trouble getting background image to appear with my menu..what I am doing wrong?

Sep 7, 2012 3:52 PM

Tags: #cs4 #background #images

I have a graphic that I want to put in the background of my menu bar and I want to be able to position relative to where my text is, but I cannot seem to get the graphic to show up.  The only time it shows up is when I insert it (using CSS) into the entire body tag, but I have no control over the positioning of it there. 

 

I tried to add a background directly to my menu bar, but nothing happened (at least visibly).  I've posted my code below.  Help is certainly appreciated.  Thank you all!

 

**The specific code I am referencing is at the very bottom and it's in red.

 

 

CSS:

 

#container #Header #DeAara_Title {

          padding-left: 50px;

          width: 600px;

          clear: both;

 

}

 

 

#container #main_content #Quotes {

          float: left;

}

#container #main_content #TV_Icon img {

          margin-top: 51px;

}

 

 

 

#Header #Navigation_Menu ul {

          margin: 0px;

          padding: 0px;

          list-style:none;

                     

}

 

#container #main_content #Top_Hat_Photo {

          float: left;

}

 

 

#Header #Navigation_Menu ul li {

          float: left;

          text-align: center;

}

 

 

#Header #Navigation_Menu ul li a:link, #Header #Navigation_Menu ul li a:visited {

          padding:.2em .5em;

          display:block;

          font-family:Georgia, "Times New Roman", Times, serif;

          font-size:1em;

          font-weight:bold;

          color:#000;

          text-decoration:none;

          line-height:1.2em;

          margin-right:.5em

}

 

 

 

 

#Header #Navigation_Menu ul li a:hover {

          color:#C90;

}

 

 

#Header #Navigation_Menu ul li a.current, #Header #Navigation_Menu ul li a.current:hover, #Header #Navigation_Menu ul li a.current:active {

          color:#00F;

          cursor:default;

}

 

 

#footer {

          clear: both;

}

#container #Header #Navigation_Menu {

          background: url(images/Horizontal%20Menu%208.jpg);

}

 
Replies
  • Currently Being Moderated
    Sep 7, 2012 3:58 PM   in reply to Dlewis78

    Could be any number of things from a bad file path to a conflicting CSS rule.

     

    Best if you upload the problem page to the web and post a link so we can view it in our browsers.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 7, 2012 4:30 PM   in reply to Dlewis78

    Spaces in file names and link paths will get you in trouble

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 8, 2012 9:38 PM   in reply to Dlewis78

    You have an unclosed HTML comment on that page making it invisible in IE

     

    Change

     

    <style type="text/css">
    <!--

    body {
    height: 1024px;
    width: 1280px;
    margin:0;
    position:relative;
    padding: 0px;
    }


    </style>

     

    to

     

    <style type="text/css">
    <!--

    body {
    height: 1024px;
    width: 1280px;
    margin:0;
    position:relative;
    padding: 0px;
    }

    -->
    </style>

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 9, 2012 2:43 AM   in reply to Dlewis78

    Even though there are only a few elements on your page, you're making your CSS selectors far too complicated, which will cause problems with specificity (determining which rule takes precedence).

     

    In most cases, if an element has an ID, that ID on its own is sufficient as the selector. Instead of this:

     

    #container #main_content #Top_Hat_Photo

     

    all you need is this:

     

    #Top_Hat_Photo

     

    As for your background image, it's going to be difficult to get everything pixel-perfect cross-browser. However, I would suggest making it the background to the Navigation_Menu div. Because the menu items are floated, you need to give the div a height:

     

    #Navigation_Menu {

        background: url(images/Horizontal%20Menu%208.jpg) no-repeat;

        height: 90px;

    }

     

    You'll then need to play around with margins and padding on the links to slot them into the frames.

     

    Also, Ken Binney's right about spaces in filenames. Rename your images to get rid of the spaces.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 9, 2012 11:47 AM   in reply to Dlewis78

    You'll never get text to line up perfectly inside those background boxes.  It just won't work for all browsers and all settings.

     

    Use the black film strip as your navbar background and then style your  menu with CSS like this:

    http://alt-web.com/TEST/FilmMenu.html.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 11, 2012 3:14 PM   in reply to Dlewis78

    I think it would be more efficient to use a list menu styled with CSS.  You don't really need or want all those Div tags for a menu.  It's overkill for something this simple.

     

    HTML:

     

    <ul id="navbar">

    <li><a href="#">ABOUT US</a></li>

     

     

    <li><a href="#">PRODUCTS</a></li>

     

     

    <li><a href="#">ACCESSORIES</a></li>

     

    <li><a href="#">CONTACT</a></li>

    </ul>

     

     

    CSS:

     

    /* BEGIN HORIZONTAL MENU */

    #navbar{

    position:relative;

    width: 100%;

    margin: 0; /**adjust as needed**/

    padding:0;

    text-align:center;

      background:#000 url(../Images/BG/Film.jpg) repeat-x;

      min-height:50px;

    }

     

    #navbar li {

    list-style: none;

    font-size: 12px;

    float: left;

    text-align:center;

    }

     

    #navbar li a {

    display: block;

    text-decoration: none;

    margin-right: 12px; /* space between links */

    color: #000;

    width: 9em; /* adjust as needed or use auto */

    padding: 5px;

    font-weight: bold;

    line-height: 1.5em;

    background: #FFF;

    margin-top: 10px;

    margin-left: 12px;

    }

     

     

    /**on mouse over - in good browsers**/

    #navbar li:hover > a {

    color: #FFF;

    background: #333;

    background: -moz-linear-gradient(#333, #EAEAEA);

    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #EAEAEA),color-stop(1, #333));   

    background: -webkit-linear-gradient(#333, #EAEAEA);   

    background: -o-linear-gradient(#333, #EAEAEA);

    background: -ms-linear-gradient(#333, #EAEAEA);

    background: linear-gradient(#333, #EAEAEA);

    /* gradient filters for IE6-9 */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#EAEAEA',GradientType=0 )

    }

     

    /* Clear floated elements at the end*/

     

    #navbar:after {

    visibility: hidden;

    display: block;

    font-size: 0;

    content: " ";

    clear: both;

    height: 0;

    }

    /**end Horizontal menu**/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2012 12:02 PM   in reply to Dlewis78

    Bad path and file name:

     

    You have this in your CSS code:

    background:url(gimages/Curly_Strip_Fitted.jp)

     

    I suspect it should be this:

    background:url(images/Curly_Strip_Fitted.jpg)

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 17, 2012 11:48 AM   in reply to Dlewis78

    Probably the easiest way to fix the problem is to just float your naviagion menu.

     

    #Navigation_Menu {

         float: left;

    }

     

    That will expand the div and let you see the background image.  Right now the div has a height of 0 because it has floated elements in it.  If you float the the element with the floated elements in it, the cointainer element will expand to fit around the inner floated elements (Could I say that in a more confusing way?). 

     

    You may want to tone down the opacity (or at least make it lighter) of that background image, though.  I'd suggest doing that in your image editing program... trying to do that in css will open a whole other can of worms.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points