Category Archives: CSS

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...

CSS Triangles with a Faux Border/Shadow for Navigation Indicators

Apr
6

No Comments - LEAVE A COMMENT

So today I ran into a conundrum as I was working on the “active” state for a menu for my one of my client’s redesign of their corporate site.

In the design there is an active state of a little triangle indicating what section is active as a full width submenu slides down from beneath the main menu (that tutorial is the works).

So the triangle itself isn’t a problem. I easily created that using the :after psuedo-element.

The problem I ran into was the triangle itself has a border on the left and right sides and then extends across the page beneath the menu.

nav-triangle

CONTINUE READING...

100% Full Width Header and Footer With Centered Content: Revisited (again!)

Jan
15

59 Comments - LEAVE A COMMENT

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).

Edit 2/27/2012: I’ve updated the files to include a fix for links not being clickable in the header as well as an option to have the footer anchored to the bottom of the page! :D

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.

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...