Stick a Footer to the Bottom – HTML5

Below is some updated/streamlined code of my earlier post on how to stick a footer to the bottom of a page whose content is not sufficient to push below the fold. Its using some HTML5 features like the ‘footer’ & ‘header’ tags & lightweight doctype. I’ve embedded the CSS but you can link to an external file. It also has a script to create the HTML5 elements in older Microsoft browsers. Its been tested on modern browsers & seems to work fine….hope it helps.

<!DOCTYPE HTML>
<html>
<head>
<!--[if lte IE 8 ]>
<script>  
    document.createElement("footer");  
    document.createElement("header");    
</script>
<![endif]-->
<style>
    body, html{ height:100%; margin:0; }
    .wrapper{ min-height:100%; }
    header{ height:100px; background:#CCC; overflow:auto; display:block; }
    .content{ padding-bottom: 100px; }
    footer{ height: 100px; width:100%; background:#CCC; margin-top:-100px; display:block; }
</style>
</head>

<body>

    <div class="wrapper">

         <header>This is my header!</header>
         <div class="content">This is my content!</div>

    </div><!--end wrapper-->

    <footer>This is my footer!</footer>

</body>
</html>

Essential Modx Revo Plugins, Addons or Packages

Modx Revolution is a powerful & flexible CMS more than capable of handling most small to medium sized sites. However, out of the box it is little more than a framework. The advantage of this is that its a blank canvas where you build web apps from the ground up instead of modifying a CMS to fit your needs like WordPress.

When its first fired up it can be a bit confusing so in order to get started you’ll need to install a few plugins & 3rd party components. This can be done very quickly using the Package Management feature so you dont have to trawl the web for the right one for whatever you are trying to achieve.

Below is a list of components that I install on every job no matter what size:

  1. Wayfinder: Outputs lists of resources from the resource tree…in short, it makes menus
  2. tinyMCE: A well known Javascript WYSIWYG Editor
  3. getResources: Powerful way to list & display content
  4. Codemirror: This javascript library colour codes & indents your HTML & PHP similar to your desktop application for easier reading
  5. Formit: Outputs forms with lots of features like anti-spam & captcha
  6. Googlesitemap: Creates XML sitemaps on the fly to the sitemaps.org protocol
You can find out more info on all these add-ons along with many more popular ones in the online Modx manual.

 

Web Design – dixonshummer.ie

Website design for Dixons Hummer Hire

Website design for Dixons Hummer Hire

New web design for Dixons Hummer Hire in Dundalk. Fairly simple website promoting their stretch H2 Hummer. Nothing fancy just pure CSS & XHTML design with some asp includes. My accessibility tester likes it & hopefully a little SEO will impress Google enough to avoid Adwords early on…..Anyway, we might just take it out for a spin to celebrate the websites launch :)

CSS Image Rollovers without Javascript

What we want to create.

Web Designers use a few different ways to create rollover images, usually for buttons. The most popular techniques use javascript to preload the hover image or ‘over state’ however pure CSS is a better more efficient technique. Alot of people however only get it half right. 

a{
background:(my-image.jpg);
}
 

a:hover{
background:(my-image2.jpg);
}

The problem here is that when the image is rolled over the second image still needs to be downloaded from the server. The user will usually experience an unsightly delay between the rollover action and the appearance of the replacement image. Visit hosting.digiweb.ie for an example.

Why people use javascript is to preload the second image in the browser so when its called it instantly appears. CSS alone cant preload a second image from the server but there is a clever work around.

 

 

 

 

 

Above we have our 2 images. The left one is the link with the right one being the the rollover. We need these two images loaded with the page but using CSS alone this is not possible. Each image is 240px by 160px.

To get around this we create an image 240px wide by 320px high. Twice the size of the original and place toe 2 images, one on top of the other inside it creating the image below.

null

So now for the HTML. Its fairly simple, just a basic link.

<a href="portrait.html" title="portrait">protrait</a>

CSS Bit.
First we need to define the links style. We’ll set the width & height to 240 x 160 and the background as image1.jpg

a{
background:url(my-image.jpg);
width:240px;
height:160px;
}

This leaves us with a text link with a small piece of the imahe as the background. The width & height atributes are not being used. To activate these we need to add display:block

a{
background:url(my-image.jpg);
width:240px;
height:160px;
display:block
}

Next we need to remove or hide the ‘Portraits’ text. To do this we add line-height:999px

This moves the text 999px down the screen. The problem now is that the text is displayed way down the screen. to hide this we need to add another piece of code: overflow:hidden. This hides everything thats outside the 240px by 160px box.

a#portraits{
background:url(my-image.jpg);
width:240px;
height:160px;
display:block;
line-height:999px;
overflow:hidden;
}

Next we need to specify the rollover. What we do is position the background image 160px higher when the mouse is over the link. We can do this with one line of code.

a:hover{
background:url(my-image.jpg) bottom
}

And there you go. View the finished link here.

Here’s the code:
CSS
a{
background:url(my-image.jpg);
width:240px;
height:160px;
display:block;
line-height:999px;
overflow:hidden;
}

 

a:hover{
background:url(my-image.jpg) bottom;
}

HTML
<a id="portraits" title="portraits" href="#">Portraits</a>;

View the finished link here.