1

I've been trying to get an image to work with a navigation menu I'm working on. However, it seems no matter what I try, it doesn't display.

I've tried adding variations of...

display:block;
background-position:top left;
clear:both;
list-style-image:url

...from various google searches. I'm fairly new to HTML/CSS so I would appreciate any help or advice I can get. For reference, here is some HTML/CSS I'm working with.

HTML

<div id="wrapper">
<div id="navigation">
<ul class="menu">
<li><a href="#">Forum</a></li>
<li><a href="#">Bookmarks</a></li>
<li><a href="#">Top 100</a></li>
<li><a href="#">Browse</a></li>
<li><a href="/">Home</a></li>
</ul>
</div>

CSS

#navigation .menu {
background-image:url ('images/gradient_nav.png');
border-top-style:solid;
border-top-color:#DDD;
border-bottom:2px solid #ddd;
border-top-width:2px;
height:50px;
margin-top:-5px;
clear:both;
}

im using xampp to work on my local machine, my folder structure is:

htdocs\index.php
htdocs\css\style.css
htdocs\images\

Thanks in advance!

Sparky
  • 98,165
  • 25
  • 199
  • 285
kokoro1280
  • 13
  • 1
  • 5

1 Answers1

5

the url hast to be realative to the css file, not to the file where the css is included. you haven't given information about your folder-structure, but maybe it's like this:

index.html
images/gradient_nav.png
css/stylesheet.css

it so, the url hast to be ../images/gradient_nav.png - resulting in this:

#navigation .menu {
  background-image:url ('../images/gradient_nav.png');
  border-top-style:solid;
  border-top-color:#DDD;
  border-bottom:2px solid #ddd;
  border-top-width:2px;
  height:50px;
  margin-top:-5px;
  clear:both;
}
oezi
  • 51,017
  • 10
  • 98
  • 115
  • ah sorry about not adding that information, my folder structure is: `code` xampp/htdocs/index.php htdocs/css/style.css htdocs/images/gradient_nav.png (which is the file im trying to get to work) `code` – kokoro1280 Oct 17 '11 at 06:34
  • theres nothing posted in you comment ;) - please add that information to your question directly by editing it instead of posting it in comments - that way other readers will see it, too. – oezi Oct 17 '11 at 06:35
  • seeing you folder structure it's exactly what i assumed. just add `../` to the image-url and everything will work (if so, please mark my answer as accepted by clicking the gray tick-mark to the left of it). – oezi Oct 17 '11 at 06:43
  • @ oezi i added ../ to the file path and it didn't seem to do anything, which is odd.. Edit: nevermind, the issue was adding ../ and removing the space between :url ('filepath'). Thank you! =) – kokoro1280 Oct 17 '11 at 06:44