From that initial creation of list of links with the bullets removed, you can develop navigation bars that go horizontal or vertical. Both navigation bars are enhanced simply by styling the <a> elements, which gives a vertical effect. By adding an inline or float property, we get a horizontal effect. Using "display: block;" displays the links as block elements, which make the whole link area clickable (not just the text). By default, the width of any block element would take up full width available, so the widths must be specified:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
ul { list-style-type: none; margin: 0; padding: 0; } a.demo1 { display: block; background-color: #ffff80; } a.demo2 { display: block; width: 75px; background-color: #ffff80; } </style> <body> <h3><b>Without</b> Width Specification:</h3> <ul> <li><a class="demo1" href="#">Home</a></li> <li><a class="demo1" href="#">News</a></li> <li><a class="demo1" href="#">Contact</a></li> <li><a class="demo1" href="#">About</a></li> </ul> <br /> <hr /> <h3><b>With</b> Width Specification:</h3> <ul> <li><a class="demo2" href="#">Home</a></li> <li><a class="demo2" href="#">News</a></li> <li><a class="demo2" href="#">Contact</a></li> <li><a class="demo2" href="#">About</a></li> </ul> <br /> <hr /> <p>A background color is added to the links to show the link area.</p> <p>Notice that the whole link area is clickable, not just the text.</p> </body> |
Without Width Specification:With Width Specification:A background color is added to the links to show the link area. Notice that the whole link area is clickable, not just the text. |
Note: Always specify the width for <a> elements in a vertical navigation bar. If you omit the width, you could end up with unexpected results. (The display side was moved down 8 lines for readers' convenience.)
