We have designed a header, left navigation menu, and content area of the website. This part of the tutorial will teach you how to design the right navigation menu for your website.
1. Designing the right navigation menu is very simple to do because we can almost use the exact code that we used for the left navigation menu. Insert the following classes into your CSS Styles:
|
td.rightnav {
background: #9D4631; width: 175px; border-left: 1px solid #000; padding: 0px; color: #FFF; font-size: 10px; text-align: center; } td.rightnav div.header { background: #BD1219; color: #FFF; padding: 3px; border-bottom: 1px solid #000; font-size: 12px; font-weight: bold; text-align: center; } td.rightnav div.menu { background: #9B2E1B; padding: 0px; border-bottom: 1px solid #000; } td.rightnav div.menu a { display: block; padding: 2px; margin: 0px; font-size: 10px; color: #FFF; border-style:none; text-align: center; } td.rightnav div.menu a:hover { background: #C58873; color: #FFF; text-align: center; } |
2. As you can see, these styles are almost identical to those used before on the left navigation menu. The only difference are some text alignments and border. After your content cell ends, we need to add the following code:
|
<td class="rightnav">
<div class="header">Menu 1</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <div class="header">Menu 2</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <div class="header">Menu 3</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <br> This is just a place where you can write some brief news, updates, and possibly insert some affiliates or links. You can even put more parts of your navigation menu here! </td> |
3. Basically, this is the same code as used in the left nav, except we use our new styles for the right navigation menu.
4. This is the end of our table, so if you have not already, end your cell, row, and table. Your full code should now look something like shown below:
|
<html>
<head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>My First CSS WebSite</title> <style type="text/css" media="all"> body { margin: 0; padding: 0; color: #000; background-color: #FFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; } .header { background-color: #9A060B; color: #FFF; font-size: 24pt; font-weight: bold; padding: 5px; border-bottom: 1px solid #000; } .quote { width: 100%; background-color: #EEE; color: #000; font-size: 8pt; font-weight: bold; padding: 2px; border-bottom: 1px solid #000; text-align: right; } table#main { height: 100%; vertical-align: top; } table#main td { vertical-align: top; } td.leftnav { background: #9D4631; width: 175px; border-right: 1px solid #000; padding: 0px; color: #FFF; font-size: 10px; text-align: center; } td.leftnav div.header { background: #BD1219; color: #FFF; padding: 3px; border-bottom: 1px solid #000; font-size: 12px; font-weight: bold; text-align: center; } td.leftnav div.menu { background: #9B2E1B; padding: 0px; border-bottom: 1px solid #000; } td.leftnav div.menu a { display: block; padding: 2px; margin: 0px; font-size: 10px; color: #FFF; border-style:none; text-align: left; } td.leftnav div.menu a:hover { background: #C58873; color: #FFF; text-align: left; } td.content { width: auto; padding: 0px 5px 5px 5px; font-size: 10px; } td.content div.title { background-color: #FFF; color: #000; border: none; font-size: 18px; font-weight: bold; } td.rightnav { background: #9D4631; width: 175px; border-left: 1px solid #000; padding: 0px; color: #FFF; font-size: 10px; text-align: center; } td.rightnav div.header { background: #BD1219; color: #FFF; padding: 3px; border-bottom: 1px solid #000; font-size: 12px; font-weight: bold; text-align: center; } td.rightnav div.menu { background: #9B2E1B; padding: 0px; border-bottom: 1px solid #000; } td.rightnav div.menu a { display: block; padding: 2px; margin: 0px; font-size: 10px; color: #FFF; border-style:none; text-align: center; } td.rightnav div.menu a:hover { background: #C58873; color: #FFF; text-align: center; } .footer { background-color: EEE; border-top: 1px solid #000; padding: 5px; text-align: center; font-size: 10px; } </style> </head> <body> <div class="header">CSS Website</div> <div class="quote">Because CSS is Awesome</div> <table cellspacing="0" id="main"> <tr> <td class="leftnav"> <div class="header">Menu 1</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <div class="header">Menu 2</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <div class="header">Menu 3</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <br> This is just a place where you can write some brief news, updates, and possibly insert some affiliates or links. You can even put more parts of your navigation menu here! </td> <td class="content"> <div class="title">Content Header</div> Main content goes here! This is just some random text that you can change. Do not leave this dummy text on your actual site. This is not meant to be read, it is meant to be removed. Write news, articles, or whatever other kind of content you would like here.</td> <td class="rightnav"> <div class="header">Menu 1</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <div class="header">Menu 2</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <div class="header">Menu 3</div> <div class="menu"> <a href="/img_articles/8194/#">Link 1</a> <a href="/img_articles/8194/#">Link 2</a> <a href="/img_articles/8194/#">Link 3</a> <a href="/img_articles/8194/#">Link 4</a> <a href="/img_articles/8194/#">Link 5</a> </div> <br> This is just a place where you can write some brief news, updates, and possibly insert some affiliates or links. You can even put more parts of your navigation menu here! </td> </tr> </table> </body> </html> |
Continue to part 5 to learn how to design the footer for your CSS Website!
More HTML and CSS: 
