css example template left colum right header and footer default
Post Description: css example template left colum right header and footer default
Tags: css, example, template, left, colum, right, header, and, footer, default
This Post Was Posted On Feb 29, 2008 By web hosting #1563
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>cherry trees</title>
<meta name="description" content="desc">
<meta name="keywords" content="key">
<style type="text/css">
<!--
.main {
border: 2px solid #333333;
padding: 10px;
float: left;
}
.header {
border: 1px solid #3F3F3F;
padding: 5px;
margin-bottom: 10px;
background-color: #F7F7F7;
}
.page_message {
padding: 5px;
height: 38px;
}
.left_col {
border: 1px solid #3F3F3F;
padding: 5px;
width: 150px;
float: left;
background-color: #FFFFCC;
}
.right_col {
border: 1px solid #3F3F3F;
padding: 5px;
margin-left: 10px;
float: left;
}
.footer {
border: 1px solid #3F3F3F;
padding: 5px;
background-color: #E1F3FF;
float: left;
width: 960px;
margin-top: 10px;
}
.main_menu
{
width: 100%;
height: 25px;
background-color: #2D2F3E;
}
a.main-menu, a.main-menu:active, a.main-menu:link, a.main-menu:visited {
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
padding: 5px 10px;
float: left;
text-align: center;
color: #FFFFFF;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #595E7B;
}
a.main-menu:hover {
text-decoration: underline;
color: #FFFF00;
}
A.category_link:link, A.category_link:visited {
COLOR: #000099;
TEXT-DECORATION: none;
width: 100%;
}
A.category_link:hover {
TEXT-DECORATION: underline;
color: #CC3300;
}
.category {
list-style-type: none;
text-align: left;
float: left;
width: 100%;
}
-->
</style>
</head>
<body>
<div class="main">
<div class="header">
Title: cherry trees<br>
Description: desc<br>
Tags: key<br>
</div><!-- end header class -->
<div class="left_col">
<div class="category"><a href="http://localhost/myscripts/mypages/category/food.html" class="category_link">root</a> </div><div class="category"> <a href="http://localhost/myscripts/mypages/category/.html" class="category_link">fruit</a> </div><div class="category"> <a href="http://localhost/myscripts/mypages/category/red.html" class="category_link">red</a> </div><div class="category"> <a href="http://localhost/myscripts/mypages/category/cherry.html" class="category_link">cherry</a> </div><div class="category"> <a href="http://localhost/myscripts/mypages/category/ming.html" class="category_link">ming</a> </div><div class="category"> <a href="http://localhost/myscripts/mypages/category/strawberry.html" class="category_link">strawberry</a> </div><div class="category"> <a href="http://localhost/myscripts/mypages/category/apple.html" class="category_link">apple</a> </div><div class="category"> <a href="http://localhost/myscripts/mypages/category/grany.html" class="category_link">grany</a> </div><div class="category"> <a href="http://localhost/myscripts/mypages/category/washington.html" class="category_link">washington</a> </div><div class="category"> <a href="http://localhost/myscripts/mypages/category/yellow.html" class="category_link">yellow</a> </div><div class="category"> <a href="http://localhost/myscripts/mypages/category/banana.html" class="category_link">banana</a> </div><div class="category"> <a href="http://localhost/myscripts/mypages/category/pineapple.html" class="category_link">pineapple</a> </div><div class="category"> <a href="http://localhost/myscripts/mypages/category/meat.html" class="category_link">meat</a> </div><div class="category"> <a href="http://localhost/myscripts/mypages/category/beef.html" class="category_link">beef</a> </div><div class="category"> <a href="http://localhost/myscripts/mypages/category/pork.html" class="category_link">pork</a> </div>
</div><!-- end left_col class -->
<div class="right_col">
<a href="http://localhost/myscripts/mypages/testing.html">im testing</a> |
</div> <!-- end right_col class -->
<div class="footer">
Login: </div><!-- end footer class -->
</div><!-- end main class -->
</body>
</html>
so if you want to see it in action, you can just copy and paste this code into text editor like notepad and save the file as webune.html and upload it to your website and you will see how it look
Powered by: Webune Forums V3