melonique rules!

Like a proud parent I am of little Melonique! She comes in first on Kuler's "Most Popular" list doday!

orderedlist.com

I'm always on the hunt for beautiful designs, and this site by the folks at orderedlist.com is definitely one! Love the grid work and even though I'm not a huge fan of dark backgrounds, somehow on here it works like a charm!

Inspired! :)

I Love Kuler

Created some new color palettes on Kuler yesterday. Summer in Paris (above) and Melonique (below).

If you ever need a pick-me-up, come play on Kuler! It's quite therapeutic for me. :)

Median Web Designer Salaries

In this difficult economy, ever wonder what the going rates for a web designer are in our country? Here is a list of average current web designer salaries in U.S. metropolitan areas, originally published on About.com:

Location				Salary	Find a Job
Alabama - Mobile				$59,905	Alabama
Alaska - Anchorage				$75,687	Alaska
Alaska - Fairbanks				$76,744	Alaska
Arizona - Phoenix				$64,500	Arizona
Arkansas - Little Rock				$59,565	Arkansas
California - Los Angeles				$73,043	California
California - San Diego				$69,434	California
California - San Jose				$79,982	California
California - San Francisco				$79,551	California
California - Ventura				$72,228	California
Colorado - Boulder				$59,913	Colorado
Colorado - Denver				$68,585	Colorado
Connecticut - Hartford				$71,869	Connecticut
Delaware - Wilmington				$69,682	Delaware
District of Columbia - Washington D.C.				$71,053	Washington D. C.
Florida - Jacksonville				$62,776	Florida
Florida - Miami				$64,239	Florida
Florida - Tampa				$62,320	Florida
Georgia - Atlanta				$65,518	Georgia
Georgia - Savannah				$61,066	Georgia
Hawaii - Honolulu				$71,653	Hawaii
Idaho - Boise				$62,006	Idaho
Illinois - Chicago				$70,674	Illinois
Indiana - Indianapolis				$64,487	Indiana
Iowa - Des Moines				$63,070	Iowa
Kansas - Kansas City				$64,917	Kansas
Kentucky - Louisville				$63,188	Kentucky
Louisana - New Orleans				$66,902	Louisiana
Maine - Bangor				$60,022	Maine
Maine - Portland				$63,997	Maine
Maryland - Baltimore				$68,070	Maryland
Massachusetts - Boston				$73,794	Massachusetts
Michigan - Ann Arbor				$70,544	Michigan
Michigan - Detroit				$71,431	Michigan
Minnesota - Minneapolis-St. Paul				$69,937	Minnesota
Mississippi - Jackson				$59,174	Mississippi
Missouri - St. Louis				$65,857	Missouri
Montana - Billings				$58,912	Montana
Montana - Helena				$59,082	Montana
Nebraska - Lincoln				$59,722	Nebraska
Nebraska - Omaha				$62,417	Nebraska
Nevada - Las Vegas				$67,809	Nevada
Nevada - Reno				$68,403	Nevada
New Hampshire - Manchester				$67,136	New Hampshire
New Jersey - Newark				$75,491	New Jersey
New Mexico - Albuquerque				$61,967	New Mexico
New York - Buffalo				$64,885	New York
New York - New York				$77,475	New York
New York - Syracuse				$65,544	New York
North Carolina - Charlotte				$65,146	North Carolina
North Carolina - Greensboro				$55,489	North Carolina
North Carolina - Wilmington				$60,988	North Carolina
North Dakota - Bismarck				$59,147	North Dakota
Ohio - Cinncinnati				$64,839	Ohio
Ohio - Cleveland				$66,562	Ohio
Ohio - Columbus				$65,107	Ohio
Oklahoma - Tulsa				$61,830	Oklahoma
Oregon - Eugene				$65,844	Oregon
Oregon - Portland				$64,617	Oregon
Pennsylvania - Philadelphia				$79,717	Pennsylvania
Puerto Rico - San Juan				$48,965
Rhode Isand - Providence				$67,097	Rhode Island
South Carolina - Charleston				$60,949	South Carolina
South Carolina - Greenville				$61,184	South Carolina
South Dakota - Sioux Falls				$59,526	South Dakota
Tennessee - Nashville				$62,502	Tennessee
Texas - Austin				$63,684	Texas
Texas - Dallas				$65,988	Texas
Texas - Houston				$66,986	Texas
Utah - Salt Lake City				$62,750	Utah
Vermont - Burlington				$57,052	Vermont
Virginia - Richmond				$64,637	Virginia
Washington - Seattle				$72,371	Washington
Washington - Spokane				$65,936	Washington
West Virginia - Charleston				$60,061	West Virginia
Wisconsin - Greenbay				$64,154	Wisconsin
Wisconsin - Milwaukee				$67,757	Wisconsin
Wyoming - Cheyenne				$57,920	Wyoming

Freelance Humor on Earth Day

Happy Earth Day!

And to celebrate our wonderful Earth, here's a little freelance humor by N. C. Winters as originally published on Freelance Switch. I love his work so much and have to start featuring them here on Clean Simple Designs. Will try to showcase at least one of his comics each week for all of us webbies to enjoy.

Today's features are Mr. Winters' very first Freelance Freedom #001 (above in blue) and most current Freelance Freedom #101 (top in orange) comic strips. And if you want to get to know the artist a little better, there's a wonderful Q&A session posted with his Freelance Freedom #100 comic strip.

Enjoy!

Great Resources for Freelancers

Freelancers, you may find this article Being Content Rich from Freelancer Switch helpful and interesting.

Also, Freelance Switch is a huge resource database for us freelancers. A definite bookmark recommendation from me!

forabeautifulweb.com

I usually love clean sites on a white(ish) background but do love this chocolate background "For a Beautiful Web" site so much. To top it all of, it's also a wonderful resource for us webbies!

Simple CSS Rollover Lists Tutorials

Piper Nilsson sent me this link when I asked her how to make navigation bars: http://css.maxdesign.com.au/listutorial/roll_master.htm.

Introduction to Rollovers

The next series of steps are only one of many methods that can be used to create rollover effects using CSS. At the core of this method there are two basic ingredients - making the lists block level and using the hover state.

The list model used here works in all standards compliant browsers, with the following exceptions. Win/IE5 will render the list narrower due to it's misinterpretation of the box model. Win/IE6 and Mac/IE5 will render the list to the correct width if standards compliance mode is used.

    * Milk

    * Eggs

    * Cheese

    * Vegetables

    * Fruit

CSS CODE

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a

{

display: block;

color: #FFF;

background-color: #036;

width: 9em;

padding: .2em .8em;

text-decoration: none;

}

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

}

HTML CODE

    * Milk

    * Eggs

    * Cheese

    * Vegetables

    * Fruit

Step 1 - Make a basic list

Start with a basic unordered list. The list items are all active (wrapped in ) which is essential for this list to work. Some CSS rules are written exclusively for the "a" element within the list items. For this example a "#" is used as a dummy link.

Step 2 - Remove the bullets

To remove the HTML list bullets, set the "list-style-type" to "none".

#navcontainer ul { list-style-type: none; }

Step 3 - Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.

To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".

margin: 0;

padding: 0;

Step 4 - Display block

To achieve a rollover, the list items have to be converted to blocks using "display: block".

#navcontainer a { display: block; }

Step 5 - Add a background color

To add a background color, you set it within the "a" state. A color is also added to make the text readable.

color: #FFF;

background-color: #036;

Step 6 - Set the list width

Set the list width within a rule targeting the "a" element so the entire block will be active.

width: 9em;

Step 7 - Add padding

Add padding to the list items within the "a" state.

padding: .2em .8em;

Step 8 - Text decoration

At this point you may wish to remove the text underline. It is a common practise for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behaviour (such as underlines) can be confusing for some users, who may not realise that the item is a link.

text-decoration: none;

Step 9 - Add a rollover color

Use "a:hover" to set a second background color, as a rollover state. If you roll over the list now you will see that the rollover works.

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

}

Step 10 - Separate the list items

The list items can be separated with a margin on the "LI" element. In this case margin of "0.2em" was applied to the bottom of the "LI".

#navcontainer li { margin: 0 0 .2em 0; }

Finished!

There are many variations that can be applied to this list method. You can play with colors, widths padding and background images to create a wide range of list styles.

Variation - current page indication

There are times when you may want to show the user what page they are on. There are many ways to achive this. One simple method is:

   1. add id="active" to the "LI" element associated with the current page

   2. duplicate the main rollover list rule set - "#navcontainer a"

   3. replace "#navcontainer" with "#active"

   4. change the background color

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a

{

display: block;

color: #FFF;

background-color: #036;

width: 9em;

padding: .2em .8em;

text-decoration: none;

}

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

}

#active a

{

display: block;

color: #FFF;

background-color: #600;

width: 9em;

padding: .2em .8em;

text-decoration: none;

}

Variation - Adding borders

There are endless possibilities that can be achieved with padding and borders. One simple option is to set different border colors to each side of the list, and then reverse the colors for the active state. This gives the classic "raised and pressed" button look.

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a

{

display: block;

color: #036;

background-color: transparent;

width: 9em;

padding: .2em .8em;

text-decoration: none;

border-top: 1px solid #fff;

border-left: 1px solid #fff;

border-right: 1px solid #036;

border-bottom: 1px solid #036;

}

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

border-top: 1px solid #036;

border-left: 1px solid #036;

border-right: 1px solid #fff;

border-bottom: 1px solid #fff;

}