Tag 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 do you code?

Feb
23

13 Comments - LEAVE A COMMENT

When you work on a new web design project and have entered the stage for coding, how do you go about it?

Do you start with the HTML and write the whole HTML page first, then code your CSS then troubleshoot?
Do you write all of your CSS first, then the HTML markup, then troubleshoot?
Or, do you write chunks of HTML first, add in the styles, troubleshoot/test, repeat?

Personally, I have done it just about all three ways – but my most often used method is the 3rd. I start from the top and work down to the bottom from left to right. I will start and code the entire header of a site in HTML first – then write my styles. Check in firefox, and repeat. Then, after the whole page is completed I check in all browsers to trouble shoot compatability issues – which are usually minimal and related to IE6 only – go figure!

So, how about you?

How do you code?

View Results

Loading ... Loading ...

CONTINUE READING...

VOTE: I Want Your Opinions

Aug
21

10 Comments - LEAVE A COMMENT

In the beginning of 2006 I launched CSSgirl. I moved all the content from my old site (triplelproductions.com) and started CSSgirl Designs with a brand new design. Over time I’ve changed the design a bit, adding and removing sections, images and content.

Since last summer I’ve been planning a redesign, but I just can’t settle on one that I am happy with. So, I would like to have some feedback from the people who visit my site- who see it regularly!

I have four designs that I’ve created that I am deciding between. View them and let me know your opinions – good or bad! Two have already been coded, two are just image mockups:

Vote for your favorite:

(PS: If you vote for “something else entirely”, let me know WHY. otherwise I’m going to remove that choice because I won’t know which direction people are looking for! Your comments won’t hurt my feelings, I promise!)

What Design Should I Run With?

  • Dark Rainbow (27%, 20 Votes)
  • Whiteboard (26%, 19 Votes)
  • Watermelon (20%, 15 Votes)
  • Super Serious Dark (8%, 6 Votes)
  • Leave it! (7%, 5 Votes)
  • Use the current design, just make it better. (7%, 5 Votes)
  • Something else ENTIRELY! (5%, 4 Votes)

Total Voters: 74

Loading ... Loading ...

Voting ends September 1st, 2008.

The three designs I do not choose will be converted into free WordPress themes (and Movable Type too, if I find the time!) :)

Please leave comments with suggestions, criticisms, etc!

CONTINUE READING...