<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="The url goes here">Home</a></li>
<li><a href="The url goes here">Games</a></li>
<li><a href="The url goes here">Nokia</a></li>
<li><a href="The url goes here">About Us</a></li>
</ul>
</body>
</html>
To be the lesser the above code will generate a form similar to the below.
Now let's add some parameters into the element using CSS Code to style it the way we want. On the example below i get rid of the bullet, set the padding and margin to 0.
<!DOCTYPE html>
<html>
<head>
<style>
ul {list-style-type:none; margin:0; padding:0;}
</style>
</head>
<body>
<ul>
<li><a href="#url 1">Home</a></li>
<li><a href="#url 2">Games</a></li>
<li><a href="#url 3">Nokia</a></li>
<li><a href="#url 4">About Us</a></li>
</ul>
</body>
</html>
To be the lesser the code above will generate a for similar to the below.
|
Home Games Nokia About Us |
The list-style-type:none is function to remove the bullets cuz generally a Navigation Bar doesn't need list markers, so it's better that you get rid of it. While the margin and padding is to remove browser default settings.
There are two styles to Navigation Bar that you can build, vertically and horizontally. To build a Vertical Navigation Bar, you just need to style the <a> elements by using CSS Code in addition to the standard code above. Here is an example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {list-style-type:none; margin:0; padding:0;}
a {display:block; width:80px; background-color:#f0f0f0;}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Nokia</a></li>
<li><a href="#">About Us</a></li>
</ul>
</body>
</html>
To be the lesser the code above will generate a form similar to the below.
|
Home Games Nokia About Us |
display:block - Displaying the links as block elements so the whole link area is clickable, not just the text.
width:50px - Specifies the area blocked. You must specify the width if you set the "display" to "block" (display:block) since defaultly it takes up the full width available.
There are two ways to create a Horizontal Navigation Bar, the first is by using inline methode and the second is by using floating methode. Both of them are working fine, but if you want each link to be the same size then you have to use floating method.
Inline Methode: Specify the <li> elements as a inline by using CSS Code. Here is an example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {list-style-type:none; margin:0; padding:0;}
li {display:inline;}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Nokia</a></li>
<li><a href="#">About Us</a></li>
</ul>
</body>
</html>
To be the lesser the code above will generate a form similar to the below.
| Home | Games | Nokia | About Us |
display:inline - By default, <li> elements are block elements. On the example above, i remove the line breaks before and after each list item so they display all on one line.
Floating Methode: On the example above the links have different widths, if you want all the links to have an equal width, then you have to use the floating methode instead of the inline methode. To the floating methode, you just have to float the <li> elements and specify a width for the <a> elements. Here is an example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {list-style-type:none; margin:0; padding:0; overflow:hidden;}
li {float:left;}
a {display:block; width:50px; background-color:#f0f0f0;}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Nokia</a></li>
<li><a href="#">About Us</a></li>
</ul>
</body>
</html>
To be the lesser the code above will generate a form similar to the below.
| Home | Games | Nokia | About Us |
Just note that If a !DOCTYPE is not specified, floating items can produce unexpected results
On the example above, a background color is added so it shows the link area. And the "overflow:hidden" is set for the ul element to prevent li elements from going outside of the list. While the "float:left" Sets block elements to slide next to each other.
0 comments:
Post a Comment