Horizotal Navigation Bar
Horizotal Navigation Bar
Chapter - 25 : Horizotal Navigation Bar: (Page 3/4)
(Cotinued from previous page)
25.2- Horizontal Bar: The horizontal bars can be made by two ways. In both the way we will use our same set of command in HTML file (as done in vertical type)
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>
NOTE: this command will give you 'Vertical Navigational Bar'. To make a Horizontal bar we will use following method.
a) Float Method: In this method we will declare the 'li' element as float, so that they can be represented in same line by web browser.
Write the following command I style sheet.
Command: ul {list-style-type:none;
margin:0; padding:0;}
(as explained above, this command is for removing bullets and margins)
.li {float:left}
Output: HomeContact UsAbout Us
This looks quite odd. Lets add some width to the 'li' element to separate the links.
Command: Replace the 'li' element as followes
li {float:left; width:180px;}
Output: Home Contact Us About Us
(Cont......... to next page (Pg-4))
© funandhobby.com (Horizotal Navigation Bar)