Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    why can't i place a image on my menu bar?

    This is the code i am using to try to get an image to be my background for my nav bar.
    html:

    Code:
    			
    
    
    <div id="banner"></div>
    
    
    <div id="menu">
    <ul>
    	<li><a href="one.html" class="1">1</a></li>
    	<li><a href="two.html" class="2">2</a></li>
    	<li><a href="three.html" class="3">3</a></li>
    	<li><a href="four.html" class="4">4</a></li>
    	<li><a href="five.html" class="5">5</a></li>
    	<li><a href="six.html" class="6">6</a></li>
    </ul>
    	</div>
    css:

    Code:
    
    #banner {
    	width: 950px;
    	height: 110px;
    	padding: 0 30px 0 20px;
    	background: url(images/template_banner.jpg) no-repeat;
    }
    
    #banner #site_title {
    	float: left;
    	width: 250px;
    	margin: 30px 0 0 30px;
    }
    
    
    
    #menu {
    	float: right;
    	width: 600px;
    	padding: 0 10px;
    	background: url(images/template_menu_bg.jpg) no-repeat;
    }
    
    #menu ul {
    	overflow: hidden;
    	padding: 35px 0 0 0;
    	margin: 0px auto;
    	list-style: none;
    }
    
    #menu ul li {
    	padding: 0px;
    	margin: 0px;
    	display: inline;
    }
    
    #menu ul li a {
    	float: left;
    	display: block;
    	margin: 0px 5px;
    	padding: 10px;
    	font-size: 16px;
    	text-align: center;
    	font-weight: bold;
    	text-decoration: none;
    	color: #000000;	
    	background: url(images/template_menu_right.jpg) right top no-repeat;
    	outline: none;
    }
    
    #menu li a:hover, #menu li .current {
    	color: #ffffff;
    	background: #666600;
    }
    so can someone help me and tell me how to make the images work?


    ps: i hope i used the code tags correctly, first time here.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    First of all, this should be inline-block.

    Code:
    #menu ul li {
    	padding: 0px;
    	margin: 0px;
    	display: inline; /* display: inline-block; */
    }
    --------------------

    The problem with the image is probably your url(), you should re-check this.

    Code:
    background: url(images/template_menu_bg.jpg) no-repeat;
    If you are using a stylesheet that is in another folder (maybe your CSS is in a folder called "style"?), you may want to change this to:

    Code:
    background: url(/images/template_menu_bg.jpg) no-repeat;
    If that's not the problem, you should check whether the image is actually a .jpg, it might be .png or something else.

    --------------------

    If all else fails, just post the link to your website, so we can get a better look.

    All the best,
    Sammy12
    Last edited by Sammy12; 09-17-2012 at 01:06 AM.


  •  

    Posting Permissions

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