Design

Design snippets

This page is where I am going to put all useful little snippets of code that are useful and will serve as a useful look-up resource.

The list of names below are pulled from a database the script is very simple but help give a dynamic edge that is nicer than a static page.

Get an image to the left of your text with css in this case an arrow.

CODE:

css

.arrow {
    background: url("../images/arrow1.png") no-repeat 5px 50%;
    padding-left:1.5em;
    font-weight:bold;
    }

html

<p class="arrow">The Result</p>

The Result

This can easily be taken futher with links to make a differant image appear on hover for example

.arrow:hover {

     background: url("../images/arrow2.png") no-repeat 5px 50%;
    padding-left:1.5em;
    font-weight:bold;
    }

Just give the link of in this case .arrow and put both the above examples into the stlye sheet pointing at your images and job done.

September

2006 Members
2007 Members

230 members in database.

Arrange in order by clicking blue links at top of columns