Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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

Here is the HTML

<!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">
                    &#169; 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:

/* 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.

share|improve this question

1 Answer 1

up vote 2 down vote accepted

Drop HTML4 in favor of XHTML or HTML5

There is no reason to stay with HTML4 any longer. Go with HTML5 or XHTML.

Class and ID names

Are your class and ID abbreviations really necessary? .tc1 doesn't say anything about what text color the class applies. Consider using something like .white-color or .white-text-color. The same goes for all your class and ID names. Name them so you know what they do. Your css file should not be a lookup table.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.