Vertical Navigation Bar
Vertical Navigation Bar
Chapter - 25 : Vertical Navigation Bar: (Page 2/4)
(Cotinued from previous page)
Now we will make it more beautiful by introducing some background image. Lets say we have one image name 'link.gif' of size 200px * 25px in our image folder. Now change the 'li' command in our style sheet.
li {background-image:url('images/link.gif');
width:180px; height:25px;}
Output:
Not looking very impressive. Lets add some margin to 'li'
li {background-image:url('images/link.gif');
width:180px; height:25px; margin:6px;}
and some space before the link text, by modifying text in HTML as below.
Command: (in HTML file): <ul>
<li> <a href='home.html'>Home</a></li>
<li> <a href='contact.html'>Contact Us</a></li>
<li> <a href='about.html'>About Us</a></li>
</ul>
Output:
(Cont......... to next page (Pg-3))
© funandhobby.com (Vertical Navigation Bar)