Wednesday, August 26, 2009

Center align your webpage!

I recently designed a site that was self-contained within 950px by 500px. Looked real good as a photoshop template. Converting it to html however, was a bitch. Turns out, there's native support for horizontal centering, but no code whatsover to align the entire site vertically central!

So I turned to google, the first and obvious answer to each and every question. I got a whole lot people complaining about this, and rightfully so, but no easy solution. There were a few real complicated workarounds using a mish-mash of css, javascript, and flash, but those were a headache to decipher and adapt. I was rather surprised at this roadblock, because I was sure I'd done it before.

And then, it hit me. Flash. Hah! You see, Macromedia (now Adobe) Flash has this option where you can export your file directly as an html page containing the swf. And you can center-align the file! Awesome! So all I had to do was replace that code with mine, and I had a real easy solution to the problem!

1) Make a document in flash, any size.
2) Go to Publish Settings, check the html option.
3) Head over to the new html tab. Keep the "flash alignment: vertical and horizontal" options to center & center.
4) Publish the file. You'll get an html page, where the swf is centrally aligned, and a .js file.
5) Open the html file in notepad or Dreamweaver, and simply replace the swf with your desired code. Voila, centre-aligned! Works with IE, Opera, and Firefox. You can safely delete the .js file and the javascript too!


Michael Reid said...

Great piece of advice - thanks!

bottleHeD said...

Thanks! This is such an easy method, I hope more people adopt it!

Post a Comment