Orange Burst Splash Page

A few posts back I did that testing on browser sizes, so I thought it was time to create a new splash page. I took the sizes into account and created this:

I've linked to the page so you can see how it was done. Essentially it's a 600x300 sized ad that is centered with a background that draws your eyes to the center. Remember we said just about everyone had their browser at 625x250? Well that means the headline and main content are shown in pretty much all surfer's browsers.

The hardest part was figuring out how to get the DIV to be centered perfectly. Well, it was actually easy with some cool CSS magic. It's pretty simple:

1. Create a div, give it an id (mine was "main")
2. Set the div to a specific width and height (mine is 600x300)
3. Set the position to absolute (position: absolute;)
4. Set the top and left positioning to 50% (top: 50%; left: 50%;)
5. Set the margin-top to negative half of the height (300 / 2 = 150 so margin-top: -150px;)
6. Set the margin-left to negative half of the width (600 / 2 = 300 so margin-left: -300px;)

That's all there is to it. Essentially you are telling the browser to put it in the center (50%/50%) but that's where the top left corner is, so you then have to tell it to backtrack half of it. And bamo, centered.

So far the results have been on par with my other splash pages. Not any better or worse, but the look of it is pretty cool so I'm keeping it. Try a centered splash page yourself and see if it results in better results. By using the above trick you'll know it's centered in ALL browsers and resolutions. Pretty sweet ;-)