CSS tricks

I’m trying to learn more about CSS, so here are a few tricks that I’ve picked up….

From http://phark.typepad.com/phark/2003/08/accessible_imag.html

A picture of Orion, my D&D figurine

The above image is actually an H2 text element that has been restyled to hide the text and show an image. This technique is useful for skinning a web page — you can simply put in placeholder text in <div> element with an appropriate ID. Then the CSS converts that to an image.

A block (from a div element) with position attribute bottom set to negative 10.

Note that in the previous example, there seems to be no way to push a contained box to the bottom of its container.

A block (from a div element) with float left
A block (from a div element) with float left
A block (from a div element) with float left
A block (from a div element) with float left

Next : how do you center horizontally in a box: use margin:auto;

A block (from a div element) with margin: auto

Next : How do you center vertically? The containing block must have display: table-cell and vertical-align: middle.

A block (from a div element) with margin: auto

Leave a Reply

Your email address will not be published. Required fields are marked *