Archive | May, 2008

CSS Typography

17 May

Web Design 101: Positioning

Got something to say?

Share your comments on this topic with other web professionals

In: Columns > Web Design 101

By Tommy Olsson

Published on April 16, 2007

Any cascading style sheets (CSS) newbie will have heard about it, right? CSS positioning—absolute this and relative that. Perhaps you have some vague idea about what it is, but are afraid to try it yourself.

An element with position:absolute is removed from the document flow, which means the rest of the document acts as if the element weren’t there. It won’t affect subsequent elements. Instead, it could end up layered over other elements, unless we make sure it doesn’t.

Let’s shed some light on the shadowy mysteries of CSS positioning. If your CSS skills are limited or even moderate, you will learn what you need to master positioning—it’s not difficult, once you understand the fundamental ideas behind the concept.

And a one, two, three, four…

There is essentially one markup language usable for web documents: HTML. (Some people will use an XHTML document type declaration, but they will still have to serve it as HTML or it won’t work for the majority that use Microsoft Internet Explorer.)

There are two ways to specify the visual layout of an HTML document: tables or CSS. Layout tables are old-school, deprecated and bad for accessibility, so they’re out.

There are three ways to specify the visual layout of an HTML document using CSS: fake tables, floats, and positioning. Fake tables (using display:table-cell, etc.) only work in the most modern browsers. Floats will be covered in a future article, so that leaves us with positioning.

There are four types of positioning in CSS 2.1: static, relative, absolute, and fixed. How are they different? You will find the answers below. Which one is best? That one depends entirely on you.

What’s in a name?

The names used by the World Wide Web Consortium (W3C) for the positioning schemes can be very confusing, unless you understand their point of view.

Most of us probably regard this matter from a layout point of view, from which the names seem quite odd. A static element isn’t static at all, it moves around as we scroll the page. A relatively positioned element is only relative to itself. An absolutely positioned element is not absolute, but relative to some other element. And a fixed element is both absolute and static.

So the W3C only scores a batting average of .250? No, they just look at the whole thing from a different perspective: the document. If we do that, too, it all makes sense. (Well, at least it is somewhat less confusing.) A static element is static within the document flow. A relatively positioned element is indeed relative to itself. An absolutely positioned element is absolute—with respect to another box—and removed from the flow. And a fixed element is indeed fixed with respect to the flow.

Setting the position property

So how do we affect this mysterious positioning then? The answer is the position property in CSS, and the valid values are the keywords we have already seen (static, relative, absolute, and fixed), plus inherit. The position property is not inherited by descendant elements, but we can force inheritance by using position:inherit.

The position property applies to all elements, so we can use it for block-level element types such as div or p, or for inline element types such as span or em.

The default value, if we say nothing else, is static.

For relative, absolute, and fixed positioning, five other CSS properties are of interest: top, right, bottom, left, and z-index. The uses for the first four and how they apply vary between the three positioning schemes, and we will look at them more closely when the time comes. We will get to z-index at the end of this article.

Static Positioning

An element with position:static—which is the default—isn’t really positioned at all. You will rarely see this explicit declaration. The only time you need to use it is to undo a rule that affects the same element. A silly example:

div {position:absolute}
#foo {position:static}

This would make all div elements absolutely positioned (which is rarely a good idea, but this is just for the sake of example). A div element with id="foo", however, will be static within the document flow. The second rule is used as an undo of the first.

The phrase “statically positioned” is, therefore, something of a misnomer. I’m going to use it anyway. You’ll know what I mean.

A statically positioned element occurs in a place which is determined by whatever static content precedes it in the markup. We can push it around a bit using margin or padding, but it mainly stays in place with respect to the rest of the content.

Explaining the details of how static elements are laid out would require three whole articles the size of this one, and it would probably make most of you swear off web design forever. We don’t want to do that, so I’ll skim right over this issue and say that it’s fairly straightforward and intuitive. Ahem.

Relative Positioning

The position of an element with position:relative is, as has been mentioned, relative to itself. This may sound odd, but it can be rather useful once you grasp the concept.

This is how it works, in layman’s terms: The box generated by the element is laid out just as it is for static elements. Then the rendered box is shifted horizontally and/or vertically, according to the values of the top, right, bottom, and left properties. But here’s the tricky part—as far as the rest of the document is concerned, the box is still in its original place! It is laid out where it should be, and it will occupy that position in the document flow. It’s only the rendered box that is shifted, relative to that original position. If we move it a large distance, we will leave a hole in the document.

This means that position:relative is utterly useless for things like column layout. It is normally only useful for nudging an element a few pixels or so. Does this mean we can forget about position:relative? Not at all. In fact, it has a side effect that makes it very valuable, indeed, which we will get to in a moment.

The top, right, bottom, and left properties can be used for specifying how far to push the rendered box from its original position. Again, the way this works can seem counter-intuitive at first, but there’s some logic in it.

If we set top:20px for a relatively positioned element, we move it twenty pixels down. Say what? Actually it’s not as crazy as it may seem: top:20px means that we push the top edge of the box twenty pixels from where it would have been without positioning. These values can even be negative, so we could use bottom:-20px to achieve the same thing.

The alert reader will have realized by now that this means there’s no point in setting top and bottom at the same time, nor right and left. They will counter each other, or one of them will be ignored. However, specifying top and left together is perfectly all right, if we want to, for example, push the box down and to the right.

The results of setting position:relative for table elements (rows, columns, row/column groups, cells, and captions) is undefined in the CSS 2.1 specification, which means you shouldn’t muck around with it.

Absolute Positioning

Absolute positioning can be quite useful, even for laying out columns. It has its drawbacks, though. An element with position:absolute is removed from the document flow, which means the rest of the document acts as if the element weren’t there. It won’t affect subsequent elements. Instead, it could end up layered over other elements, unless we make sure it doesn’t. (Sometimes we want that to happen, of course, for example for pop-ups without JavaScript.)

With absolute positioning, the top, right, bottom, and left properties apply in a very different way than for relatively positioned elements. They now specify the positions of the four edges of the generated box. The values can be specified with length units, such as top:50px or left:-8.5em. They can also be specified in percents, in which case it gets slightly more complicated. A percent value for top and bottom refers to a percentage of the height of the containing block, while for right and left it refers to the width of the containing block.

What is a containing block? I’m glad you asked…

It sounds like one of those boring technical details that only real nerds pay any attention to, doesn’t it? To be honest, it is a boring technical detail, but unfortunately we have to understand it. The containing block is extremely important when we use absolute positioning.

Take a look at what the CSS 2.1 specification has to say about containing blocks:

If the element has ‘position: absolute’, the containing block is established by the nearest ancestor with a ‘position’ of ‘absolute’, ‘relative’ or ‘fixed’ … If there is no such ancestor, the containing block is the initial containing block.

OK, the containing block for an absolutely positioned element is the nearest positioned ancestor. An ancestor is a parent element or a grandparent, and so on. If none of the ancestors is positioned, the containing block is some mythical entity called “the initial containing block”, about which the specification has the following to say:

The containing block in which the root element lives is chosen by the user agent. (It could be related to the viewport.) This containing block is called the initial containing block.

Very helpful, isn’t it? The root element in any HTML or XHTML document is the html element. So the initial containing block is like the parent of the html element, whatever that is. The specification starts flapping at this point and mumbles about “chosen by the user agent” and “could be related to the viewport.” In W3C lingo, user agent is (in most cases) what we mere mortals call a browser, and viewport means browser window.

In other words, we can assume that if there is no positioned ancestor for an absolutely positioned element, the containing block is the document itself.

If we look closer at the first quotation, we will discover that interesting side effect of relative positioning I mentioned earlier: apparently, a relatively positioned element becomes the containing block for any absolutely positioned children. That is extremely useful to us, because that allows us full control over our containing blocks.

If we want to position an element absolutely, but with respect to some other element, all we have to do is make that other element (or a common ancestor) be our containing block. We can now achieve that easily by setting position:relative on it. We don’t have to specify any movement at all. The containing block doesn’t move, it just becomes a containing block. Nice and simple, eh?

For an absolutely positioned element, the top, right, bottom, and left properties specify the distances from the corresponding edges of the containing block. To be specific, it is the padding edge of the containing block we’re talking about. That means the outer limits of any padding specified on the block, but not borders or the margin area.

So right:20px means the right-hand edge of the absolutely positioned element should be 20 pixels from the right-hand edge of the containing block.

In a CSS2-compliant browser, we could specify all four properties to give both the position and the dimensions of our absolutely positioned element. Unfortunately, IE5/6 do not support this, so in the real world, we will often need to specify one vertical position (either top or bottom) and one horizontal position (left or right) and then set the width property and, sometimes, the height property.

These bugs also apply to values specified as percents. In IE5/6, they do not apply to the dimensions of the containing block, but of the parent block. As we have seen, those can be two very different things. The percentage bugs are also present in Opera, up to and including version 8. They are fixed in Opera 9.

I mentioned earlier that absolutely positioned elements are removed from the document flow. They do not affect anything that comes later in the markup; these elements will be laid out as if the absolutely positioned element wasn’t there. This makes absolute positioning virtually impossible to use for a multi-column layout if you also need a full-width footer.

But although an absolutely positioned element doesn’t care about what follows, it isn’t totally unaware of what came before it in the markup. The default value for the four dimensional properties is auto, which is also a valid value to assign explicitly. Setting left:auto means the left edge of the absolutely positioned element will occur where it would have been if it were a normal, static element. We could still set top:6em or whatever to establish a vertical position. This can sometimes be useful when you want to pin an element in only one dimension, for instance in drop-down menus.

Absolute positioning can be very useful, as long as you understand how it works (and are aware of the browser bugs). The key to success is to be well aware of your containing blocks.

Fixed Positioning

Fixed positioning is similar to absolute positioning. The only real difference is that for fixed positioning, the containing block is always the initial containing block. You know, the one that is “chosen by the user agent” and “could be related to the viewport.” The top, right, bottom, and left properties refer to the edges of the browser window (or the paper, when printing).

Basically, an element with fixed positioning is stuck at a specific position in the browser window and doesn’t move, even if you scroll the document. When printing, a fixed element is printed on every page, at the same position on each page.

That sounds just great, doesn’t it? Didn’t you always want a navigation menu that didn’t scroll with the document, but those clunky JavaScript solutions never really cut it? The position:fixed thing looks like the answer to all your prayers, and you’re about to cry out, “Hallelujah!” But then you realize that this is CSS we’re talking about. There is always a but somewhere. Torn between hope and despair, you look through the CSS 2.1 specification and cannot find a caveat. Is it possible…?

No, of course not. What crushes those dreams, cruelly and insensitively is—what else?—Microsoft Internet Explorer. Versions 5.x and 6 do not support position:fixed, so it’s back to those clunky JavaScript solutions after all. Deep down you knew it, didn’t you?

Z-Index

A relatively positioned element occupies space in one place, but the rendered box may be somewhere else. Absolutely positioned elements and fixed elements are removed from the document flow. In all three cases it’s possible that we end up with boxes that are superimposed on top of other boxes: overlap. We will have to be aware of this and make sure to make room for them if this effect is undesirable.

Sometimes, overlaying boxes can be a desirable effect, but we might like some control over which box is on top. We can control this with the use of the z-index property, which applies to positioned elements (i.e., anything except position:static). In addition to the auto and inherit keywords, this property accepts an integer value (which may be negative).

A computer screen is (currently) two-dimensional. It’s a flat area with a width and a height, onto which we can render our CSS boxes. But CSS actually works in three dimensions. The X and Y axes are our normal horizontal and vertical axes, respectively. The Z axis is perpendicular to those two. Think of it as pointing straight into the front of and out the back of the screen. The higher the value of the z-index property, the closer the element is to the user. This is called the stacking level.

Going into the details of stacking contexts and stacking levels is beyond the scope of this article, so let us just say that a positioned element establishes something called a stacking context. The element and its positioned children can be assigned a stacking level, using the z-index property. This stacking level only applies within the parent’s stacking context, though. Or, to put it differently, we can only change the stacking order of elements within the same stacking context.

Consider a markup fragment such as the following:



...

...



Let’s say the divs with id="first" and id="next" are relatively positioned, which means they are the containing blocks for any absolutely positioned children. Let’s also say that the inner div s (a, b, c, and d)are absolutely positioned. We can affect the stacking order of a and b using z-index, because they live within the same stacking context (that of first). If we want a to be on top of b, we can set z-index:1 for a (or z-index:5, or z-index:99—the value is not important, it merely has to be higher than the z-index of the element over which you want to place the element concerned).

We can also affect the stacking order of first and next, should they overlap, because they live in the same stacking context.

But what if we want next or c to slide in between a and b? Now we’re out of luck, because next and c exist in different stacking contexts from a and b, and there is no way that we can insert them between those two.

Likewise, we cannot intersperse child elements of b with child elements of a, because a and b establish their own separate stacking contexts.

Just as knowledge of the containing block is extremely important for absolute positioning, the stacking context is important when using z-index.

Closing Up

I’ve created an example document that shows the various positioning schemes in action. It will not work properly in Internet Explorer 5.x or 6, since they don’t support fixed positioning, but users with Opera 9, Firefox, Safari, or IE7 should be able to see it.

All the CSS that controls the layout is present in the markup, so all you have to do to see how it is done is to view the page source.

CSS positioning has its uses, but in many real-world applications, it isn’t all that usable for the page layout. Floats are often better, although they are fraught with browser bugs.

If you always know which column will be the longest, then you may use positioning for layout. Fixed positioning must be avoided for the time being, at least for public sites, since the most ubiquitous browser doesn’t support it.

Advertisements

Web Design 101: Photoshop

17 May
hotoshop promises great power, but can be more than a little challenging when it comes to clarity and patience. New users can easily get frustrated at how daunting some of the challenges can be when it comes to getting the job done, and even those who are a bit more familiar with it still find points of frustration that impede both production and creativity.

A workspace is an arrangement of palettes that suit your needs. There are a few pre-arranged options in this menu, and selecting one will alter the layout of Photoshop’s palettes—and it even colorizes some of the primary menu options needed for this arrangement.

So for those who barely know Photoshop, but would like to become more familiar with it—find out what sort of things to look for when it comes to the palette system, layers, styles, effects, various tools, and saving or exporting their work—let’s look at the basics.

What are all these palettes used for?

As soon as Photoshop launches, you’re greeted with a whole slew of small windows called “palettes”. Understanding how each one of these work is the key to knowing where to find the critical information you need. Sorting them out will make your workflow smoother and more enjoyable.

Although some palettes seem to have a very obscure purpose (Histogram, I’m looking at you!), there are a few palettes that I suggest you keep a close eye on at all times:

  • Info – I watch this one constantly, as it monitors everything from the size of your current selection marquee, the x and y coordinates and color mix directly under your cursor, and even the efficiency of performance (found by looking into the many other options for this palette).
  • Character and Paragraph – this left/right combo is a must-have palette for anyone that edits text in their designs.
  • Layers – certainly an obvious one to keep open, but I’ve seen the perils of beginners trying to master Photoshop before they master layers. Get to know it better than you do now, and you might just find some hidden secrets buried within.

Finally, if you want to explore a little deeper into the inner-workings of Photoshop, check out the options under the Window > Workspace menu. A workspace is an arrangement of palettes that suit your needs. There are a few pre-arranged options in this menu, and selecting one will alter the layout of Photoshop’s palettes—and it even colorizes some of the primary menu options needed for this arrangement. If you feel up to the challenge, you can even create your own arrangements and save them under this menu.

What’s the best way to sort my layers?

I’ve seen a lot of Photoshop files throughout my years as a designer, and one of the biggest problems I see is how amazingly unsorted the Layers palette can get. Let’s look at a bad example first:

Example of bad layer naming

In this example, there are two primary issues to avoid: poor hierarchy sorting, and an obscure naming system.

Essentially, you should “future-proof” your document. In other words, when you go back to it at a later date you’ll understand the purpose of a particular layer, and the process of editing the work will be far easier. It’s the same reason programmers add comments to their code.

Naming your layers properly is just a matter of coming up with a one or two-word description that guides you into seeing the purpose of that layer, within the context of your document.

As for hierarchy sorting, think of your document from the bottom-up. Stack items in a logical order, and use folders (and even sub-folders) to help group similar items by type.

The following example is greatly improved by using these methods:

Example of good layer naming

To really open up the possible ways you can sort your work: right click on a layer, open it’s properties dialog, and see that you can add color-coding to your sorting system. How cool is that? Also, in the palette options (found by opening up the tiny-buttoned drop-down menu in the top-right of the Layers palette), you can change the size of the icons, depending on your preference.

Layers with colors selected

What do these Layer Blending Modes really do?

At the top of the Layers palette there is a drop-down menu with a value of “Normal” by default. This is the blending mode for the currently selected layer, which alters how it and the layers beneath it appear.

The Blend Mode palette

The Adobe help documentation reads:

A layer’s blending mode determines how its pixels blend with underlying pixels in the image. You can create a variety of special effects using blending modes.

You’ll probably find that many of these options are useless unless you’re interested in pursuing a career in professional photo-retouching—I recommend sticking with just three Modes until you get a better feel for how these will benefit your work:

  • Multiply – like a pair of sunglasses, this will darken everything below it (any white pixels will disappear, since white cannot add to a dark value).
  • Screen – exactly the opposite of Multiply, the layer will lighten everything below it.
  • Overlay – is a strange hybrid of both Multiply and Screen, where the neutral non-effective color is grey. White brightens, and black adds darkness, but with a different calculation that adds more color than the other two values.

What are Layer Styles?

Layer Styles are live, “non-destructive” effects that you can add and remove without altering the original layer’s art (unlike many filters). Bevels, drop-shadows, gradients, color effects, and textures can all be mixed-and-matched for a variety of visual effects.

The layer styles palette

There are three ways to inspect and add styles to your layer:

  1. By double-clicking the layer to the right of its name, to open a Layer Styles dialog window
  2. By choosing the options in “Layer Style” in the Layer menu
  3. By selecting a new style from the Styles palette (though this will only add a preset, rather than opening the Styles dialog for you)

What other tools are available?

As you experiment in Photoshop, you’ll eventually want to move beyond Marquee selections and the Paintbrush. There are a wide variety of other tools available that can provide you with a well-rounded set of abilities. These include the Magic Wand (for selections), Healing Brush, Pencil, Blur & Sharpen, Dodge & Burn, the Pen for creating paths, and a tool that allows you to drop in custom shapes.

The Hidden Tools

The hidden marquee tools

Speaking of the tool palette, have a close look at each button. Down in the bottom-right corner, you’ll see a small black triangle. This indicates that for each tool available in the palette, there are other similar tools hidden just below the surface. These additional tools can be accessed by holding down the mouse button for more than a few seconds, or right-clicking to view the list of choices.

How should I export my image for the web?

When it is time to export your images in a format suitable for online use, you might be tempted to simply save a copy of your file as a jpeg. Although technically there’s nothing wrong with this approach, Photoshop does have some built-in features that can make this step a little easier.

Save for Web & Devices…

If you look under the File menu, you’ll see an option to “Save for Web & Devices…”. Choosing this option will activate a rather large dialog that may seem a bit daunting for those unfamiliar with the feature.

The export dialog

Along the top are tabs to view the original image, the optimized (compressed) image, both the original and the optimized (2-Up), or a set of four choices all at once. Generally, 2-Up should do fine for most uses.

Along the right, you can choose what type of compression does the best job of generating a small file size, while retaining the integrity of the image. Take some time to really explore the different compression options and see how they affect your work. The ‘before’ and ‘after’ filesizes are displayed below each image.

Here are a few guidelines that I follow:

  1. I never use Photoshop’s slicing tools. Adobe still hasn’t (in my opinion) got this down quite as well as Fireworks, and it tends to make things a bigger mess than necessary. Also, avoid having the export generate HTML.
  2. There’s no need to use the “Progressive” option for jpeg files anymore—it’s a throwback from the days of a far-too-slow internet, and photos had to slowly crawl their way through the tubes to your browser.
  3. ICC Profiles should also be turned off. Color matching is one of those things that sounds like a great idea, but until browsers can all get on the same page regarding the issue, it doesn’t really help us like it was meant to.
  4. It’s a well-known fact that Adobe’s PNG gamma support is faulty. If you have to export a PNG file, do it in Fireworks, or track down a freeware application that can “slam” the gamma from the image (and sometimes even compress it a little tighter).