CODEWITHSUNDEEP
htmlcssnavigation
Nikki
Nikki

Reputation: 1

CSS navigation accent background-image not working

I've looked through several of the questions on stackoverflow and still haven't found the answer...a Google searched was useless as well....

Here's my CSS: 

#nav {
    text-align:center;
    display: block;
    background-image: url(lines.png);
    background-repeat: repeat-x;
    font-family: Gabrielle;
    text-decoration: none;
}

The most common question asked is whether or not the file is in the correct folder - I assure you it is. This site is not live, I'm only working from local files thus far.

Here's the accompanying HTML:

<div id="nav">
 <ul>
    <li><a href="kitchen.html">Kitchen &amp; Bath</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="interior.html">Interior Design</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="graphic.html">Graphic Design</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="cad.html">Auto CAD</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="modeling.html">3D Modeling</a></li>
</ul>

In case that's helpful somehow.

I'm trying to make "accent lines" on either side of my navigation, and I'm not sure if I'm going about it the right way. Here's a link to the site that "inspired" me.... You'll see that on either side of their navigation there are the elegant little lines. Those are what I'm trying to create.

http://www.tinkeringmonkey.com/

As I said, perhaps I'm going about it the wrong way. Any suggestions to either make the existing code work, or suggestions for an improved way to go about doing this would be greatly appreciated.

Upvotes: 0

Views: 607

Answers (2)

NickTheGreat
NickTheGreat

Reputation: 160

Try adding a height and width to the #nav, and quotes to the background-image:url()

#nav {
text-align:center;
display: block;
background-image: url('./lines.png');
background-repeat: repeat-x;
font-family: Gabrielle;
text-decoration: none;
}

Also double check the file name/type and the file location. The above solution should work if there is a file called "lines.png" in the same folder as your html file.

Upvotes: 0

wanovak
wanovak

Reputation: 6127

You must specify a height for nav. Also a good idea to specify a line-height also so that the text within the ul is vertically centered.

#nav {
    text-align:center;
    display: block;
    background-image: url(lines.png);
    background-repeat: repeat-x;
    font-family: Gabrielle;
    text-decoration: none;
    height: 20px;
    line-height: 20px;
}

Upvotes: 1

Related Questions