CODEWITHSUNDEEP
css
rumspringa00
rumspringa00

Reputation: 132

CSS li background issue

I have a horizontal nav and I'm trying to use images for the li classes however, when I try .nav li .home{background:img url;} the image doesnt show, how can I fix this?

CSS

.nav {
    position: absolute;
    height: 20px;
    width: 100%;
    background-image: url(images/nav.png);
    background-repeat: repeat;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    z-index: 3;
}
.nav li {
    padding-left: 10px;
    list-style-type: none;
    margin-top: auto;
    margin-bottom: auto;
}
.nav li a {
    margin-top: 5px;
    margin-bottom: 5px;
}
.nav li.home {
    background: url(images/home.png);
}

HTML:

<ul class="nav">
<li>
<a herf="#" class="home">home</a>
</li>
</ul>

Upvotes: 0

Views: 130

Answers (3)

vanErp
vanErp

Reputation: 491

Your selector .nav li.home Will select list items with the class 'home' In your case, the list items do not have a class .home, it's the links inside the list item that has the class. li.home would have worked on the following lines of html:

<ul class="nav">
<li class='home'>
<a herf="#"></a>
</li>
</ul>

but when you edit this line to .nav li .home with a whitespace between the li and the .home, it will select the elements with class home "inside" the list item. In that case, the background will be added to the <a herf="#" class="home"></a> , so the image will be a link. It's both possible.

You also have to give the element with the background a width and a height to fit the background image. if the element is 0x0, you can't see the background.

Did you also check the url? if you go to the path of the image directly in your browser, does it give you a 404 error?

Upvotes: 0

JJ.
JJ.

Reputation: 5475

Your <li> has to have a value - otherwise it won't appear. You can use &nbsp; or real text like "home" and set text-indent: -999; to move it offscreen.

Upvotes: 0

JoJo
JoJo

Reputation: 20115

I'm trying to use images for the li classes

.nav li .home does not target the li. It will target elements with class name of "home" within the li. Without HTML source code, I cannot give a definite solution. But if I were to guess, your HTML is like this:

<ul>
 <li class="home">
  <a href="index.html">home</a>
 </li>
 <li class="about">
  <a href="about.html">about</a>
 </li>
</ul>

In this case, you would change your CSS to:

.nav li.home

By removing the space, the li is targeted.

Upvotes: 4

Related Questions