I, for one, don’t like to see a perfectly valid CSS layout mingled with some tables just for this purpose. So, if you want to know how you can achieve vertical-align functionality the right way, read on.

Step 1 — One line vertical-align:middle

This one is quite easy. Let’s say you set up a nice graphical container for your text but when you add the text, it just sticks to the top of your container — not a very nice visual effect. To center it vertically, simply specify the line-height for your text the same height as that of ...

Assigning Names

Designing Like a Writer

TAGS

I don’t think it’s any secret that I enjoy writing. That’s part of the reason that I love running and working on this blog so much (and why I write for other design blogs, too). It gives me a chance to do something that I really enjoy. Moreover, it also provides me the opportunity to combine my love of writing with my passion for design. It’s probably also part of the reason that some of the articles here get a little long sometimes!

Regular readers will also know that ...

It’s time to get our hands dirty with some markup!

We know we have a couple different pages to deal with here. The main page of course, which acts as both our list page and sales page depending on login status. But then we have sign in and sign up pages and account pages. So let’s be smart and work modularity. That means we’ll make files like “header.php” and “close.php” that we can include on multiple pages so we don’t have to repeat common code (e.g. the DOCTYPE, analytics code, and ubiquitous things ...

When it comes to setting the size of type in CSS, you have lots of options. You can apply a “keyword”, like p { font-size: small; } or a numerical value. When using a value, you need to declare a unit of measure which itself has four options. Which is best? It depends of course. Let’s take a look:

Keyword

Valid options for setting font-size in keyword are xx-small, x-small, small, medium, large, x-large, and xx-large as well as relative keywords smaller and larger.

Surprisingly enough, keyword sizing is pretty consistent across browsers and platforms. See below a test page in ...

Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don’t set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes ...

What is “Float”?

Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called “text wrap”. Here is an example of that.

In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. Ignoring the text wrap will allow the words to flow right over the image like it wasn’t even there. This is the difference ...

About the Slider

A little while back I did a tutorial on a Featured Content Slider. It was neat, but a little limited in customization possibility. The two most requested features were being able to add/remove “panels” and a stop/start button.

I’m happy to say I was able to accommodate a bit with this new slider. It’s not a plugin, so it’s not as easy as it possibly could be, but it’s much easier. There is a section at the end for customizing. The slider does feature a stop/start button and the animation ...