Our form markup is very simple with an input box, label for the input box, and then a submit button.  The markup is something like this:

The CSS is also very simple.

As you can see we used some browser specific code to create the rounded corners on the submit button. It will be styled that way on WebKit browsers (Safari and Chrome) and Firefox.  In Internet Explorer browser it will have the traditional straight corners.

The last thing to do is to create the copyright test below the columns. To make it display right because of the nature of floated items, we will need to clear the floats.  This is done by a clearing element with some simple CSS which goes right after the unordered list in the code.

We have already done the CSS for this element in part 1 when we declared the clear class.

The text on the bottom is just a simple paragraph tag after the clearing div with some very simple styles applied to it.

View the demo of the mutli-column footer. Post any questions you might have in the comment section. 

Doing default actions in Photoshop like resizing the document to placing new smart object involve constantly going up to the menu system. That is, unless you are keen on memorizing literally hundreds of shortcut commands (oddly the place command has yet to get a shortcut).

Adobe has now fixed that problem by letting you create your own panels populated with anything you can do in Photoshop (almost). Welcome to the world of Adobe Configurator. 

I know what you are thinking, more panels. While that is true, these panels let you define your own content so they are much more useful. Adobe has created an Adobe Air application that lets you create, organize, and save any number of panels you want for Photoshop CS4 (requires CS4).

The result is a time saving pallet complete with functions just for your needs.

The program is currently in beta and can be downloaded for free on http://labs.adobe.com

Click on the image to see the full version.

We are going to have to do some CSS overwrites which I will explain in a minute. To do this we have assigned the unordered list the class of "posts".

Now to style the headers, lists and links.

We have not specified to take off the bullet points yet if you save and load this code they are curiously missing. This is because of the "cascading" part of cascading style sheets. If you look back at the code from the last post, we took off the bullet points off of the list elements that made up the columns. This has carried over to this list element because it is a child element of the column lists. 

We have applied a grey color for the list as well as links inside that list. By browser default the links will have a underline so we don't have to specify that.  A green color (#63bc46) will show on the links when the mouse moves over them.

On the second column we want not only bullet points but green bullet points. Even if we add bullet points how would we color them? After all there is no element for just the bullet points. The trick is that the bullet points are a part of the list item not the link. So what ever we make the list color, so the bullet point will be. So since the link is grey, we can make the list green and it will appear as though only the bullet point is green.

Also, to get it to apply we are going to have to do a CSS overwrite which basically means we are going to trump a cascading style with another style. This is done by a more specific selector in the CSS. We can use the class of "post" that we created in the HTML earlier as a more specific selector.

This does pose a problem though. What if in that column we wanted some text that wasn't a link. That text would show up green instead of the grey like we want. In that case we would have to surround that text in a span tag and style that. But since that isn't the case here, we don't need to take that step.

Next week we will go over the form and how to use some browser specific CSS in order to style this the way we need. As usual if you have any questions post them in the comment section.

The design of the footer we will be creating is a simple one that you should be able to modify to your needs. The code is minimal so if you'll need to add more functionality especially to the form to get it to work in your web server. The design is as follows (click on it to view it larger).

To get started we will need some base code to zero out any margins or padding that we have as well as to set a container for ease of use reasons.

The next code is some basic HTML to contain your footer and is making the assumption you already have the base tags for your site (html, head, body) and have linked to an external CSS file.

Getting started on the markup

To write semantic code, you need to take what you need to code and think about what kind of information it is. That usually tells you what HTML tag you need to use. In our case it is a list of information that the user needs to view. Going by logic, it tells us that we need to use a unordered list

Your markup will go in the footer div and should be something like this (you'll see why we use the classes in the next post).

To make them into columns, we need to use floats. Floats shift elements and wrap surrounding elements around it. In this case we are going to make the list items themselves wrap around each other, hence making it appear as a column. The addition of display:inline; is to so solve a bug in IE6 that causes a double margin.

Tomorrow we will go into the contents and styling them. If you have any questions so far, post them in the comments section and I will answer them.

Richard Rutter said:

For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.

One of the main confusions is the difference between hyphenations and dashes. 

Hyphenations

Hyphenations are used to join compound words together. That is all. 

En & Em Dashes

En and em dashes have their own purpose and should only be used for that purpose.

En dashes (–) should be used to indicate a range of numbers (10–20). Em dashes (—) should be used to indicate a sudden break of thought ("We are going to—what time is it?").

Due to lack of support, CSS3 animations will only work in WebKit browsers (Safari and Chrome).

Fade

Place mouse on me I will fade!

Pulsate

Place mouse on me I will pulsate!

Nudge

Place mouse on me, my text will shift!

expand Block

Place mouse on me, my border will expand!

Spin

Place mouse on me I will spin!

How do you know if your card is working? Look at your card. If you don't keep looking at it for more than 3 seconds, chances are your clients are not either.

There are multiple ways to get your business card to stand out, even on a small budget. You could have a different size, special paper or coating, or a die cut (special cut in your card). Make sure you stand out above the rest with a business card refresh.

I have been selected as a judge for the Creative Fusion Pro Awards. I am proud to have been considered and look forward to seeing and judging everyone's designs. I was also interviewed as part of the process. Read it here.

Having worked with places and clients such as Overstock.com, NBC and LG, Chris is a true wonder in the industry. His design work is fantastic and he is always striving to master the art of code. He's always striving to help others learn how to do things and do them right. Because of that, we're happy he accepted our plea to be a judge for our contests.

A more effect way to do things is to create a new window, or a new view. This way you can have two copies open of the same document at the same time. What you do in one window will effect the other. To do this, go to Window > Arrange > New Window.

Once you do this, you can size your window any way you need and adjust the zoom. This also works if you need to watch several pages at one time. You can open as many windows as you need. This technique also works in Photoshop and Illustrator but with the added task of tiling the windows.

When doing leading a good rule of thumb is to make the line-height (what controls your leading in CSS) 6-7px bigger than your font-size.

Incorrect:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Correct:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

So far I have a pre-alpha version that is pretty basic. I am looking to add more options to make it something that people will actually use. I can't give a release date on the application nor can I give a date for a possible beta. I will keep everyone up on the status as I make progress on it.

I also plan on making a OSX widget for the same purpose but development hasn't started on that yet and wont until the Air app gets released.

I will however need people to beta test it. If you are interested please send me a message.

Many people I find are confused about the difference between metric and optical kerning. Most just seem to think that optical kerning automatically kerns everything perfectly for you and solves the problem of gently massaging text to look good. This is only part correct, and it could be dangerous to always use optical kerning on projects.

First we need to learn what kerning is.  In typography, kerning is the space between letters, or the control of space between letters. Sometimes two letters need to have the space reduced in order to visually look good and make sense to the eye. When this is automatically done for you to certain letters in a font, it is called kerning pairs. Most high quality font have them included.

Metric kerning uses the kerning settings set up by the author of the font. This can be good or bad depending on the quality of the font. If it is a good font then you can take advantage of kerning pairs and such. If it is a bad font, you're likely to get some really weird spacing issues.

Optical kerning just puts an equal space through out all that you select regardless of what kerning pairs are set up. If you have a really good font with very nice kerning pairs, it will always disregard them. On the other had, if you have a bad font it can fix a lot of these issues up front.

So what ever you choose you will likely need to do some manual adjusting.

A common technique is called CSS Normalization. While the name sounds fancy and somewhat confusing, doing it however couldn't be simpler.

The wild-card * denotes that it will effect every element on the page thus giving you complete control over the margin and padding settings for your page.

Another tip, putting in a text color or font type works the same way. So if you wanted all your text to be colored grey, just add it to the code as such:

We have added some new services such as a Twitter feed and a Facebook page. Please subscribe and become a fan. We will also be doing some Youtube video tutorials on how to design and program. The links to all of those are in our footer. Just look for the icon. As usual please subscribe to our blog's RSS feed to keep up to date with all our activities.

Once again, welcome to our site relaunch. Enjoy.