gila
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-AU">
<head>
<title>Gila Two</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type='text/css'>
/**********************************
* TITLE: Gila Screen Stylesheet *
* URI : gila/gila-screen.css *
* MODIF: 2003-Apr-30 19:09 +0800 *
**********************************/
/* ##### Common Styles ##### */
body {
color: black;
background-color: rgb(243,242,235);
font-family: verdana, helvetica, arial, sans-serif;
font-size: 73%; /* Enables font size scaling in MSIE */
margin: 0;
padding: 0;
}
html > body {
font-size: 9pt;
}
acronym, .titleTip {
border-bottom: 1px dotted rgb(168,140,83);
cursor: help;
margin: 0;
padding: 0;
}
.doNotDisplay {
display: none !important;
}
.smallCaps {
font-size: 117%;
font-variant: small-caps;
}
/* ##### Header ##### */
#header {
color: inherit;
background-color: rgb(184,38,25);
}
.headerTitle {
margin: 0;
padding: 0.25em 4mm 0.25em 4mm;
}
.headerTitle a {
color: black;
background-color: transparent;
text-decoration: none;
font-size: 110%; /* For MSIE */
font-weight: bold;
font-style: italic;
}
.headerTitle > a {
font-size: 138%; /* For fully standards-compliant user agents */
}
.headerTitle span {
color: white;
background-color: transparent;
font-weight: normal;
}
.subHeader {
color: white;
background-color: black;
font-size: 109%;
text-align: center;
margin: 0;
padding: 0.5ex 0;
}
.subHeader a {
color: white;
background-color: black;
text-decoration: none;
font-weight: bold;
margin: 0;
padding: 0 1ex;
}
.subHeader a:hover {
color: black;
background-color: white;
}
/* ##### Left Side Bar ##### */
.leftSideBar {
width: 12.5em;
float: left;
clear: left;
}
.leftSideBar .sideBarTitle {
color: rgb(64,64,64);
background-color: rgb(230,223,207);
font-weight: bold;
margin: 0;
padding: 0.8ex 1ex;
}
.leftSideBar ul {
list-style-type: none;
list-style-position: outside;
margin: 0 0 1em 0;
padding: 0;
}
.leftSideBar li {
margin: 1ex;
padding: 0 0 1.25ex 0.75ex;
}
.leftSideBar a {
color: rgb(166,140,83);
background-color: transparent;
text-decoration: none;
}
.leftSideBar a:hover {
color: rgb(64,64,64);
background-color: transparent;
text-decoration: none;
}
.leftSideBar .sideBarText {
color: rgb(166,140,83);
background-color: transparent;
line-height: 1.25em;
margin: 1ex 0.25ex 1.5em 0.75ex;
padding: 0;
display: block;
}
.leftSideBar .sideBarText a {
text-decoration: underline;
}
.leftSideBar .sideBarText a:hover {
text-decoration: none;
}
.leftSideBar .thisPage {
color: rgb(64,64,64);
background-color: transparent;
font-weight: bold;
}
/* ##### Right Side Bar ##### */
.rightSideBar {
width: 13em;
margin: 2ex 0.75ex 0 0;
padding: 0;
float: right;
clear: right;
border: 1px solid rgb(216,210,195);
}
[class~="rightSideBar"] {
margin-right: 1.5ex;
}
.rightSideBar .sideBarTitle {
color: black;
background-color: rgb(230,223,207);
font-weight: bold;
margin: 1.25ex 1ex;
padding: 0.9ex 1ex;
}
.rightSideBar a {
color: rgb(166,140,83);
background-color: transparent;
text-decoration: underline;
font-weight: bold;
}
.rightSideBar a:hover {
text-decoration: none;
}
.rightSideBar .sideBarText {
line-height: 1.5em;
margin: 0;
padding: 0 2ex 1em 2ex;
}
.rightSideBar .more {
text-decoration: none;
text-align: right;
margin: 0;
padding: 0 2ex 1em 2ex;
display: block;
}
.rightSideBar .more:hover {
text-decoration: underline;
}
/* ##### Main Copy ##### */
#main-copy {
color: black;
background-color: white;
text-align: justify;
line-height: 1.5em;
margin: 0 0 0 12.5em;
padding: 0.5ex 15em 1em 1em;
border-left: 1px solid rgb(216,210,195);
}
#main-copy h1 {
color: rgb(166,140,83);
background-color: transparent;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 175%;
font-weight: bold;
font-style: italic;
text-align: left;
margin: 1em 0 0 0;
padding: 1em 0 0 0;
border-top: 1px solid rgb(216,210,195);
}
#main-copy a {
color: rgb(168,140,83);
background-color: transparent;
text-decoration: underline;
}
#main-copy a:hover {
text-decoration: none;
}
p {
margin: 1em 0 1.5em 0;
padding: 0;
}
dt {
font-weight: bold;
margin: 0;
padding: 0 0 0.5ex 0;
}
dd {
margin: 0 0 1.5em 1.5em;
padding: 0;
}
/* ##### Footer ##### */
#footer {
color: black;
background-color: rgb(230,223,207);
font-size: 92%;
text-align: center;
line-height: 1.25em;
margin: 0;
padding: 1em 4mm 1em 4mm;
clear: both;
}
#footer div {
margin: 0;
padding: 0 0 1ex 0;
}
#footer a {
color: black;
background-color: transparent;
text-decoration: underline;
font-weight: bold;
}
#footer a:hover {
text-decoration: none;
}
</style>
<link rel="stylesheet" type="text/css" href="gila-print.css" media="print" />
</head>
<body>
<!-- For non-visual user agents: -->
<div id="top"><a href="#main-copy" class="doNotDisplay doNotPrint">Skip to main content.</a></div>
<!-- ##### Header ##### -->
<div id="header">
<h1 class="headerTitle"> <a href="http://www.free-css.com/">Gila <span>Two</span></a> </h1>
<div class="subHeader"> <span class="doNotDisplay">Navigation: </span> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Solutions</a> | <a href="http://www.free-css.com/">Store</a> | <a href="http://www.free-css.com/">Support</a> | <a href="http://www.free-css.com/">Contact Us</a> | <a href="http://www.free-css.com/">About Us</a> </div>
</div>
<div id="side-bar">
<!-- ##### Left Sidebar ##### -->
<div class="leftSideBar">
<p class="sideBarTitle">This Page</p>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="#cross-browser">Cross-browser</a></li>
<li><a href="#stylesheets">Stylesheets</a></li>
<li><a href="#accessibility">Accessibility</a></li>
</ul>
<p class="sideBarTitle">Branch Navigation</p>
<ul>
<li><a href="http://www.free-css.com/">OSWD Home</a></li>
<li><a href="http://www.free-css.com/">Browse Designs</a></li>
<li><a href="http://www.free-css.com/">haran’s Designs</a></li>
<li><span class="thisPage">Gila Homepage</span></li>
</ul>
<p class="sideBarTitle">Comments</p>
<span class="sideBarText"> Comments and constructive criticisms are welcome <a href="http://www.free-css.com/">via email</a>. </span> </div>
<!-- ##### Right Sidebar ##### -->
<div class="rightSideBar">
<p class="sideBarTitle">News</p>
<div class="sideBarText"><strong>? May 03</strong><br />
Submitted revised version of Gila to <a href="http://www.free-css.com/">OSWD</a></div>
<div class="sideBarText"><strong>3 Feb 03</strong><br />
Original version of Gila submitted</div>
<a href="" class="more">more news »</a>
<p class="sideBarTitle">Downloads</p>
<div class="sideBarText"><strong>Product Delta</strong><br />
<a href="http://www.free-css.com/">info</a> | <a href="http://www.free-css.com/">download</a></div>
<div class="sideBarText"><strong>Product Echo</strong><br />
<a href="http://www.free-css.com/">info</a> | <a href="http://www.free-css.com/">download</a></div>
<div class="sideBarText"><strong>Product Foxtrot</strong><br />
<a href="http://www.free-css.com/">info</a> | <a href="http://www.free-css.com/">download</a></div>
<p class="sideBarTitle">Validation</p>
<div class="sideBarText">Validate the <a href="http://validator.w3.org/check/referer">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> of this page.</div>
</div>
</div>
<!-- ##### Main Copy ##### -->
<div id="main-copy">
<h1 id="introduction" style="border-top: none; padding-top: 0;">Introduction</h1>
<p>This is version two of Gila, a revision of the <a href="http://www.free-css.com/">original design</a> I submitted
to <a href="http://www.free-css.com/"><acronym title="Open Source Web Design">OSWD</acronym></a> in February 2003. Following is a summary of the major differences between this version and the
original.</p>
<p>Gila was inspired by the homepage of <a href="http://www.free-css.com/">ActiveState</a>, an
open-source application development company. The name <span class="titleTip" title="Gila monster: a species of lizard">Gila</span> is a play on the
word <span class="titleTip" title="Komodo dragon: another species of lizard">Komodo</span>,
the name of one of ActiveState’s products which is based on <a href="http://www.free-css.com/">the Mozilla project</a>.</p>
<p>This template is marked up in <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> 1.0 Strict and styled
with <acronym title="Cascading Style Sheets">CSS</acronym>, allowing for greater compatibility
and transformability. The design does not use any tables (unlike <a href="http://www.free-css.com/">the design’s
inspiration</a>) resulting in greater design flexibility and cleaner code.</p>
<p>I hope you find this revision to your liking. You are free to use this design for
any purpose you wish — personal, commercial or otherwise — without any
obligation. If you publish a web site that’s based on this template, please <a href="http://www.free-css.com/">email me</a> your
site’s <acronym title="Uniform Resource Identifier">URI</acronym>.</p>
<h1 id="cross-browser">Improved Cross-browser Compatibility</h1>
<p>I did not test version one of Gila in Opera before submitting it to OSWD. As a result, the
original does not render properly in that browser. In contrast, this version of Gila has been
fully tested in <a href="http://www.free-css.com/">Opera</a> (7.01), Gecko
(<a href="http://www.free-css.com/">Mozilla</a> 1.3) and Internet Explorer (6.0) for consistent
rendering.</p>
<p>This means that people using <span class="titleTip" title="eg: Mozilla 1+, Opera 7+, Netscape 6+, Internet Explorer 6+">standards-compliant browsers</span> will see the same format and layout of your page.</p>
<h1 id="stylesheets">Modified Stylesheets</h1>
<dl>
<dt>More comprehensive screen stylesheet</dt>
<dd>The improved cross-browser consistency is a result of Gila’s more comprehensive screen
stylesheet. Major style parameters are explicitly defined in the stylesheet, resulting in
less dependence on browser-determined defaults and thus fewer rendering idiosyncrasies.</dd>
<dt>Removal of colour scheme stylesheet</dt>
<dd>I’ve removed the separate colour scheme stylesheet found in the original version,
instead incorporating the colour definitions in the single screen stylesheet.</dd>
<dt>Addition of a print media stylesheet</dt>
<dd>Gila now has a print media stylesheet that styles the page in a format appropriate for
black and white printing. To see the effect of this stylesheet, select <span class="smallCaps">print preview</span> from the <span class="smallCaps">file</span> menu, or direct this page to a printer (NB: print only this frame if you are viewing this
template in a multi-frame document).</dd>
</dl>
<h1 id="accessibility">Improved Accessibility</h1>
<p>This version of Gila has improved accessibility features for people with impaired vision.
The template tentatively conforms to the <a href="http://www.w3.org/TR/WCAG10"> <acronym>WCAG</acronym> double A rating</a> and <a href="http://www.access-board.gov/508.htm">§ 508</a> guidelines for web content
accessibility. The relative simplicity of the template’s underlying markup ensures that
your page can be easily transformed for rendering in aural, tactile (braille) and other
non-visual user agents.</p>
<p>Additionally, the majority of document metrics (widths, lengths and spacings) are font-size
relative. This means that a user can increase the default font size of your page (using their
browser) without compromising it’s layout.</p>
</div>
<!-- ##### Footer ##### -->
<div id="footer">
<div class="doNotPrint"> <a href="http://www.free-css.com/">Tell a Friend</a> | <a href="http://www.free-css.com/">Privacy Policy</a> | <a href="http://www.free-css.com/">Site Map</a> | <a href="http://www.free-css.com/">Feedback</a> | <a href="http://www.free-css.com/">Help</a> </div>
<div> Copyright © 2003, Your Company |
Modified on 2003-May-03 by <a href="http://www.oswd.org/email.phtml?user=haran">haran</a> </div>
</div>
</body>
</html>
Related examples in the same category