CSS Tip: Extend your site’s footer to the bottom of the page

The problem with creating a footer with an image background on a web page is that when the page is shallow or the visitor is using a high resolution monitor the footer image does not extend to the bottom of the page.

This happens because there’s no way in CSS to know the space between the top of the footer and the bottom of the window, otherwise we’d be able to scale the footer area’s height to compensate.

Instead we can apply the fix with this code:

html, body{
    height: 100%
}
.site-container{
    overflow: hidden;
    min-height: 100%;
    min-width: 960px;
}
.footer{
    padding-bottom: 32000px;
    margin-bottom: -32000px;
}

We are adding a large padding to the bottom of the footer to extend the background, then we bring up the bottom margin by using a negative value so the DIV’s space effectively ends where it did before the padding relative to the DOM elements around it.

The site-container has an overflow to hide the overflowing footer padding and stop the vertical scrollbars. However to stop the container cropping too far up the page we set it’s min-height to be 100% so the earliest the footer will be cropped is the bottom of the window unless the content is larger than the window size.

In CSS you can’t normally use 100% for a min-height (or height) so to fix this you need to add a 100% height to the html and body element. This quirky code will fix that for you.

It’s worth noting that I’ve also added a min-width to the site-container, this should be your site’s width. It will ensure that we still get horizontal scrollbars when we scale down the browser while we have the ‘overflow: hidden’ set.

CSS Tip: How to match column heights in CSS

You’ve created a website design which looks great, until your content causes  one column to extend longer than the other, causing the second column’s background to come short.

Of course you can fix these issues by having all your backgrounds in one graphic that sits behind your site, but you have issues with scalability and large graphic images. A better solution is possible; with a bit of understanding you’ll have this down in no time:

.LeftColumn,
.RightColumn{
    float: left;
    width: 200px;
    padding-bottom: 30000px;
    margin-bottom: -30000px;
}
.RightColumn{
    width: 400px;
} 

Make sure your 2 columns are floated next to each other in a container. As you see in the above code, I’ve added 30,000px extra padding to the bottom of both columns to extend them for as much as we’ll need down the page. The negative margins will stop their Container from being pushed down in height.

The columns’ backgrounds will still show below the Container so the overflow hidden style on the container will fix this. As long as the Container does not have a fixed height set, it will not clip your content:

.Container{
width: 600px;
margin: 0 auto;
overflow: hidden;
}

Click here for a demo with source code

Adobe releases new Web Design software for Designers – Adobe Muse & Adobe Edge

adobe-muse-iconIt’s surprising it hasn’t been done before, or at least by a leading company like Adobe; develop a set of programs for designing for the web that doesn’t require the ability or knowledge to write code.

It may be in the future that developing for the web becomes practically obsolete. It makes sense that you should be able to design for the web without code. It’s not often that you find people that can master both design and development.

Why should designers need to learn HTML or CSS? Designers lay out visually for print design in software such as Adobe InDesign, yet it comes to lay out a web design you are confronted with code. Even software such as Adobe Dreamweaver really doesn’t lend itself to designers and you find that your result does not work correctly on all platforms; you are required to learn to code to fix browser consistencies.

Here is the lowdown on Adobe’s new products:

Continue reading

Make ‘Ship to This Address’ default option in Magento

When checking out on a Magento shop you will find that on the Billing screen ‘Ship to different address’ is selected as the default option. It is more likely you will want ‘Ship to this address’ to be the default option.This is how you do it.

When making a checkout Magento checks a database field to see if it should ship to the same address, this database field’s default value is set to no. To change it do the following:

  1. Log into the Magento database
  2. Open the table sales_flat_quote_address
  3. Find the field same_as_billing and choose to modify it’s structure
  4. Change the default value for same_as_billing default from 0 to 1

The SQL code for the above is:
ALTER TABLE `sales_flat_quote_address` CHANGE `same_as_billing` `same_as_billing` TINYINT(1) UNSIGNED NOT NULL DEFAULT '1'
Now any new customers or guests will have ‘Ship to this address’ as the default option. To update any existing users simply set the same_as_billing field to 1 on all the records in this table.