Positioning, Lists and Image Replacement
Tonight's Agenda
- positioning and the z-index
- styling lists
- image replacement
- final project discussion and work
Positioning
The Return of Absolute and Relative
We've learned about absolute and relative sizes. We've learned about absolute and relative referencing. Now we are going to learn about absolute and relative positioning.
Relative Positioning
Positioning
By default, elements are relatively positioned. This means that if you have two elements coded in sequence, the second element will be relatively positioned (either block or inline display) after the first element.
Absolute Positioning
Positioning
Absolute positioning, on the other hand, allows you to specify exactly on the page where you would like something to appear, irrespective of its appearance in the sequence of XHTML elements.
Absolute Positioning Code
Positioning
You might want to position something:
- Always in the upper left corner
- Always 10 px from the bottom
- Always 2 em from the right and 15 em from the top
The code for providing absolute positioning elements is as follows
#any_element
{
position: absolute;
top: value;
right: value;
bottom: value;
left: value;
}
Absolute Positioning Example?
Positioning
It is recommended that one horitzontal and/or one vertical measure be specified. If you specify more than one, which one will it probably follow?
Example of document with three sections, styled without absolute positioning.
Example of same document with absolute positioning.
Overlap
Positioning
Items can even overlap, like they do in this example.
So What Then?
Positioning
Sometimes we may want items to overlap. But we want to make sure that they overlap in the correct order. This is accomplished by specifying their z-index value.
The Z-Index
Positioning and Overlap
The z-index value is the value that represents the "layer" on which something is overlapped is displayed. To control the z-index, give the layer desired to be on top a higher value than the layer desired to be obscured.
Here is the same overlap example, but with a z-index values applied to order the items differently.
Controlling Indentation
Styling Lists
Sometimes, the desired indentation might be different than the default indentation style for an unordered lists. You can use selectors we already know (margin, padding) and some new ones (text-indent) we can achieve a variety of specific settings for unordered lists (see example.)
Change or Remove Bullets
Styling Lists
It's also easy to change or remove bullets, using the list-style-type selector.
Here's a couple examples.
Using Inline Display for Navigation
Styling Lists
Removing the bullets brings to mind a navigation menu. But what if we wanted our navigation menu to orient itself horizontally instead of vertically? We can simply change the display: selector value to in-line to force list items to behave as inline elements, as in this example.
Using Inline Display for Navigation (continued)
Styling Lists
Using what you already know, such as background-color and margin and specifying display: block; for the the anchor tag, you can get decent looking navigation menus, like this.
Image Replacement
In some cases, you might want to create a scenario where you use semantic markup to create proper XHTML, but you essentially replace your mark up with images because of the capabilities something like photoshop provides. Like in this example.
Image Replacement on Steroids
Image Replacement
You can also accomplish really cool menus using this technique combined with some background positioning. Like this example from the A List Apart tutorial/article on "CSS Sprites" by Dave Shea, creator of the CSS Zen Garden.
Big Buts
Image Replacment
Also known as "FIR" for Fahrner Image Replacement, before you use this technique you should definitely read this article regarding the problems you might encounter with using it.