Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
website promotion banner
eturnkeys
Your Ad Here
Create A Bookmarking/favorites Script
by Michael Bloch
CSS "Watermarking" Effect
by Will
Changing Table Background on MouseOver
by Ades Tynyshov
Navigation With Lists (Vertical)
by Joseph Skidmore
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials Creating Your First CSS Website (Part 4)
rss

Creating Your First CSS Website (Part 4)

Author: GreyCobra.com More by this author
Browse Pages: << <  1  2  3  4  5 > >>

Added: Apr 06, 2006 Rating:  Average Rating: 4.77 Votes: 13 Position: 13476 of 13476Average Rating: 4.77 Votes: 13 Position: 13476 of 13476Average Rating: 4.77 Votes: 13 Position: 13476 of 13476Average Rating: 4.77 Votes: 13 Position: 13476 of 13476Average Rating: 4.77 Votes: 13 Position: 13476 of 13476 Level: Beginner Software:  DreamweaverGoLiveFrontPage

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="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<div class="header">Menu 2</div>
<div class="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<div class="header">Menu 3</div>
<div class="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">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.

image 1

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="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<div class="header">Menu 2</div>
<div class="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<div class="header">Menu 3</div>
<div class="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">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="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<div class="header">Menu 2</div>
<div class="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<div class="header">Menu 3</div>
<div class="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">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!



print this page tell a friend subscribe to newsletter subscribe to rss
Rate this Material: Bad 1 2 3 4 5 Excellent
Browse Pages: << <  1  2  3  4  5 > >>

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "Creating Your First CSS Website (Part 4)"