melbourne chapter

1. Centering a block item horizontally

To centre a fixed width div we can use the CSS margin-left and margin-right commands set to auto. For pre IE 6 browsers you’ll need to use the text-align property set to centre:

body {
 
text-align: center;
 
}
 
div#wrapper {
 
margin: 0 auto;
text-align:left;
 
}

2. Centering content vertically

Having troubles getting vertical-align to centre? Forget it. Set the line-height to the same height as the container like so:

div#cell{
 
height: 24px;
 
line-height: 24px;
 
}

3. Using images for stylish headings

Using images for stylized headings is okay, but we should make sure the heading is still accessible to a screenreader. To do this we can use a background image on the header tag and hide the plain text from view using the text-indent command:

div#banner h1 {
 
height: 26px;
 
text-indent: -2000px;
 
background-image:url(images/header1.gif);
}

4. Getting backgrounds to stretch the full length of a container

CSS has issues controlling things vertically - take backgrounds and vertical alignments for example. If you need a background colour to extend the full length of a block element such as a div you’ll need to use a background-image and tile it vertically:

div#content {
 
background:#fff url(images/bg.gif) top left repeat-y;
}

5.Using 2 classes together

In CSS you can apply two classes to an element. For example, in my piped horizontal lists (Eg Home | About | Contact) I have a selected class to highlight the active item and a last class to remove the piped character from the last list item. To apply these two classes I simply add both classnames to the class attribute seperate by a space:

<a class="last selected" href="home.html">Home</a>