Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
website promotion banner
eturnkeys
Your Ad Here
CSS Basic, CSS Codes
by Adam Priestley
Font Size
by WebMonkey
Create & Publish Your Own HTML Ezine
by Orion Williams
Apply Shadow Using CSS
by Alex Allied
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 5)
rss

Creating Your First CSS Website (Part 5)

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

Added: Apr 06, 2006 Rating:  Average Rating: 4.16 Votes: 49 Position: 13475 of 13475Average Rating: 4.16 Votes: 49 Position: 13475 of 13475Average Rating: 4.16 Votes: 49 Position: 13475 of 13475Average Rating: 4.16 Votes: 49 Position: 13475 of 13475Average Rating: 4.16 Votes: 49 Position: 13475 of 13475 Level: Beginner Software:  DreamweaverGoLiveFrontPage

All of the hard parts of our CSS Website Design are now finished.  The final part of the Website design is creating a footer using CSS!

1. If you have not taken the first 4 parts of this tutorial, you may want to go take them now!  If you have been following along, insert the following class into your CSS Styles:

.footer {
background-color: EEE;
border-top: 1px solid #000;
padding: 5px;
text-align: center;
font-size: 10px;
}

2. This class will have a background color of a light grey, a black border along the top, 5 pixels between the content and the sides, the text will be aligned to the center, and the font size will be 10 pixels.  After where you ended your table, insert the following code:

<div class="footer">Copyright 2005 <a href="http://www.greycobra.com">GreyCobra Productions</a></div>

3. Of course, you can replace this text with whatever you want your text to be!  That is it!  You have just completed designing your first CSS Website Layout!  Your full code should now look like this:

<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>
<div class="footer">Copyright 2005 <a href="http://www.greycobra.com">GreyCobra Productions</a></div>
</body>
</html>

Result

Good Luck! 



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 5)"