Dan Price’s blog
Weblog of a cyber-geek

This problem caused me a lot of pain and some headaches - how could I create a footer on a page that spanned the whole page from one side of the browser to the other? Most modern sites have 100% width footers with different backgrounds to the main body. Of course, with different page sizes, you can’t specify the background to the body tag as you would with the normal site background. Furthermore, if you place the footer inside the container/wrapper div, then it won’t span across 100% of browser

The solution is actually very simple.

Rather than having a single div for the footer, create 2 divs for the footer - one as div that will span the full 100% of the screen, the other similar to the container/wrapper of your main content that adjusts the same as your existing container and is centred. To the outer div (that spans all of the screen), apply the following CSS:

left: 0; // Zeros the div so that it goes from one side of the browser to the other
background: *Insert colour of choice*;

To the other div that you want to move at the same rate as your existing container/wrapper, simply add it as another selector along with the existing container - example:

Existing CSS:
#container {margin: 0 auto;
width: 800px;
overflow: auto;}
New CSS:
#container, footercontainer {margin: 0 auto;
width: 800px;
overflow: auto;}

I hope this helps anyone who had a similar problem to me - I told you the answer was simple in the end (even if I didn’t explain it that well!)

I’ve been searching around for a long time to find a solution to IE6’s stupid lack of support for transparent PNGs. I read numerous tutorials to find hacks for IE6, with methods including Javascript, HTC files and the official Microsoft hack. However, I repeatedly disappointingly found I could get none of these working (I’m aware some people did get them to work, but I couldn’t).

Then thanks to a genius on the Webmaster-Talk forums, Adam Senour, I found a fantastic way to get these working on my site. The solution is actually very simply, is purely CSS based and doesn’t involve making any new images! Here we go:

1) Rather than using the img tag in your HTML file, make an empty div tag and give it an ID. For this tutorial, I’ll call it “logo”. (more…)

Many web sites become unstuck with www and non-www redirecting - in some cases, they have even failed to set up the non-www version at all, but don’t have a redirect, leaving the visitor unsure whether the web site actually exists. In this short tutorial, I’ll tell you how to redirect the non-www address to the www address, and vice versa.

The non-www address is becoming increasingly used by web sites, as more and more advertise their site without the www. infront. For SEO purposes, it is best to choose to use either one or the other to get links to, rather than spreading the links over the 2, since some search engines, including Google, see the non-www site and the www site as 2 different web sites. (more…)

XHTML is a web programming language defined by the W3C (World Wide Web Consortium), as an eventual successor to the HTML programming language. The W3C now recommends that you code in XHTML rather than HTML, as that’s the way most sites are now going, with the ability to combine XML and HTML into a more useful programming language.

However, if you haven’t learnt XHTML yet, don’t despair! The differences between the two languages are fairly small and you can quickly pick up XHTML if you already know HTML. In this post, I’m simply going to guide you through writing a short, but valid, XHTML document. So let’s begin! (more…)