Navigation Bars - generate Navigation Bars

HOME

About US

Navigation Bars

Web Development : Starting from Concept, HTML, CSS, Web Site Develpment to Website Launching.
Written by: Sanjay Srivastava
B.Tech (Honours);IIT Kharagpur
PMP ; PMI USA

Chapter - 25 : Navigation Bars : (Page 4/4)

(Cotinued from previous page)

Now to mage it more professional we will introduce some background image and a margin.
li {float:left;
background-image:url('images/link.gif');
width:180px; height:30px; margin:6px;;}

Output.

b) Inline Method: In this method we will change 'li' element to 'inline' element from block element, so that they can be represented in same line by web browser.

Write the following command in style sheet. ul {list-style-type:none;
margin:0; padding:0;}

(as explained above, this command is for removing bullets and margins)
. li {display:inline;}

Output: Home Contact Us About Us

Now to mage it more professional we will introduce some background image.
li { display:inline;
background-image:url('images/link.gif');
width:180px; height:25px;}