Positioning with CSS

There are two main types of CSS positioning: relative and absolute. Absolute CSS positioning places an object in a specified part of the screen. Relative CSS positioning moves an object in relation to where it's supposed to be.

So, to position something 100px from the top and 200px from the left of the screen, you would use this CSS command:

{
position: absolute;
top: 100px;
left: 200px
}

To move an object 2em down and 50px to the left, use this CSS command:

{
position: relative;
top: 2em;
left: 50px
}

You can also use the margin attribute to move objects relatively:

{
margin-top: 2em;
margin-left: 50px
}

Page items not enclosed within the position:relative CSS command will not be affected in any way by it. Page elements featured after the margin CSS command, on the other hand, will have their position adjusted as a result of it.

Making navigation items with CSS

Long gone are the days where you have to use gif images to make fancy navigation items. CSS has opened up a whole new realm of opportunities.

The most important CSS tags here are probably the background and border tags. You could make a basic button with these CSS commands:

a:link
{
color: #ffffff;
background: #ff9900;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #99f #008 #008 #99f
}

a:hover
{
color: #ffffff;
background: #ffaa11;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #008 #99f #99f #008
}

Please note, this article barely scratches the surface of CSS design. To find out more please check out the rest of our CSS resources area.

This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He's extremely good at web accessibility training and knows an awful lot about the Disability Discrimination Act.