Webforumz Newsletter - August 2007

Tips & Tricks

Did you know that you can use shorthand for 6 digit hexidecimal color codes in css?

Black is #000000 but in shorthand it is #000

By skipping every other number you have shortened the code to three digits.

Navy blue goes from #000080 to #008
Orange goes from #FF8000 to #F80


TIP to Create Different backgrounds for each HTML page using CSS?

Here's how you do it:

Your html on the homepage would look like this.

<body class="home">
       <div id="wrapper">
    Content goes here
       </div>
</body>
</html>

The CSS for the homepage would look like this:

body.home {
    margin: 0 auto;
    background: #FFFFFF ;
    width: 785px;
}

So your homepage has a nice crisp white background to it!

To change the background on another page to have an image!

I want my portfolio page to have a blue patterned background. To accomplish this here is what you do.

The HTML for the portfolio page would look like this.

<body class="home">
       <div id="wrapper">
	Content goes here
       </div>
</body>
</html>

The CSS looks like this:

body.home {
	margin: 0 auto;
	background: url('bluepattern.gif') repeat 0px 0px;
	width: 785px;
}

By assigning a class to each <body> you now have the freedom to custom style each page background!

Enjoy!


Image with Caption Tip

Want an easy way to add a caption to an image?

HTML

<div class="imagecaption">
	<img src="gunnersm.jpg" width="200" height="177" />
    <p>Nice things come in small packages!</p>
</div>

CSS

.imagecaption {
    width: 200px;
    border: 1px solid #999999;
    padding: .5em;
    }

p {
    font: small Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    }

And the result:
Image Caption Picture