Modern_Media
New Member
Merry Christmas Everybody -
I created a 3 column website that has a sticky footer technique applied to it.
This is free to use, just copy and paste the code (or upload to your web server). Once you have it uploaded, there is a link which provides all the image files needed to make this website work.
*Note: just make sure you put the images in a directory called "images" ( /images ).
Features of this free template:
See it live here:
http://woodlandsadagency.com/websitedesignx/
Here is the xHTML code:
Here is the CSS code:
If you use this template, post a follow up link here. I would love to see what you did with it!
I created a 3 column website that has a sticky footer technique applied to it.
This is free to use, just copy and paste the code (or upload to your web server). Once you have it uploaded, there is a link which provides all the image files needed to make this website work.
*Note: just make sure you put the images in a directory called "images" ( /images ).
Features of this free template:
- Minimal graphics = fast page load speeds
- 3 Column Layout
- Footer Stays at the bottom of browser
- Once uploaded, there is a link to download original artwork files
- It's FREE! (Just don't rebrand it as your own)
See it live here:
http://woodlandsadagency.com/websitedesignx/
Here is the xHTML code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website Design X</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="header-logo">
<h1>YOUR LOGO</h1></div>
<div class="header-links">
<a href="#" class="first">Link <strong>One</strong></a>
<a href="#">Link <strong>Two</strong></a>
<a href="#">Link <strong>Three</strong></a>
<a href="#">Link <strong>Four</strong></a>
</div>
<div class="header-phone">
<h3>555.555.1212</h3></div>
</div><!-- header -->
<div id="banner">
<img src="http://woodlandsadagency.com/images/freeware/banner-image.jpg" width="960" height="356" alt="banner image" />
</div><!-- banner -->
<div id="content">
<div class="content-left">
<ul class="menu">
<li><a href="#">Navigation Link 1</a></li>
<li><a href="#">Navigation Link 2</a></li>
<li><a href="#">Navigation Link 3</a></li>
<li><a href="#">Navigation Link 4</a></li>
<li><a href="#">Navigation Link 5</a></li>
</ul>
</div>
<div class="content-right">
<p>To create your own top banner images, download the photoshop source file by clicking the link below:</p>
<p> </p>
<p><a href="http://woodlandsadagency.com/images/freeware/banner-photoshop.zip">download website design files</a></p>
</div>
<div class="content-center">
<h1>Website Design X - Custom Layout Design</h1>
<p>This layout is a free open source layout to use for any project. There are no rules to this layout - use it as you see fit as long as you do not put it up for sale.</p>
<p> </p>
<h2>Open Source Template</h2>
<p>Keep this free and open source. Hope you enjoy it!</p>
<p>Remember, you can download the top banner template file to your right!</p>
</div>
</div><!-- content -->
</div><!-- wrapper -->
<div id="footer">
<div class="footer-content">
<div class="footer-left"><img src="http://woodlandsadagency.com/images/freeware/social-icons.jpg" width="199" height="53" alt="social icons" /></div>
<div class="footer-right"><h3>555.555.1212</h3></div>
<div class="footer-center"><p>Footer content goes here</p></div>
</div>
<div class="copyright">
<p>Copyright 2010. Company Name or Business Name | <a href="http://woodlandsadagency.com/">Website Design | Advertising Agency</a></p></div>
</div><!-- footer -->
<!-- Layout Design by http://woodlandsadagency.com Advertising | Website Design | Graphic Design -->
</body>
</html>Here is the CSS code:
Code:
@charset "utf-8";
/* CSS Site designed by Woodlands Ad Agency - http://woodlandsadagency.com
This code is open source and free to use as you wish as long as you do
not try to sell or brand it as your own.
*/
/* CSS RESET LAYOUT */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
}
/* BASIC HTML STRUCTURE */
body { background: url(images/bkg.jpg) repeat-x center top #fff; color: #303030; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 14px; margin: 0; padding: 0; text-align: center; }
html, body { position: relative; height: 100%!important; }
h1, h2, h3, h4, h5, h6 { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 1.5em; line-height: 1.6em; color: #09F; }
a, a:link { text-decoration: none; color: #900; }
a:hover { text-decoration: underline; }
#wrapper { position: relative; width: 960px; min-height: 100%!important; margin: 0 auto; }
* html #wrapper { height: 100%; }
/* HEADER */
#header { position: relative; height: 130px; line-height: 130px; padding-top: 8px; }
.header-logo { position: absolute; width: 230px; height: 130px; left: 0; top: 8px; }
.header-links { width: 480px; margin: 0 auto; }
.header-links a { display: block; float: left; color: #222; width: 118px; height: 80px; line-height: 80px; margin: 15px 0; border-right: solid 1px #222; }
.header-links a.first { border-left: solid 1px #222; }
.header-phone { position: absolute; width: 230px; height: 130px; right: 0; top: 8px; }
.header-logo h1, .header-phone h3 { line-height: 120px; }
/* BANNER */
#banner { height: 358px; }
/* CONTENT */
#content { overflow: hidden; padding-bottom: 120px; clear: both; }
.content-left { width: 235px; float: left; }
ul.menu { width: 200px; list-style: none; margin: 10px 0; padding: 0; }
ul.menu li { text-align: right; line-height: 30px; color: #777; font-size: 130%; }
ul.menu li a { color: #777; font-weight: bold; }
.content-right { width: 215px; float: right; padding: 10px; text-align: left; }
.content-center { margin: 10px 240px; border-left: solid 1px #333; border-right: solid 1px #333; text-align: left; padding: 10px; }
/* FOOTER STICK METHOD */
#footer { clear: both; position: relative; width: 100%; height: 120px; margin-top: -120px; background: url(images/footer-bkg.jpg) repeat-x center top; }
#footer a { color: #ccc; font-weight: bold; }
.footer-content { position: relative; width: 960px; height: 70px; margin: 0 auto; padding-top: 10px; }
.footer-left { float: left; display: block; width: 235px; height: 70px; line-height: 60px; left: 0; }
.footer-right { float: right; display: block; width: 235px; height: 70px; line-height: 70px; }
.footer-center { margin: 5px 240px; }
.copyright { color: #ccc; height: 40px; line-height: 40px; }If you use this template, post a follow up link here. I would love to see what you did with it!
Last edited:
