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:
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.
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:
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:
margin: 0 auto;
Click here for a demo with source code
A simple site causing unwanted scrollbars
You have just designed a complex layout and have started implementing it on the web, but some layered elements that stick out over the right-hand side of the page creating horizontal scrollbars at the bottom of the page.
I have found in my experiences with WordPress installations that sometimes they work like a dream, yet at other times, or on other web hosts they seem to work fine until you try to upload an image to the Media library or try to update a plugin automatically without FTP. I decided to try to solve this issue once and for all.
It’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:
Magento doesn’t give the ability natively to clear/remove existing orders. You may find that after testing you have test records left over. The following SQL will delete all orders from your Magento installation, so you should do this before you go live with your site. It is recommended that you back-up your database before executing these rules.
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:
- Log into the Magento database
- Open the table sales_flat_quote_address
- Find the field same_as_billing and choose to modify it’s structure
- 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.