CODEWITHSUNDEEP
csshtmltwitter-bootstrap
rasparac
rasparac

Reputation: 11

How to put image over the navbar?

how to put image over the navbar like this BOOK ONLINE? i need CSS. https://www.dropbox.com/s/md2teu0ol82o23x/Website.psd

<div class="navbar-inner">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our Fleet</a></li>
    <li><a href="#">Booking</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#" id="book_online"></a></li>
  </ul>
</div>
.navbar .nav > li > #book_online {
background: url(../blabor2.jpg) no-repeat;
width: 183px;
height: 64px;
text-indent: -99999px;
position: absolute;
}

Upvotes: 0

Views: 4248

Answers (2)

Bugaloo
Bugaloo

Reputation: 1691

this is a very small "CSS" code and I can only guess

a .navbar .nav > li > #book_online {
    display: block; /* this is new */
    background: url(../blabor2.jpg) no-repeat;
    width: 183px;
    height: 64px;
    text-indent: -99999px;
    /*position: absolute;*//* may be you don't need this */
}

Upvotes: 0

Zohaib
Zohaib

Reputation: 328

You have to define absolute #book_position which will be relative to li.
Hope this will solve your problem ...

.nav>li{
   position:relative;
    }  

#book_online{
      position:absolute;
      z-index:10;
     display:block;
     background: url(../blabor2.jpg) no-repeat;
     width: 183px; 
     height: 64px; 
      }

Upvotes: 3

Related Questions