Category Archives: HTML/XHTML

New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Versions)

Feb
1

8 Comments - LEAVE A COMMENT

[Feb 1st, 2015] I’ve finally updated my code examples for the very popular series I’ve shared with how to center content within a section that has a “full width” (or “full bleed”) background (100% Full Width Header & Footer with Centered Content series: v1 v2 v3 – disregard all of those now!).

full-width-ex

This also includes an update for the full width examples of the header & footer that stay anchored to the top/bottom of the window (First edition here: How to: Anchor the Footer to Bottom of Page (or Header to Top)!).

full-width-fixed-exBoth of these versions are now responsive, the HTML and CSS both updated.

You can view the new examples on github and download it to use in any way you’d like!

CONTINUE READING...

Fixie.js – Automatically add filler content to your templates and themes!

May
18

2 Comments - LEAVE A COMMENT

Meandering about the internets this morning I happened upon something so awesome it actually made me come out of hiatus to share with everyone.

As a developer, loads of my time when building out a website is spent throwing in filler content until I or the client actually adds the sites final copy. Copying and pasting from Lipsum.com or another generator over and over and over and over again. Time consuming, right?

CONTINUE READING...

How to: Create Full (100%) Width Header/Footer with Centered Content (Updated)

May
28

59 Comments - LEAVE A COMMENT

Update #3 2/1/2015 – Final update! I have made the final version completely simpler and completely responsive! Disregard this version and all others. The only version you should read and download is the New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Versions).

Update 1/15/2012Please 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”.

CONTINUE READING...

How to Use CSS Sprites With Son of Suckerfish Drop Downs

Jun
22

36 Comments - LEAVE A COMMENT

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.

CONTINUE READING...

Create Full Width Header & Footer With Centered Content Using CSS

Jun
7

30 Comments - LEAVE A COMMENT

Update #3 2/1/2015 – Final update! I have made the final version completely simpler and completely responsive! Disregard this version and all others. The only version you should read and download is the New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Versions).

Update #2 1/15/2012I have updated 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:

CONTINUE READING...