html - Adding Image to Nav Bar Links -
i wanting add png image nav bar. cannot find correct location add in background-image: , have correct. image not center on text , need to. thanks
@charset "utf-8"; /* css document */ body { text-align: center } #navbar { position: relative; top: 15px; padding: 0; display: inline-block; background-repeat: repeat-x; border-radius: 15px; } #navbar li { list-style: none; float: left; position: relative; height: 50px; line-height: 50px; background-image: url(images/nav.png); } #navbar li { display: block; padding: 3px 30px; text-transform: uppercase; text-decoration: none; color: #999; font-weight: bold; } #navbar li a:hover { color: #000; } #navbar li ul { display: none; position: absolute; left: 0; width: 100%; margin: 0; padding: 0; text-align: center; margin-left: -100px; } #navbar li ul table { margin-top: -6px; width: 350px; background-image: url(images/nav.png); background-repeat: repeat-x; border-radius: 15px; } #navbar li ul table tr { height: 25px; } #navbar li:hover ul { display: block; } #navbar li:hover li { float: center; } #navbar li:hover li { color: inherit; } #navbar li li a:hover { color: inherit; } #bottomnav { position: fixed; z-index: 100; bottom: 15px; left: 0; width: 100%; }
<body> <header> <img src="../images/logo.jpg" width="800" height="225" alt="this our logo." /> </header> <ul id="navbar"> <li><a href="../index.html">home</a> </li> <li><a href="../services.html">services</a> <ul> <table align="center"> <tr> <td><a href="../spraying.html">spraying</a> </td> <td><a href="../combine.html">combining</a> </td> </tr> <tr> <td><a href="../planting.html">planting</a> </td> <td><a href="../drilling.html">drilling</a> </td> </tr> <tr> <td><a href="../strip_tillage.html">strip tillage</a> </td> <td><a href="../tillage.html">tillage</a> </td> </tr> </table> </ul> </li> <li><a href="#">packages</a> </li> <li><a href="#">about us</a> </li> <li><a href="#">contact us</a> </li> </ul> <div id="bottomnav"> copyright 2016 cole rohr | site map </div> </body>
i suppose want :
#navbar li ul table { margin-top: -6px; width: 350px; background-image: url('http://i.stack.imgur.com/ruh5q.png'); background-repeat: no-repeat; background-size: 100% 100%; border-radius: 15px; } #navbar li { list-style: none; float: left; position: relative; height: 50px; line-height: 50px; background-image: url('http://i.stack.imgur.com/ruh5q.png'); background-repeat: no-repeat; background-size: 100% 100%; }
or this, keep background each td
of table
element in dropdown menu :
#navbar li ul table td { background-image: url('http://i.stack.imgur.com/ruh5q.png'); background-repeat: no-repeat; background-size: 100% 100%; }
Comments
Post a Comment