/* Layout Styles Xander Lih ©2008 http://feebdack.com */
/* Two Equal Height Jello Columns with Header & Footer and No Images */
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a
{
margin: 0;
padding: 0;
border: 0;
font-family: "Segoe UI" , "Trebuchet MS" , Arial, sans-serif;
}
/* Spare shorthand
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a {margin: 0; padding: 0; border: 0;}
*/
body
{
text-align: center; /* IE Center Content Hack */
padding: 0 385px; /* Critical value results in min-width 2x horizontal padding */
font-size: 85.01%;
background-color: #8888AA;
color: #000011;
}
#sizer
{
text-align: left; /* Undo IE Center Content Hack */
margin: 0 auto; /* this centers the wrappers in standards browsers */
width: 50%; /* Critical value gels the Jello 0%=rigid, 100%=fluid */
max-width: 430px; /* 1200 - 770 = 430, Fix for Old-IE (ignores limits) is in a conditional comment in HTML */
}
#expander
{
margin: 0 -385px; /* these side margin absolute-value should be the same or slightly less than body paddings */
min-width: 770px; /* This prevents Safari from losing the negative margins in narrow windows */
min-height: 1px; /* This gives Layout to IE7 */
position: relative;
}
/* Holly hack for IE. Must be zero, not the usual 1% value, due to IE bug \*/
* html #expander
{
height: 0;
}
/* */
#floater
{
position: relative;
width: 100%;
background-color: #444466; /* floater and leftwrap share background color */
color: #000011; /* Set color when setting background-color */
}
#leftwrap
{
width: 25%;
float: left;
background-color: #444466; /* floater and leftwrap share background color */
color: #EEEEFF; /* Set color when setting background-color */
position: relative;
display: inline;
}
#mainwrap
{
width: 75%;
float: right;
z-index: 1; /* First in markup, this div will be on top #mainbg at z-index 0 */
position: relative;
display: inline;
}
#mainbg
{
position: absolute;
bottom: 0; /* Stretch from top to bottom */
top: 0; /* Stretch from top to bottom */
width: 75%;
left: 25%; /* Make room for leftwrap */
z-index: 0; /* Last in markup has lower z-index and is drawn below #mainwrap at z-index 1 */
background-color: #EEEEFF; /* Specify main column color here */
color: #000011; /* Set color when setting background-color */
}
/* Masthead styles */
#mastwrap
{
height: 180px;
width: 100%;
overflow: visible;
background-color: #CCCCDD;
}
#mastlogo
{
height: 180px;
width: 180px;
float: right;
margin-right: 48px;
}
#mastname
{
float: left;
height: 88px;
width: 512px;
margin-top: 32px;
margin-left: 16px;
}
/* Footer styles */
#footwrap
{
width: 100%;
padding: 4px 0;
background-color: #222244;
color: #EEEEFF;
text-align: center;
font-size: 90%;
}
#footwrap a
{
text-decoration: none;
}
#footwrap a, #footwrap a:visited
{
color: #BBBBFF;
}
#footwrap a:hover
{
color: #DDDDFF;
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
About feebdack
-
feebdack.com
</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="/css/feeb-styles.css" />
<!--[if lte IE 7]>
<style type="text/css">
#sizer
{
width:expression(document.body.clientWidth > 1200 ? "770px" : "50%" );
}
</style>
<![endif]-->
</head>
<body>
<div id="sizer">
<div id="expander">
<!-- Begin mast-wrap -->
<div id="mastwrap">
<a href="/">
<img id="mastname" src="/data/assets/feeb/feebdack_hover.png" alt="Text Logo"/>
<img id="mastlogo" src="/data/assets/feeb/xanderlih_drop.png" alt="Matchstick Logo"/>
</a>
</div>
<!-- End mastwrap -->
<!-- Begin Page Content -->
<form method="post" action="/about/feebabout.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUENTM4MWRkYNXUayRKHnkIlezUNPJ4dsZD6lk=" />
</div>
<div id="floater" class="clearfix">
<!-- Begin main-wrap -->
<div id="mainwrap">
<!-- Begin Splash -->
<div class="splash">
<h1>
About feebdack.com
</h1>
<h2>
Articles about the site
</h2>
<div>
<p>A series of notes to myself about what works as far as HTML and CSS. The cms, <a href="http://umbraco.org">umbraco</a>, is discussed in <a href="/cms">its own section</a>.</p>
</div>
</div>
<!-- End Splash -->
<ul class="teasers" xmlns:msxml="urn:schemas-microsoft-com:xslt" xmlns:umbraco.library="urn:umbraco.library" />
</div>
<!-- End mainwrap -->
<!-- Begin Sidebar -->
<div id="leftwrap">
<ul class="topnav">
<li class="selected">
<a href="http://feebdack.com">Frontpage</a>
</li>
<li>
<a href="/archives.aspx">Archives</a>
</li>
<li>
<a href="/about.aspx">About</a>
</li>
<li>
<a href="/cms.aspx">Umbraco CMS</a>
</li>
<li>
<a href="/blisterws.aspx">Blister Gadgets</a>
</li>
<li class="selected">
<a href="/about.aspx">About</a>
</li>
<li>
<a href="/about/xanderlih.aspx">Site Administrator</a>
</li>
<li>
<a href="/about/demo-pages.aspx">Demo Pages</a>
</li>
<li>
<a href="/about/feebabout.aspx">About feebdack</a>
</li>
<li class="selected">
<a href="/about/feebabout.aspx">About feebdack</a>
</li>
</ul>
<div class="sideimage">
</div>
<div class="secondary"><p><h4>Related Websites</h4>
<ul>
<li><a href="http://advicethatrhymes.com" title="advicethatrhymes.com"><span>advicethatrhymes.com</span></a></li>
<li><a href="http://feebdack.com" title="feebdack.com"><span>feebdack.com</span></a></li>
<li><a href="http://fundamentalflaw.com" title="fundamentalflaw.com"><span>fundamentalflaw.com</span></a></li>
<li><a href="http://rabidware.com" title="rabidware.com"><span>rabidware.com</span></a></li>
<li><a href="http://xanderlih.com" title="xanderlih.com"><span>xanderlih.com</span></a></li>
<li><a href="http://atomicashes.com" title="Atomic Ashes">atomicashes.com</a></li>
</ul>
<h4>Administrate</h4>
<ul>
<li><a href="/umbraco/umbraco.aspx" title="umbraco login"><span>umbraco login</span></a></li>
<li><a href="https://feebdack.com:8443" title="plesk login"><span>plesk login</span></a></li>
</ul>
<br />
<h5><a href="http://rabidrobot.wincustomize.com/skins.aspx" target="_blank" title="rabidrobot at wincustomize">a rabidrobot kluge</a></h5>
</p></div>
</div>
<!-- End Sidebar -->
<div id="mainbg"></div>
</div>
</form>
<!-- End Page Content -->
<!-- Begin footwrap -->
<div id="footwrap">
<a href="http://validator.w3.org/check?uri=referer">Check XHTML</a>
«
feebdack.com
©2005-2008
<a href="mailto:xanderlih@feebdack.com">Xander Lih</a>
»
<a href="http://jigsaw.w3.org/css-validator/validator?uri=feebdack.com">Check CSS</a>
</div>
<!-- End foot-wrap -->
</div>
<!-- End Expander -->
</div>
<!-- End Sizer -->
<!-- Begin Google Analytics Script -->
<!-- End Google Analytics Script -->
</body>
</html>
