About US
          Contact Us

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>

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))

Horizotal Navigation Bar © funandhobby.com (Horizotal Navigation Bar)