I have based my code off several tutorials which has culminated what I think is quite a complicated CSS layout. It has a docked footer. The sidebars are turned on dynamically in my template depending if there is content. The site is designed to work in the following scenarios:
1 Column
- No div class lft
- No div class rgt
- Content in div class col-main
http://jsfiddle.net/HMsKa/
2 Columns
- Content in either div class lft or div class rgt
- Content in div class col-main
http://jsfiddle.net/HMsKa/2/
3 Columns
- Content in div class lft
- Content in div class rgt
- Content in col-main div
http://jsfiddle.net/HMsKa/4/
Here is the HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Title</title>
<link href="/static/css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container-wrap">
<div id="header-wrap" class="full_width">
<div id="header-container" class="dc1">
<div id="header" class="thin_width rel">
<a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a>
<ul>
<li><a href="/posts/list/">Link1</a></li>
<li><a href="/posts/create/">Link 2</a></li>
<li><a href="/about">Link 3</a></li>
</ul>
</div>
</div>
</div>
<div id="container" class="thin_width">
<div class="full_width" style="height:auto;">
<div class="lft">Test</div>
<div class="rgt">Test</div>
<div id="col-main">
<h1>Sed ut perspiciatis unde</h1>
<div id="fullwidth">
<form id="searchForm" action="/search">
<input type="text" name="kw" class="field r2 lft dc1 tc5 b1 ts3" id="field_regular" placeholder="Keyword">
<input type="text" name="loc" class="field r2 lft dc1 tc5 b1 ts3" id="field_regular" placeholder="Location">
<input type="submit" class="button r2 b1 ts3" id="button_search" value="Search">
</form>
</div>
<p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
</div>
</div>
</div>
<div id="footer-wrap" class="thin_width">
<div id="footer-container" class="full_width abs dc1">
<div id="footer" class="thin_width rel">
© 2012 Company, Inc.
<ul>
<li><a href="/contact">Contact</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="/terms">Terms</a></li>
<li><a href="/privacy">Privacy</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the CSS:
Code:
/* GENERAL */
html { height:100%; }
body { height:100%; font-family: Arial, Helvetica, sans-serif; font-weight:normal; font-style:normal; font-size:100%; }
p { font size: 13px; margin: 10px 0; padding: 0; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 14px; }
blockquote { font-style: italic; }
/*POSITIONING */
.lft { float: left; }
.rgt { float: right; }
.rel { position: relative; }
.abs { position: absolute; }
/* TEXT COLOURS */
.tc6 { color: #4C4C4C; }
.tc5 { color: #333333; }
.tc4 { color: #999999; }
.tc3 { color: #808080; }
.tc2 { color: #F5F5F5; }
.tc1 { color: #FFFFFF; }
/* TEXT STYLING */
.bold { font-weight: bold; }
.italic { font-style:italic; }
/* TEXT SIZES */
.ts5 { font-size: 21px; }
.ts4 { font-size: 18px; }
.ts3 { font-size: 15px; }
.ts2 { font-size: 13px; }
.ts1 { font-size: 11px; }
/* DIV COLOURS */
.dc6 { background-color: #4C4C4C; }
.dc5 { background-color: #333333; }
.dc4 { background-color: #999999; }
.dc3 { background-color: #808080; }
.dc2 { background-color: #F5F5F5; }
.dc1 { background-color: #FFFFFF; }
/* WIDTHS */
.full_width { width: 100%; }
.thin_width { width: 940px; }
/* BORDERS */
.b1 { border: 1px solid; }
/* RADIUS */
.r6 { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.r2 { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
/* FIELD */
.field { line-height:27px; font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; padding-left:5px; margin-right: 15px; width:250px; }
/* BUTTON */
.button { cursor:pointer; font-family: arial, sans-serif; min-width: 70px; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; color: white; }
.button:hover { border: 1px solid #2F5BB7; }
.button:active { -moz-box-shadow: 0 0 2px #888; -webkit-box-shadow: 0 0 2px #888; box-shadow: 0 0 2px #888; }
/* BUTTONS */
#button_search { height: 34px; background: url(http://www.divology.com/wp-content/themes/divology/tutorials/google-search/ico-search.png) no-repeat #4d90fe center; border: 1px solid #3079ED; text-indent:-999px; color: transparent; line-height:0; font-size:0; }
#button_primary { border-color: #3079ED; background-color: #55A4F2; }
#button_secondary { border-color: gray; }
#field_regular { height:27px; }
/* FIELDS */
#field_large { height:300px; }
/* HEADER */
#header-wrap { top: 0; left: 0; }
#header-container { line-height: 60px; height: 60px; border-bottom: 1px solid #E5E5E5; }
#header { margin: 0 auto; position: relative; }
#header h1 { color: #beffbf; text-align: left; width: 290px; margin: 0; position: absolute; left: 0; top: 20px; }
#header h1 em { color: #90b874; font-size: small; display: block; }
#header ul { top:0; margin: 0; padding: 0; list-style: none; position: absolute; right: 0; }
#header ul li { float: left; margin-right: 5px; }
#header ul li a{ color: #90b874; font-weight: bold; font-size: 1.4em; margin-right: 5px; text-decoration: none; }
#header ul li a:hover { color: #beffbf; }
/* CONTAINER */
#container { margin: 0 auto; font-size: 1.4em; overflow: auto; padding: 31px 0 80px 0px; }
#container-wrap { min-height:100%; position:relative; min-width: 940px; }
#logo { height:20px; }
/* FOOTER */
#footer-wrap { bottom: 0; left: 0; }
#footer-container { line-height: 60px; height: 60px; bottom: 0; border-top: 1px solid #E5E5E5; }
#footer { margin: 0 auto; position: relative; }
#footer ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; right: 0; }
#footer ul li { float: left; margin-right: 5px; }
#footer ul li a { color: #90b874; font-size: 12px; padding-left: 10px; padding-right: 10px; text-decoration: none; }
#footer ul li a:hover { color: #beffbf; }
#faq EM { display:none; }
#faq LI STRONG { font-weight:normal; color:#246; text-decoration:underline; cursor:pointer; }
.hidden { display:none; }
#content{
background: orange;
height: auto;
}
#col-main { overflow:hidden; }
I am new to CSS coding, and I have had to make a lot of decisions without really knowing my stuff. I would love to get feedback to see if I can improve this code, especially with regards to making it cleaner, short code or more compatible.
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
