a_bit_liquid
<!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>Floated=3col</title>
<style type='text/css'>
/**** Ok, as far as notes, the background is beige, and the header was fully
assembled and absolute positioned, The same with the three columns, contain
everything, stacked from top to bottom, absolute positioned. The template
title is absolute positioned, seperately, so I could overlay across the page
columns. Drop me an email for minor bugs. Tested in free Editor Nvu and in
DW, in IE and in Firefox. Validates xhtml and Css. ******/
/***** IMPORTANT NOTE: The basics are here, the canvas, images, colors, coding.
Still may want or need to recode some of it, to fit your own technique. Due to cross-
browser compatibility issues with liquid designs; which are somewhat different to work
wit, I use no left or right pad/margin, at all, on outer divs, but instead nest two divs,
like sticking a 3 inch box into a 4 inch box, to give you a 1/2 inch margin. The outer
at nearly full width, leave a few percent for play, style content centered, "margin:0 auto; and
text-align:center;" and then insert an inner div, at 90 percent width (100 if needed),
centered or floated, and a little pad to the inner div, if needed, . The inner gets all
styles, border, color, whatever. This provides a fake or faux left/right pad/margin, as
needed, by adjusting width percentage. You could also float the outer left, and the inner
right, to give you the same outcome, as I did in my A12 template's left column. *******/
/*************** CSS Document *******************/
/***** CSS Document ******/
/*********** default font-size:12px, use 100% for that ********/
/***** 90%=11px, 80% in forms, 85% otherwise roughs 10 to 10.5px, a minimum *****/
/****** NOTEs: DW wont view all docs properly, try browsers first, before modification *******/
/**** divs must float left for dw to view border, most pages must be 100% wide to view proper ********/
/********* to center page is confusing, when float left is necessary ************/
/**** trick for "center with float left" is float left 100% wide w/body margin sides 5% or more *****/
/**** Above not a 100% fix for dw view, borders still flakey *****/
/***** another trick to keep position going, is only float what needs floating *********/
/***** try add or remove <br> in end of empty divs, or remove float, make dw view properly *******/
/***** NOTE: The <strong> tag &/or no clear float at base, made link repeat at base of page *****/
/**** The trick hack to stop hover jumpy links, is to put every section into a div, classed seperate ****/
/****** any div that has a specified margin/pad can't have links without containers *****/
/****** another hack, is to classify all links, so that they don't margin/pad jumpy *****/
/***** the divs containing links can't have set width and margin/pad alterations, or theyll be jumpy *******/
/**** Hack: Removed width to stop jumpy hover-links, setting pad-margin made it width:auto *****/
/**** Jumpy Links solved with px instead of % on pad/margin ****/
/**** Rows of divs must be in wrappers, to wrap correctly, so they don't hang when wrapping" ***/
/*** Height to "li a" works to allow full width
links when width:100% is not an option;
and seems to force divs to hold contents,
when float is not an option. Height needs
accuracy, or problematic with Firefox ****/
/**** FLOAT:LEFT WAS NEVER USED IN MANY HORIZONTAL ULs *****/
/******** Not Blocked/Floated **********/
/**** Appears that inner divs go against prior divs, but which ones? *********/
/**** Deleting all unnecessary div borders resolved doublewide dw blowout *****/
/***** divs out of order, caused absolute columns to vanish ******/
/*** absolute positioning, use left (never right dimension) fixes layering problem ******/
/**** bodycontainer floated left caused doublewide blowout ******/
/**** VERY IMPORTANT NOTE ****/
/****
KEEP ALL ABSOLUTE POSITIONED DIVS INSIDE OF THE CANVAS_WRAP DIV, TO
KEEP ALL ABSOLUTE POSITIONED WORK BOXES VISIBLE IN Nvu and Dreamweaver
Editors. IT's JUST A Z-INDEX RELATED FIX FOR WYSIWYG HTML EDITORS.
VERY IMPORTANT NOTE ****/
/*** Colors Used In the Original Template:
#92847B: Taupe Body Background
#5c5c5c: Canvas Left Column Dark Gray:
#FFFFFF: White Center/Right Canvas
#372F2C: Darkest Black Rose Left Header
#736B68: Lighter Taupe Rose, Right Header
#7F7F7F: Medium Gray, Left Nav Hover and Header Title Gray
#336699: Blue Links, Center Column
#B48181: Mauve Links and Mauve H2 Margin
#A99D61: Gold, Header Text and left/top/base Links
****/
* {
}
body {
margin:0 auto;
padding: 0;
background-color: #92847B;
font-size:.70em;
font-family:verdana, arial, helvetica, sans-serif;
text-align:center;
}
.wrap {
margin:2px auto;
padding: 0;
width:90%;
text-align:center;
}
/* The background-image's for the .wrap below are for preloading
all the page's images, just add your own images to the pattern */
/*** Preload media ***/
.wrap {
background-image: url("a_bit_liquid-media/arrowwhite_left.gif");
background-image: url("a_bit_liquid-media/arrowblack_left.gif");
background-image: url("a_bit_liquid-media/dualarrowgold.gif");
background-image: url("a_bit_liquid-media/brush.gif");
background-image: url("a_bit_liquid-media/camera1.jpg");
background-image: url("a_bit_liquid-media/camera2.jpg");
background-image: url("a_bit_liquid-media/camera3.jpg");
background-image: url("a_bit_liquid-media/ebay.gif");
background-image: url("a_bit_liquid-media/shadow_leftontaupe.jpg");
background-image: url("a_bit_liquid-media/shadow_rightontaupe.jpg");
background-repeat: no-repeat;
background-position: -5000px -5000px;}
/**** end preload images ****/
/*** Here's another CSS image preload trick:
/*** PRELOAD IMAGES AGAIN, BY PUTTING IMAGES
IN THIS CLASS, AT THE BASE OF THE HTML *******/
.hiddenpic {display:none;}
/**** end preload images ****/
img {
margin: 0;
padding: 0;
border:0;}
p {}
/***** canvas IS FOR THE dark gray canvas and the shadow_leftontaupe.jpg background image *****/
.canvas {
display:block;
float:left;
margin: 0;
padding: 0;
padding-left:9px;
width:100%;
height:auto;
background: #5C5C5C url("a_bit_liquid-media/shadow_leftontaupe.jpg") repeat-y;
text-align:left;
}
/***** canvas_inner IS FOR THE shadow_rightontaupe.jpg background image ONLY *****/
.canvas_inner {
display:block;
float:left;
margin: 0;
padding: 0;
width:100%;
height:auto;
background: #5C5C5C url("a_bit_liquid-media/shadow_rightontaupe.jpg") repeat-y right top;
border: 0px solid #990000;
text-align:left;
}
/**** VERY IMPORTANT NOTE ****/
/****
KEEP ALL ABSOLUTE POSITIONED DIVS INSIDE OF THE MAIN WRAP DIV, AND BE
SURE TO SET THE Z-INDEX STACK ORDER; TO KEEP ALL ABSOLUTE POSITIONED
WORK BOXES VISIBLE IN Nvu and Dreamweaver Editors. IT's JUST A FIX
FOR WYSIWYG HTML EDITORS.
VERY IMPORTANT NOTE ****/
/****** This is the title text, absolute positioned over the entire
Template: Positioned Text box, basically. Just keep all absolute divs
inside of the wrapper and use css's z-index if necessary. *****/
.absolute_title {
margin: 0;
padding: 0;
position:absolute;
top:40px;
left:5%;
height:auto;
width:90%;
background-color:transparent;
border:0px solid #FFFFFF;
color:#FFFFFF;
font-weight:bold;
font-size:2.5em;
text-indent:17.8%;
text-align:left;
z-index:1000;
}
.left_column {
display:block;
float:left;
margin: 0;
padding: 0;
width:22%;
border:0px solid #eaeaea;
text-align:center;
}
.header_left {
display:block;
margin-top:10px;
padding: 0;
width:auto;
height:auto;
text-align:left;
color:#FFFFFF;
}
.header_leftrowone {
display:block;
margin: 0;
padding: 0;
width:100%;
height:5px;
background-color: #372F2C;
text-align:center;
color:#FFFFFF;
line-height:3px;
font-size:3px;
}
.header_leftrowtwo {
display:block;
margin: 0;
padding: 0;
width:100%;
height:80px;
background-color: #000000;
text-align:center;
color:#FFFFFF;
}
.header_leftrowthree {
display:block;
margin: 0;
padding: 0;
width:100%;
height:15px;
background-color: #372F2C;
text-align:center;
color:#FFFFFF;
}
.center_column {
display:block;
margin: 0;
padding: 0;
float:left;
height: 100%;
width:55%;
background-color: #FFFFFF;
text-align:center;
}
.header_center {
display:block;
margin: 0;
margin-top:10px;
padding: 0;
width:auto;
height:auto;
text-align:center;
}
.header_centerrowone {
display:block;
margin: 0;
padding: 0;
width:100%;
height:5px;
background-color: #736B68;
text-align:center;
color:#A99D61;
line-height:3px;
font-size:3px;
}
.header_centerrowtwo {
display:block;
margin: 0;
padding: 0;
width:100%;
height:80px;
background: #7f7f7f url("a_bit_liquid-media/brush.gif") repeat-x;
text-align:center;
color:#ffffff;
}
.header_centerrowthree {
display:block;
margin: 0;
padding: 0;
width:100%;
height:15px;
background-color: #736B68;
text-align:center;
color:#ffffff;
font-weight:normal;
}
/***** Adding overflow:auto to these content_right boxes
will auto scrollbar if needed. ******/
/**** To fix jumpy hover links, had to remove padding percentage,
and used pixels of padding instead. *********/
/***** Adding overflow:auto to div boxes
will add auto scrollbar functionality if needed. ******/
.main_content {
display:block;
margin:0 auto;
margin-top:20px;
margin-bottom:5px;
padding: 0;
padding-left:5px;
width:90%;
color:#000000;
text-align:left;
}
.bodylinks_menu {
display:block;
float:left;
margin:4px 0px;
padding:4px 0px;
width:100%;
border: 0px dashed #ffcc33;
}
.footer {
display:block;
clear:both;
margin: 0 auto;
margin-top:20px;
padding: 0;
width:90%;
border-top:1px solid #cccccc;
color: #000000;
text-align:center;
}
.right_column {
display:block;
margin: 0;
padding: 0;
padding-right:0px;
float:left;
width:22.1%;
border:0px solid #eaeaea;
text-align:center;
}
.header_right {
display:block;
margin: 0;
margin-top:10px;
padding: 0;
width:auto;
height:auto;
text-align:left;
color:#FFFFFF;
}
.header_rightrowone {
display:block;
margin: 0;
padding: 0;
width:100%;
height:5px;
background-color: #372F2C;
text-align:center;
color:#FFFFFF;
line-height:3px;
font-size:3px;
}
.header_rightrowtwo {
display:block;
margin: 0;
padding: 0;
width:100%;
height:80px;
background-color: #000000;
text-align:center;
color:#FFFFFF;
}
.header_rightrowthree {
display:block;
margin: 0;
padding: 0;
width:100%;
height:15px;
background-color: #372F2C;
text-align:center;
color:#FFFFFF;
}
.headlines {
display:block;
margin: 0 auto;
padding: 0;
text-align:left;
color:#A99D61;
}
.sidebox_a, .sidebox_b,.sidebox_c,.sidebox_d,.sidebox_e,.sidebox_f,.sidebox_g {
display:block; margin:0 auto; margin-top:15px; padding:0; height:70px; width:75%;
border:1px solid #7f7f7f; color:#A99D61;}
.sidebox_a {background: transparent url("a_bit_liquid-media/camera1.jpg") no-repeat center;}
.sidebox_b {background: transparent url("a_bit_liquid-media/camera2.jpg") no-repeat center;}
.sidebox_c {background: transparent url("a_bit_liquid-media/camera3.jpg") no-repeat center;}
.sidebox_d {background-color: transparent;}
.sidebox_e {background-color: #7F7F7F; border:1px solid black;}
.sidebox_f {height:135px;width:75%;background: transparent url("a_bit_liquid-media/ebay.gif") no-repeat center;}
.sidebox_g {background: transparent url("a_bit_liquid-media/camera3.jpg") no-repeat center;}
/***** Start Menu Styles *******/
/**** IMPORTANT NOTE ON LINKS: ******/
/**** TO SAVE TIME AND ENERGY, THE LEFT TOP NAV MENU WILL BE WHITE,
ALL LINKS ON WHITE BACKGROUND AREA WILL BE BLUE, AND EVERYTHING ESLE GOLD
#FFFFFF: White Center/Right Canvas
#336699: Blue Links, Center Column
#B48181: Mauve Links and Mauve H2 Margin
#A99D61: Gold, Header Text and left/top/base Links *****/
/**** Page Link Styles (NOT MENU LINKS) *****/
a:link, a:visited {color:#336699; font-weight:normal;}
a:hover, a:active {color:#B48181; background-color:#eaeaea;font-weight:normal;}
/**** "topmenu" HORIZONTAL ****/
.topmenu {margin:0 auto; padding:0; width:100%; text-align:center;}
ul.topmenu {margin: 0; padding: 0; padding-bottom:2px; list-style: disc inside;text-align: center;}
ul.topmenu li {margin:0; padding: 0; display:inline; width:25%;}
/**** "topmenu" horizontal menu link styles ****/
ul.topmenu li a:link, ul.topmenu a:visited { color:#A99D61; font-weight:normal;width:100%; text-decoration:underline; }
ul.topmenu li a:hover, ul.topmenu a:active {color:#FFFFFF; font-weight:normal; width:100%; background-color: #7f7f7f; text-decoration:none; }
/*** leftnavs VERTICAL ***/
.leftnav {display:block;clear:both;margin:0 auto; margin-top:20px;padding: 0;padding-left:9px; width:95%; text-align:center;text-indent:0px;}
.leftnav ul{display:block;clear:both;margin:0 auto; padding:0;text-align:left;text-indent:0px;}
.leftnav ul li {display:block;margin:0; padding: 0; width:100%; list-style: none; border-bottom:1px solid #7f7f7f;text-indent:0px;}
/**** Side menu link styles ****/
.leftnav ul li a:link, .leftnav ul li a:visited {color:#FFFFFF; font-weight:normal; display:block; width:100%;padding: 4px 0px;text-decoration:none;}
.leftnav ul li a:hover, .leftnav ul li a:active {color:#FFFFFF; font-weight:normal; display:block; width:100%;padding: 4px 0px;text-decoration:underline; background: #666666 url("a_bit_liquid-media/arrowwhite_left.gif") no-repeat right center;}
/* the following 3 rules are for the submenu, if you removed the submenu remove these rules as well */
.leftnav ul ul li {line-height: 10px; border-bottom: none}
.leftnav ul ul li a:link, .leftnav ul ul li a:visited {color:#cccccc; text-indent:10px;}
.leftnav ul ul li a:hover, .leftnav ul ul li a:active, .current_page {
background: transparent url("a_bit_liquid-media/arrowblack_left.gif") no-repeat right center;}
/*** bodylinks_column: Body columned menus ***/
.bodylinks_column {display:block;float:left; margin:0 auto; padding:0; width:100%; text-align:center;}
ul.bodylinks_column {display:block; float:left; margin:0; padding:0; display:block; width:49.5%;}
ul.bodylinks_column li {margin:0; padding:0; list-style: none;}
/**** bodylinks_column Link/hover Styles ****/
ul.bodylinks_column a:link, .bodylinks_column a:visited {color:#336699;font-weight:normal; text-decoration:underline;background: url("a_bit_liquid-media/dualarrowgold.gif") no-repeat top left; padding-left: 15px;}
ul.bodylinks_column a:hover, .bodylinks_column a:active {color:#B48181;font-weight:normal;text-decoration:underline;background: transparent url("a_bit_liquid-media/dualarrowgold.gif") bottom left no-repeat;}
/**** rightnav Vertical ****/
.rightnav {display:block;margin:0 auto; margin-top:20px; padding: 0; width:90%; text-align:left;}
/**** Side menu link styles ****/
.rightnav a:link, .rightnav a:visited {color:#FFFFFF; font-weight:normal;width:100%; text-decoration:none}
.rightnav a:hover, .rightnav a:active {color:#FFFFFF; font-weight:normal; width:100%; background-color: #666666;text-decoration:underline;}
/**** SIDEBOXES: LINK STYLES: *****/
.sidebox_a a:link, .sidebox_a a:visited,.sidebox_b a:link, .sidebox_b a:visited,
.sidebox_c a:link, .sidebox_c a:visited,.sidebox_d a:link, .sidebox_d a:visited,
.sidebox_e a:link, .sidebox_e a:visited, .sidebox_f a:link, .sidebox_f a:visited,
.sidebox_g a:link, .sidebox_g a:visited{
color:#ffffff;font-weight:normal; text-decoration:underline;}
.sidebox_a a:hover, .sidebox_a a:active,.sidebox_b a:hover, .sidebox_b a:active,
.sidebox_c a:hover, .sidebox_c a:active,.sidebox_d a:hover, .sidebox_d a:active,
.sidebox_e a:hover, .sidebox_e a:active, .sidebox_f a:hover, .sidebox_f a:active,
.sidebox_g a:hover, .sidebox_g a:active {
color:#ffffff;font-weight:normal;background-color:#666666;font-weight:normal; text-decoration:none;}
/**** "basemenu" HORIZONTAL ****/
.basemenu {display:block; margin:0 auto; padding: 0; width:auto; text-align:center;}
ul.basemenu {display:block; margin:0; padding: 0; padding-bottom:2px; list-style: none inside; text-align: center;}
ul.basemenu li {margin:0; padding: 0; display:inline; width:25%;}
/**** "basemenu" menu link styles ****/
ul.basemenu li a:link, ul.basemenu li a:visited {color:#336699;font-weight:normal;}
ul.basemenu li a:hover, ul.basemenu li a:active {color:#B48181;font-weight:normal;background-color: #eaeaea;font-weight:normal;}
h1 {
margin:0;
padding:0;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
border-right: 20px solid #B48181;
color: #336699;
font-size: 1.5em;
font-weight:normal;
}
h2 {
margin:0;
padding:0;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
border-right: 20px solid #B48181;
color: #A99D61;
font-size: 1.5em;
font-weight:normal;
}
h3 {
margin:0;
padding:0;
color: #336699;
font-size: 1.5em;
font-weight:normal;
}
</style>
</head>
<body>
<div class="absolute_title">a bit liquid</div>
<div class="wrap">
<div class="canvas">
<div class="left_column">
<div class="header_left">
<div class="header_leftrowone"> </div>
<div class="header_leftrowtwo"> </div>
<div class="header_leftrowthree"> Floated 3 column </div>
</div>
<div class="leftnav">
<ul>
<li><a href="#">Topic1</a> </li>
<li>
<ul>
<li><a class="current_page" href="#">Main</a> </li>
<li><a href="#">A Submenu item</a> </li>
<li><a href="#">Another item</a> </li>
</ul>
</li>
<li><a href="#">Topic2</a> </li>
<li><a href="#">Topic3</a> </li>
<li><a href="#">Link4</a> </li>
<li><a href="#">Link5</a> </li>
<li><a href="#">Link6</a> </li>
<li><a href="#">Link7</a> </li>
</ul>
</div>
<div class="sidebox_a"></div>
<div class="sidebox_b"></div>
<div class="sidebox_c"></div>
<div class="sidebox_d">
<p>Text</p>
<p><a href="#">Link</a></p>
</div>
<div class="sidebox_e">
<p>Text</p>
<p><a href="#">Link</a></p>
</div>
</div>
<div class="right_column">
<div class="header_right">
<div class="header_rightrowone"> </div>
<div class="header_rightrowtwo"> </div>
<div class="header_rightrowthree">
<ul class="topmenu">
<li><a title="Home"
href="#">Home</a> | </li>
<li><a title="Information"
href="#">Information</a> | </li>
<li><a title="Designs"
href="#">Designs</a> | </li>
<li><a title="thoughts"
href="#"> Thoughts</a> </li>
</ul>
</div>
</div>
<div class="content_wrapper">
<div class="content_left">
<h2>Originally Designed By Boris Cherny</h2>
<p><span class="main_content">Hi,<br />
<br />
This is a template called "a bit liquid; a
liquid version/revision upgrade, imo, "series" of Boris Cherny's "<a href="http://oswd.org/designs/search/designer/id/6352/" target="_top">a
bit modern</a>", which is fixed width. Enclosed, your choice of
liquid 2 or 3 columns, absolute or float positioning.
<br />
<br />
This template is absolutely free, open source, with no strings attached. I would enjoy seeing any active versions, so please consider dropping me a note using the member email form here, if
you use it. Not required, but please consider leaving the link in the footer, back to <a href="http://oswd.org/user/profile/id/6372" target="_blank">OSWD.ORG</a>. Take a peek at my other premium designs, <a href="http://oswd.org/user/profile/id/6372" target="_blank">here</a>. Free java flyout menus and many extras, available at my own site, "<a href="http://wholives.com/tools/freestuff.html" target="_blank">here</a>". <br />
</span><br />
<span class="main_content"> Write if you have any questions, problems, or suggestions; using member tools. <span class="content"> </span>All Liquid 90% screen width, regardless of resolution
(easily and quickly variable, more or less). All liquid widths and
heights, every single color is now easily CSS adjustable. Tested:
Nvu & DW, IE and Firefox. On the left menu, move the "current_page" CSS
class flag in the html to change "active" visual position. <br />
<br />
<a href="http://www.thesitewizard.com/gettingstarted/nvu1.shtml" target="_blank">Design & Publish
your own free Web Site using Nvu</a>: The world's most popular freeware WYSIWYG graphic or text based HTML editor; available for Win, Mac, or Linux. </span><br />
<br />
<a href="index.html" target="_blank">Template a </a>: This is a floated 3 column version, items stacked top to bottom, main content column also holds the right column. The title is absolute.</p>
<p><a href="indexb.html" target="_blank">Template b </a>: Second Revision;
Liquid 3 Column Absolute Version: Absolute Positioned header assembly.
Absolute positioned title. Absolute positioned left, center, and right
columns. Fully variable heights, widths, and colors.<br />
<br />
<a href="indexc.html" target="_blank">Template c </a>: Original first worthy revision;
Liquid 2 column floated version: All items stacked top to bottom in two
columns, floated over a dark gray canvas. Fully variable heights, widths,
and colors. <br />
<br />
<a href="indexd.html" target="_blank">Template d </a>: Last version. Fluid width 3 column floated with absolute
title. Fully variable heights, widths, and colors.</p>
<h2>The Design</h2>
<p>NOTE: CSS's overflow:auto; used for automatic "scrollbars";
is a handy safegard for wide content which might otherwise break the
layout. Here's an overflow styled div box named "right_content_e",
at 200px height and 100% width; <a href="http://wholives.com/design/templates-css/a12/indexb.html" target="_blank">"here"</a>. </p>
<h2>Some Links </h2>
<div class="bodylinks_menu">
<ul class="bodylinks_column">
<li><a href="#">Home</a> </li>
<li><a href="#">Link 2</a> </li>
<li><a href="#">Link3</a> </li>
<li><a href="#">Link4</a> </li>
<li><a href="#">Link5</a> </li>
<li><a href="#">Link6</a> </li>
<li><a href="#">Link7</a> </li>
</ul>
<ul class="bodylinks_column">
<li><a href="#">Home</a> </li>
<li><a href="#">Link2</a> </li>
<li><a href="#">Link3</a> </li>
<li><a href="#">Link4</a> </li>
<li><a href="#">Link5</a> </li>
<li><a href="#">Link6</a> </li>
<li><a href="#">Link7</a> </li>
</ul>
</div>
</div>
<div class="content_right">
<div align="center"><strong>Headlines</strong> </div>
<br />
<a href="#" target="_top">Mad Cow Disease Traced to Texas</a><br />
<br />
<a href="#" target="_top">Florida averages 30 shark attacks per year</a><br />
<br />
<a href="#">Free Stuff: Web Page Templates, Software, Tools, Web Sites,
Business Forms, & Related</a> <br />
<br />
<a href="#" title="Earthquakes" target="_top">Pumping Oil Causes Earthquakes</a><br />
<br />
<a href="#" title="Id Theft" target="_top">Identity Theft Links & Info</a><br />
<br />
<div class="rightbox_a"></div>
</div>
</div>
<div class="footer">
<ul class="basemenu">
<li><a href="http://validator.w3.org/check?uri=referer" target="_blank"> Xhtml
Valid</a> | </li>
<li><a href="http://jigsaw.w3.org/css-validator/validator-uri.html" target="_blank">CSS
Valid</a> | </li>
<li> <a href="http://validator.w3.org/checklink" target="_blank">Link
Checker</a> | </li>
<li> <a href="http://www.contentquality.com" target="_blank">Accessible</a ></li>
</ul>
Original design by<a href="http://oswd.org/designs/search/designer/id/6352/" target="_blank">Boris Cherny</a> (c) 2005 your corporation. <br />
<a href="http://oswd.org/user/profile/id/6372" target="_blank">OSWD.ORG: Free Web Page Templates</a></div>
</div>
</div>
</div>
<!-- Begin Image Preload (hiddenpics) -->
<img src="a_bit_liquid-media/arrowblack_left.gif"
alt="hiddenpic"
height="350" width="350" class="hiddenpic" /> <img src="a_bit_liquid-media/arrowwhite_left.gif"
alt="hiddenpic"
height="350" width="350" class="hiddenpic" /> <img src="a_bit_liquid-media/dualarrowgold.gif"
alt="hiddenpic"
height="350" width="350" class="hiddenpic" /><img src="a_bit_liquid-media/brush.gif"
alt="hiddenpic"
height="350" width="350" class="hiddenpic" /> <img src="a_bit_liquid-media/camera1.jpg"
alt="hiddenpic"
height="350" width="350" class="hiddenpic" /> <img src="a_bit_liquid-media/camera2.jpg"
alt="hiddenpic"
height="350" width="350" class="hiddenpic" /> <img src="a_bit_liquid-media/camera3.jpg"
alt="hiddenpic"
height="350" width="350" class="hiddenpic" /> <img src="a_bit_liquid-media/ebay.gif"
alt="hiddenpic"
height="350" width="350" class="hiddenpic" /> <img src="a_bit_liquid-media/brush.gif"
alt="hiddenpic"
height="350" width="350" class="hiddenpic" /> <img src="a_bit_liquid-media/shadow_leftontaupe.jpg"
alt="hiddenpic"
height="350" width="350" class="hiddenpic" /> <img src="a_bit_liquid-media/shadow_rightontaupe.jpg"
alt="hiddenpic"
height="350" width="350" class="hiddenpic" />
<!-- Begin Image Preload (hiddenpics) -->
</body>
</html>
Related examples in the same category