SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    Singapore
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get background image to show

    My css code
    Code:
    #menu {width:172px; padding: 0; font-family: Verdana, Arial, sans-serif; font-size: 13px; background-color: #FFFFFF; color: #333;}
    #menu ul {border: 1px black solid; list-style: none; padding: 0; margin: 0 0 1 0; background-color: #d1d1d1;}
    #menu li .menu_box {background-image: url('./images/menu_fill.gif'); margin-left: 200px;}
    #menu li {border: none; margin: 0;}
    #menu li a {display: block; padding: 5px 5px 5px 0.5em; background-color: #FFFFFF; text-decoration: none; width: 100%;}
    My html code
    HTML Code:
    <div id='menu'>
    <ul>
    <li class='menu_box'><img src='./images/menu_news.gif' alt='' /></li>
    <li><a href='{$url}'>+ Home</a></li>
    <li><a href='{$url}about.php'>+ About Nascar Interior</a></li>
    </ul>
    <ul>
    <li class='menu_box'><img src='./images/menu_services.gif' alt='' /></li>
    <li><a href='{$url}portfolio.php'>+ Portfolio</a></li>
    <li><a href='{$url}enquiry.php'>+ Enquiry</a></li>
    </ul>
    </div>
    For some reason I can't get menu_fill.gif to fill the <li> with the class menu_box. Is there something wrong with my code?

  2. #2
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    Atlanta, GA
    Posts
    366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't have "#menu li" before the class specifier on that element. Take that off and it should work.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    Singapore
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, thanks for that tip. I think I got confused here:

    Code:
    CSS CODE
    ul#navigation
    {
    list-style-type: none;
    margin: 0;
    padding: .5em 0;
    border-top: 1px solid #666;
    }
    
    ul#navigation li a
    {
    display: block;
    width: 5em;
    color: #FFF;
    background-color: #036;
    padding: .2em 0;
    text-align: center;
    text-decoration: none;
    }
    
    ul#navigation li a:hover
    {
    color: #FFF;
    background-color: #69C;
    }
    
    ul#navigation .left { float: left; }
    ul#navigation .right { float: right; }
    
    HTML CODE
    <p>
    Lorem ipsum dolor sit amet...
    </p>
    <ul id="navigation">
    <li class="left"><a href="#">Back</a></li>
    <li class="right"><a href="#">Next</a></li>
    </ul>
    This is from (http://css.maxdesign.com.au/floatuto...torial0513.htm). Can someone please kindly point out why it's feasible here?

  4. #4
    SitePoint Zealot
    Join Date
    May 2003
    Location
    London
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not really sure what you are asking here. What don't you understand from it?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •