About US
          Contact Us

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;}


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>


(Cont......... to next page (Pg-3))
Vertical Navigation Bar © funandhobby.com (Vertical Navigation Bar)