December 15, 1997

DR. WEBSITE: Absolute Positioning Of HTML Elements; Hiding User Buttons

By David Fiedler and Scott Clark

Dear Dr. Website: Is there a tag that will enable me to have the very first line of text closer to the top of the browser? I would like to be able to specify how many pixels down from the top of the page certain things will appear.

Unfortunately, if you are designing pages so that everyone, regardless of browser, will be able to utilize your Web site, you're out of luck. If you're ready to boldly leap into the world of the 4.0 browsers (Netscape Communicator and Microsoft Internet Explorer), then you can eat your cake and have it too. Both of the newest releases of these browsers enable the use of absolute positioning, which allow the developer to position HTML elements according to x and y coordinates in relation to the top left position of the Web browser window. This can be done using an image, like this:

<img src="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fdrweb%2Fmyface.gif&y=1999" style="container:positioned; position:absolute;
top:0; left:0;">

Positioning can also be done within divisions; the top and left positions are in relation to the top left position within the division:

<STYLE>
.pclass	{position:absolute; 
			top:0; 
			left: 0;  
			margin: 0}
</STYLE>
<DIV CLASS=pclass>
<I>this will do it! </I>
</DIV>

Of course, you can do this with LAYERS as well, but since Netscape is going to phase them out, I wouldn't want to invest too much time or effort in that direction. Even if you don't use styles and absolute positioning in all of your pages, get used to it; you'll see more and more of it, and as time goes on, you'll find more reasons to use it and fewer reasons not to.

Dear Dr. Website: I'd like to be able to "hide" or "remove" a button from a page based upon user actions with JavaScript or JScript. I can't change the type from "button" to "hidden," since this property is read-only. In addition, I can't set the element to 0 or null, since that is not supported for the object. I can change the element's value to "", but that is not the best solution. Any ideas?

If you are designing for users of the newer browsers, then you can use Dynamic HTML to write the code on the fly without re-loading the page, as with Netscape and IE 3.0. Of course, it is possible to write a page for these browsers that opens a new, smaller window with your form in it. The newly opened form window would be written using document.write, like this:

newwindow=window.open("","DocName","toolbar=no,directories=
no,width=400,height=250");
newwindow.document.write("<FORM METHOD=POST>");

and your form could be written the same way. This is a bit clunky, but it would work, and you could move the values from form elements that have already been filled out and apply the values to the newly opened form, i.e.:

newwindow.document.write("<INPUT TYPE=TEXT VALUE=\""+document.prevform.namer.value+"\">");

(Note the \ before the quotes, required in a document.write statement if a literal quote is needed.) This may be more of a problem than it's worth, but it is one method to do what you want.

Dear Dr. Website: A past question asks how to find advertisers. I have gone to Web sites of companies that advertise, but I cannot find a way to communicate with them, or whom to communicate with.

On most corporate Web sites, you will find a link that will enable you to contact the company via their e-mail address. Usually, all that is required is for you to contact them and ask to be directed to their public relations person.

WebDeveloper.com's Home Page

---

RELATED STORIES:

Keywords: design, html
Date: 19971215