HTML Tips Tips for optimum HTML coding
Automatic Cursor Placement
Cursor inside the Field

Would you like to have your form open with the cursor blinking in the text field and ready for people to fill in? Many search engines do this now... and so can you!

Example:

First, you must use a javascript command in the body tag:

onLoad="self.focus();document.MyForm.MyElement.focus()"

"MyForm" is where you'll type the name of your form and add a name to your form.

<form name="MyForm">

"MyElement" is where you'll type the name of the form element in which you want the cursor to be placed, then add that name to your input field.

<input type="text" name="MyElement">

That tells the browser which area of the form the cursor should be placed. You can name "MyForm" and "MyElement" anything you like, just so the names you use in the body tag and form are the same.

Border Background - Page Setup

BORDER - NO LINKS
[CLICK FOR SAMPLE]

Once you understand the theory behind setting up your border backgrounds, it's a cinch! First of all, you need to right-click on this square and download the magical "spacer.gif". It's colorless, odorless and invisible, but is necessary if you want to keep your text from overrunning your border. It's called a "transparent gif".

RIGHT-CLICK HERE ---><---TO GRAB SPACER.GIF!

Don't worry about the size of this little guy. You can make it any size you want in your image tags and it won't bother it at all. Consider it your placeholder at any dimension you assign.

If you set your table accordingly, your page will be viewed just fine on all resolutions. In other words, when people view it at a resolution of 640x480, 800x600, 1024x768 or higher, your content will spread to fill the page. Personally, I like to leave a little space on the right so the text doesn't flush up against the scrollbar, so I use a table width of 95%.

<table cellpadding=0 cellspacing=0 border=0 width="95%">
Now you need to set up your columns... but do it by pixel, not percentage! For the most part, my border backgrounds are 120 pixels wide but you can play with that figure. Add the following code:
<tr><td valign="top" align="left">
<img src="spacer.gif" height="1" width="120">
</td>
What this does, in essence, is assign a width of 120 pixels to the first column--which is your border. This effectively keeps text from overflowing into the border. (If you want links in the border area, that's covered below.) Then, add the following:
<td valign="top" align="left" width="100%">
You're now ready to add the content to your page. If you're not using Cascading Style Sheets to assign font faces and styles, you will need to assign your font face and size before you start your content.

DON'T FORGET TO CLOSE OUT YOUR TABLE TAGS!! Netscape is picky about that. At the end of your page, prior to closing out your </body> tag, insert:

</td></tr></table>

LINKS IN BORDER:
[CLICK FOR SAMPLE]

Set up your page just as before, adding the links under the spacer in the border.

<table cellpadding=0 cellspacing=0 border=0 width="95%"> <tr><td valign="top" align="left"><img src="spacer.gif" height="1" width="120">
BORDER LINKS HERE
</td>
<td valign="top" align="left" width="100%">
PAGE CONTENT HERE
</td></tr></table>

Now, if you want to put links in the border, put a <br> after the spacer.gif and simply insert them after the vspacer code. You may use text links or navigational buttons. For the best effect, the buttons you use should be a tad shorter than the width of the border. If you're using text links, you may have to play with the size of the text in order for it to look properly aligned. But you need to keep the spacer.gif in there to hold the width of the column and keep the text where it belongs.



Recommended Sites

  • Check out Tips-Tricks.com for more
        HTML tips.

    Did You Know?

    Click through our "Tip Box" below for some valuable HTML Tips!

  • To get rid of the border around your linked images, all you have to do is specify in the tag itself "border=0".

  • If you don't close out all of your table tags, your content will not appear in Netscape. However, it will appear in IE.

  • The "fixed properties" tag works in IE, but not Netscape.

  • If you use tables on your page, make sure there is a height and width tag on all images. This creates a placeholder for your image, allowing the page to continue loading and load the image in the background. This will cut your download time tremendously.

  • When you come to a site that has a beautiful background that you want to use as your wallpaper, all you have to do is right-click on the background and select the option to save it as your wallpaper. (Check out my "Nature Backdrops" for some really nice graphics for this!)





  • HOME : DESIGN GALLERY : FAQ'S : HTML TIPS : JAVA & CGI SCRIPTS : TOP 100 RESOURCES : PHOTOSHOP TIPS
    MARKET GUIDE : NEWS & ARTICLES : TOOLS & WIZARDS : WEB DESIGN & HOSTING : EMAIL WINDY
    Copyright 1996-2006 - Windy's Design Studio LLC
    All Rights Reserved
    Privacy Policy