Dave Russell » html

A truly versatile three column template

Dave — Mon, 11 Apr 2011 13:30:23 +0000

There are hundreds of 3 column templates out there, so what’s one more right? Well the difference here is that this one template can handle 1,2 or 3 columns, purely dependent on the existence of the columns on the html. So, if you have a CMS system and you generate a left or right column, then it will be rendered correctly, but if not then the content will stretch accordingly.

First we need some structure

<div id="skin" class="align rel">

        <div id="page" class="abs">

            <div id="main" class="column">

                <h1>Heading</h1>

                <div id="startcontent" class="content">

                    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. </p>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p>

                </div>

            </div>

            <div class="rel" id="footer"><p>footer</p></div>

            <div id=‘left’ class=‘column abs leftcolumn’><h2>Left</h2></div>

            <div id=‘right’ class=‘column abs rightcolumn’><h2>Right</h2></div>

        </div>  

    </div>

    <div id="bannerimage" class="abs"><a class="align">banner</a></div>

Some CSS (I like to include a reset.css before this to clear out any cross browser issues)

.align          {width:1004px;margin:0 auto;}

    .rel            {position:relative;}

    .abs            {position:absolute;}

    .displayblock   {display:block;}

    #page           {width:1004px;top:340px;background-color:#fff;}

    #left           {top:0;left:0;width:220px;background-color:#eee;}

    #right          {top:0px;left:740px;width:264px;background-color:#eee;}

    #main           {margin:0 10px;background-color:#bbb;}

    .incleft #main  {margin-left:220px;}

    .incright #main {margin-right:265px;}

    .content        {margin:27px 30px 100px 30px;}

    #bannerimage    {top:0px;left:-1px;z-index:-1;width:100%;height:600px;margin:0 auto;background-color:#ccc;}

    #bannerimage a  {height:195px;margin-top:85px;display:block;}

    #footer         {width:1004px;height:200px;background-color:#ddd;}

And then the javascript (remember to add the jQuery library and an optional equal heights plugin)

//—Column display manager
if($(‘#page .leftcolumn’).length>0){ $(‘#page’).addClass(‘incleft’); $(‘#left’).addClass(‘displayblock’);}
if($(‘#page .rightcolumn’).length>0){ $(‘#page’).addClass(‘incright’); $(‘#right’).addClass(‘displayblock’);}
        //—Column equal heights | dependancy: jquery.equalheights.js

        if ($(‘.column’).length > 1) { $(‘.column’).equalHeights(); }

The great thing about this template is that it justs works – remove the #left div and the content takes up the first two columns, remove the #right div and the content takes up the last two columns. Take out # left and #right and, I’m sure you’ve guessed it, the content takes up all three columns.

Getting destination page to reload after back button is clicked

Dave — Fri, 07 Jan 2011 09:55:21 +0000

I found that in certain cases that the back button was causing much mayhem on my site as the code is not reloaded and therefore caused some unwanted behaviour.

So here’s my cross-browser fix that I have devised after much googling. For a change IE was not the challenge, but rather Firefox as the onload event does not fire when the back button is used.

First, oddly, you need to clear the unload event

<body onunload="">

Then add a hidden field to the page to use as a flag:

<input type="hidden" id="refreshed" value="no" />

Lastly, the magic javascript. If you are using jQuery, don’t try and modernise the code and stick it in the .ready event – it won’t work, I tried.

onload = function() {

    var e = document.getElementById("refreshed");

    if (e.value == "no") e.value = "yes";

    else { e.value = "no"; location.reload(); }

}

Good luck, let me know if this helped.

Thanks go to those who contributed.

Fantastic use of pure css to create animation

Dave — Fri, 29 Jan 2010 11:20:14 +0000

I like to think I have a fairly good grip on CSS, but this takes it to another level:
Introducing the rolling coke can…

Consider yourself humbled.

A really really flexible CSS layout

Dave — Wed, 13 Jan 2010 13:09:01 +0000

This is a really really flexible layout that does not make use of tables and can be used as either a 1,2 or 3 column layout by simply including or omitting the left and right columns. The content is king, so the content comes first in the html followed by the rest. The structure is controlled via CSS with a little bit of coolness added on thanks to jQuery.

The top banner code is there only to show what is possible, the reason I built this was to have one template that could handle any layout. The interesting thing about the top banner though is that there are two background images on top of each other which creates a lot or flexibility when it comes to banner imagery that overlaps the extents of the 960 by x height banner area.

I have used one jQuery plugin to force equal height columns (1kb) and made use of the cdn for the jquery source. So this should be really quick as well as flexible.

Demo

Simple, accessible, standards based and validated Form

Dave — Fri, 08 Jan 2010 10:29:58 +0000

We all know that tables are evil and you run the risk of being seriously uncool if you are caught using them. But when it comes to forms they really make cross browser layouts that much easier, which is why there are so many forms that use tables. In the interest of good standards based design I have created a form based on fieldsets and definition lists.

There are actually a few points to mention:

Definition lists are used to layout name/value pairs,
jquery validation modified from this article,
a conditional stylesheet has been used to please that other browser,
the sliding doors technique has been used to style the submit button,
Eric Meyer’s css reset was used to initialise defaults across browsers,
Required fields denoted by a star just by adding a class to the dt tag.

This form has been tested in all the major browsers: ie6+, firefox and chrome.

The Demo