This is a project I’ve been working on over a few years. I introduced my first solution back in 2008. It worked, but had some limitations. After recieving feedback and comments I once again offered another solution in May 2011 that worked great… at first. After testing myself, and reading more feedback and comments I’ve come across another limitation. When you downsize your browser window enough to require a horizontal scroll a curious thing happened. Scroll over to the right edge of the screen the header and footer no longer stretched 100% across the screen.
CSSgirl Dev & Design -
Master of CSS and Dirty Diapers
Category Archives: CSS
Jan
How to: Create Full (100%) Width Header/Footer with Centered Content (Updated)
May
28
Update 1/15/2012 – Please see the latest release of 100% Full Width Header/Footer with Centered Content.
I originally wrote a tutorial on how to “Create Full Width Header & Footer With Centered Content Using CSS” almost three years ago (yipe!) when I was working on one of the many redesigns of my site. Looking back on it now (since it’s one of my most popular articles), I see it’s slightly different as to how I have been doing it recently. Both methods work, both can be used, but I find my current method a little bit “cleaner”.
IE6 PNG Fixes – SuperSleight & Unit PNG Fix
Aug
9
A few weeks ago a new javascript, Unit PNG Fix, was released by Unit Interactive for an IE6 and below PNG support fix. Up until now I have been using SuperSleight with no issues. So I decided to do a little research this morning to find out what made Unit’s Interactive PNG fix better than good old SuperSleight.
How to Use CSS Sprites With Son of Suckerfish Drop Downs
Jun
22
So recently I was working on a project that required image based navigation AND drop down menus. From the get-go I decided to use CSS Sprites for the tabbed menu for the normal, active and hover styles. I also decided the best way to implement the drop down was to use the “Son of Suckerfish” drop down menus heavily modified from the original code to fit in with the original programming I had done for the menu.
I’ve explained before how to use CSS Sprites for changing images, so I won’t go into too many more details on how to accomplish this, but to recreate this for your own site you will need to create one sprite for your normal tab, hovered and current/active tab. That’s three sets of tabs in one file.
Create Full Width Header & Footer With Centered Content Using CSS
Jun
7
Update #2 1/15/2012 – I have update this version once again, please see the latest release of 100% Full Width Header & Footer with Centered Content.
Update!: I’ve published a new version of this method that is even EASIER. If you would like to learn more please see How to: Create Full (100%) Width Header/Footer with Centered Content (Updated). This method is still valid and feel free to use it if you like.
There are probably a million different ways to do this, but I’m going to show the way that I have preferred to do it, combined with my favorite centering position method.
So the simple way to do this is as follows: