Giz Gears: Design Area - Hints and Tips

Updated: 11/28/2004 05:44:22 PM (Broken Link? Report It Here)

Design Area

What is the purpose of the Design Hints and Tips area?

Many times one has enough knowledge about a subject to be beyond the need of a tutorial but not enough to know exactly how to accomplish a certain task or reach a certain goal. Often one finds himself needing to learn how to do just one small thing instead of a receiving a full course instruction. And then there are times where you learn something interesting and useful just by browsing around; but without really intending to learn.

That's the purpose of the Design Hints and Tips area - to teach you something small, but interesting and useful. To show you how to do just one thing at a time and help you reach your goal. More importantly, to provide you the opportunity to learn something new each day; which is a goal most people envision and strive for.

Membership requirements for Giz Gears.

This interactive area within Giz Gears does not require an active Giz-Net Network membership in order to participate.

Working With Cascading Style Sheets (CSS)

Design Tidbits Working With Forms Working With JavaScript Working With Tables

Controlling Background Images With CSS - Contributed by Jean Grey!

You can use CSS to control background images on your pages. Remember, all CSS scripting should be contained within the HEAD section of your pages.

Background Image.
Using CSS instead of the Body tag lets you control your background images with various functions. The code below shows how to display a background with no other effects.

<style>
body
{
background-image:
url(images/bgd-image.gif)
}
</style>
Repeating Background.
Normally background images tile or fill in the entire screen by repeating itself. Using CSS, you can control how your background repeats itself; either vertically or horizontally. Use the code below to accomplish this. Replace the repeat-y with repeat-x to switch from a vertical to horizontal.

<style>
body
{
background-image:
url(images/bgd-image.gif);
background-repeat: repeat-y
}
</style>
Background Position.
If you want to place a background image in a particular location on your page, you apply an attribute to the x and y coordinates on your page. The code below shows you how to center the background. Variations include top center, center bottom, or bottom left.

<style>
body
{
background-image:
url(images/bgd-image.gif);
background-repeat: no-repeat;
background-position: center center
}
</style>
Fixed Background.
This code below will allow you to “fix” your background, meaning the background will not move when scrolling through a webpage. Currently, this is function is not supported by Netscape.

<style>
body
{
background-image:
url(images/bgd-image.gif);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed
}
</style>

Note: I did not load an example for this CSS block because it would cause too many changes to my webpage. But feel free to copy the code and try it out on your own website!

Setting Background Colors With CSS - Contributed by Jean Grey!

Here's an example of how to change various portions of your background colors on your webpages:

<html>
<head>
<style>
body {background-color: lightblue}
h1 {background-color: #FFFFCC}
h2 {background-color: transparent}
p {background-color: rgb(200,0,200)}
</style>
</head>

<body>
<h1>Head Style 1</h1>
<h2>Head Style 2</h2>
<p>Paragraph Style</p>
</body>
</html>

Background colors have been assigned to a number of pre-assigned elements; in this example, they have been assigned to the H1, H2 and P tags. Note that H2 is attributed with the "transparent" value. It will show no color.

Note: I did not load an example for this CSS block because it would cause too many changes to my webpage. But feel free to copy the code and try it out on your own website!

Using Comments in CSS - Contributed by Jean Grey!- Added 28 Nov

Add comments to your Cascading Style Sheets (CSS) to help guide you later. When first inputting your CSS code, the code may make sense. However, later on it may not make sense when you are trying to edit it. The comments will help you remember why you inputted the code in the first place.

As a general rule (works with most known browsers), you would input a CSS comment using forward slashes and asterisks. For example:

/* This is a CSS comment */

Create Gradient Backgrounds with CSS instead of an Image File- Contributed by Mystique!- Added 28 Nov

A gradient background starts out as one color and gradually changes to another color; usually from light to dark or vice versa. To make a gradient background without using an image, you need browser that will read the CSS code and produce the gradient background. Internet Explorer is one of those browsers. For those that are not compatible, all you will see is the page's background color.

If your browser is compatible, you should see a background that starts out as a light yellow and ends in a gold color.

The code for the table above looks like this:

<table width="100" align="center" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#E7B700', startColorstr='#EAE4B4', gradientType='0');">
<tr>
<td>If your browser is compatible, you should see a background that starts out as a light yellow and ends in a gold color.</td>
</tr>
</table>

Link Background Highlighting - Contributed by Jean Grey!

To highlight the background of your links when your mouse hovers over it, embed this Style Tag in-between your <head></head> tags:
<STYLE TYPE="text/css">a:hover{background-color:FF0000;}</STYLE>

Move your mouse over this link or any other link on this page to see the effect.

Image Protection through CSS

CSS can be used to protect your images from the right-click image thieves. Place an image as a background inside a Span Tag. Then place a transparent image over top of it. When someone views the page through their browser, they will see the image just fine. If they right click and save the image though all they will save is the transparent image because it is resting on top of the real image.

Let’s say that your images are stored in the images directory on your server. There’s an image there named x-men.gif, and it is 32 x 32 pixels.
Next, you need to make a transparent image. The actual size of the image doesn’t matter, but you want to keep it as small as possible for loading time constraints. Then you can make it any size you want in the code. For this example, we’ll say it is 10w x 10h.

Now you place the two images on your page using the <span></span> tag:
<span style="background-image:url('http://yoursite.com/images/x-men.gif')"><img src="http://yoursite.com/images/spacer.gif" width="32" height="32" border="0" alt="description"></span>

Copy the code above to your page and change the URL information to match your website. Don’t forget to adjust the width and height code for the transparent image so it is the same size as the original.

For example:

Note: I am running a different kind of image protection code on my website so some of you may receive an error message if you try to right-click on the image. But feel free to copy the code and try it out on your own website! Others of you will actually be able to right-click on the image, but when you save the file all you should get is the transparent image.

Adding Style To Your Links

Dress up your links and give them style with this style sheet. Copy, edit and paste the below code in between your <head></head> tags and all your links on that webpage will have the generated effect. Or you can use an external style sheet if you want the effects to happen on any webpage on your website.

Note: I did not load an example for this CSS block because it would cause too many changes to my webpage. But feel free to copy the code and try it out on your own website!

Padding with CSS - Contributed by Mystique!

Need some space around a webpage element and don't want to use a table? Try using CSS to get that padding. Use this method to add to spans, tables, forms, etc. It will override any pre-set HTML definitions, such as a table's cellpadding attribute:

Note: The padding has four elements: Top/Right/Bottom/Left, in that order.

Formatting Text with CSS - Contributed by Jean Grey!

Stylesheets (CSS) offer some great tools to alter the way text is formatted and displayed by Web browsers. Take control of your text elements by using CSS styles to manipulate HTML coding. The following examples are based on local and direct implementation of styles. All of the following can be used with an internal or external global stylesheet.

Declare a font: font-family: verdana,arial,sans serif
Set the font size: font-size: 10px
Set the font style: font-style: italic
Set the font weight: font-weight: bold
Set the font color to dark red: color :cc0033
Set the text background color to gray: background: f3f3f3
Set the space between the words (tracking): word-spacing: 2px
Set the space between letters (kerning): letter-spacing: 5px
Indent the text: text-indent: 15px
Set the space between lines: line-height: 10px

To implement this kind of formatting, you can use a style, stylesheet, or simply delimit the text in question using a <span> tag, like this:

Here is how such a formatting operation will output to a browser:

... Some Text ...

Design Tidbits Working With Forms Working With JavaScript Working With Tables

Contributions for Giz Gears.

If you have a great web design source you would like to share, please let me know! I give credit for all sources of contributions; links, tutorials, downloads, hints, tips, etc. If you would like to see other pages added to this area, please let me know either through email or through the Forum.

Top of Page