CODEWITHSUNDEEP
htmlcssnavigation
user1269625
user1269625

Reputation: 3209

CSS navigation and background image

I have CSS Navigation

.navigation{
    float:right;
    width:718px;
    background-image:url('http://inauguralseason.com/images/nav.png');
}

.navigation ul {
    float: right;
    list-style-type: none;
    margin: 0;
}

.navigation li {
    float: left;
}

.navigation ul a {
    color: #FFF;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
}

But the background image does not appear, how ever when I remove this line

.navigation li {
    float: left;
}

The background image appears, but my navigation is not aligned horizontally.

Any ideas?

Here is the HTML

<div class="navigation">
<ul>
<li><a href="#">Shop</a></li>
<li><a href="#">Our Collection</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">News</a></li>

</ul>

</div>

Thanks

Upvotes: 1

Views: 8449

Answers (1)

VVV
VVV

Reputation: 7593

Check this fiddle.

The image is there. It's just that the container (in this case the div) is not high enough to show the image. So what you only see the top of the image.

By forcing a height to the container (probably the same height as the image) you will show the whole background image.

Upvotes: 2

Related Questions