More Layout Tips

September 19, 1996

A column by Craig Kosak

General Frames Information
Borderless Frames
Making ActiveX Controls Target the Correct Frame
Using the ActiveX Marquee Control
Controlling Space Between Tables
Using Style Sheets

We've received a number of questions asking for more detail on the ins-and-outs of HTML page layout. In this column we'll get into solving some frame and table layout problems, including a tip on how to properly target links made with ActiveX controls in a frames-based layout.

Let's get right to your questions.

General Frames Information

You talk about frames and all, but you don't explain very well how to do them. You did not give any examples, like the frames being used by You talk about frames and all, but you don't Microsoft MSDN Online Web Workshop. From what I read I cannot build frames into my home page. If you could give me some examples to work from I could build frames into it.

Dale Hawley

Craig replies:

There's a wide variety of information on the Web regarding how to use frames, including the HTML Elements reference.

Borderless Frames

I'm working on a set of frames and it is CRITICAL to turn off all of their borders. I have had no problem with that in Internet Explorer, but Netscape Navigator Gold 2.0 stubbornly refuses to eliminate the borders. Please advise.

If turning off all the frames is impossible in Netscape, please tell me how to minimize the size of those frames (to 1 pixel wide).

Thank you very much,

David Huynh

Craig replies:

The good news is that Netscape Navigator 3.0 can now display borderless frames. The bad news is that Internet Explorer and Navigator use different code to turn the borders off. However, you can write code that makes your pages look the same in both browsers.

The code difference stems from the way each browser gives you control over border width and whether borders are displayed. Internet Explorer turns borders on or off using the FRAMEBORDER argument. A 0 value turns borders off. A 1 value turns them on. Border width is controlled with the FRAMESPACING argument, specifying width in pixels. Navigator, on the other hand, requires a YES or NO value for the FRAMEBORDER argument. Frame width is controlled with the BORDER argument, specified in pixels.

The key to making this work is to use both types of frame width arguments; FRAMESPACING for Internet Explorer, and BORDER for Navigator. The FRAMEBORDER argument can be assigned Internet Explorer's numeric value (0) or Navigator's NO value. Here's the code to use:

<FRAMESET FRAMEBORDER=0 FRAMESPACING=0 BORDER=0>

<FRAMESET FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>

Of course, you'll want to add your own column or row specifications.

Making ActiveX Controls Target the Correct Frame

How about some better documentation on the use of the ActiveX controls? For instance, I've successfully used controls to create an array of buttons, each of which opens a different page on our Web site. The buttons are just what I've been looking for for quite some time, but there's a problem: When I put the buttons on the page where I want them, they are in a frame. When a visitor to our site clicks on one of the buttons, the appropriate page comes up in the same frame, instead of the "main" frame. I currently have buttons in the same frame, and with HTML I know to use the <TARGET> tag for this purpose. Since the buttons produced by the ActiveX control are managed by VBScript, how do I tell them to "target" the appropriate frame?

Sincerely,

Bob Wells

Craig replies:

Good question! I asked our resident control and script guru to shed some light on this one. To control targeting with ActiveX controls, use the following statement in your VBscript code:

top.[framename].location="myfile.htm"

Insert the appropriate frame name for framename and the appropriate URL for myfile.htm. You can omit the framename variable if all your links target the "top" frame. That is, they repaint the entire screen, just like what happens if you include a TARGET="_top" argument in an <A> tag.

Using the ActiveX Marquee Control

Bob also asked about using the ActiveX Marquee control:

How do you actually enter the text that you want displayed by the marquee? Using the ActiveX control to generate the marquee places a blank marquee on the page, but I have tried everything I could think of, at the time, and found no means for entering text. Again, I do use the <MARQUEE> tag to place marquees on some of our pages, but that is in HTML.

Bob Wells

Craig replies:

As you'll see in the following code, the text is specified by the szURL parameter. Here's some sample code from Garrison that should answer your question:

<OBJECT
     align=CENTER
     classid="clsid:1a4da620-6217-11cf-be62-0080c72edd2d"
          width=650 height=40 BORDER=1 HSPACE=5
          id=marquee
   >
   <PARAM NAME="ScrollStyleX" VALUE="Circular">
   <PARAM NAME="ScrollStyleY" VALUE="Circular">
   <PARAM NAME="szURL" VALUE="http://www.microsoft.com/mydoc.htm">
   <!-- This URL points to what will show in the marquee -->
   <PARAM NAME="ScrollDelay" VALUE=100>
   <PARAM NAME="LoopsX" VALUE=-1>
   <PARAM NAME="LoopsY" VALUE=-1>
   <PARAM NAME="ScrollPixelsX" VALUE=0>
   <PARAM NAME="ScrollPixelsY" VALUE=30>
   <PARAM NAME="DrawImmediately" VALUE=1>
   <PARAM NAME="Whitespace" VALUE=0>
   <PARAM NAME="PageFlippingOn" VALUE=1>
   <PARAM NAME="Zoom" VALUE=100>
   <PARAM NAME="WidthOfPage" VALUE=640>
   </OBJECT>

Controlling Space Between Tables

I'd like to position one table immediately beneath another without any space between the two. Could you advise please?

Barry Wright

Craig replies:

You'll need to use nested tables--they provide an exceptional level of control over spacing between elements. Place each of your tables inside individual cells of another table. Like so:

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>
<!-- insert your first table here -->
</TD>
</TR>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>
<!-- insert your second table here -->
</TD>
</TR>
</TABLE>

To have pixel-by-pixel control over the space between the tables, insert another row between the tables. Place an image inside that row's single cell. Use a one-pixel, background-colored GIF as your image and stretch it vertically using the HEIGHT argument to the <IMG> tag. Here's the code shown in the previous example with this new row that adds five pixels of space between the tables:

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>
<!-- insert your first table here -->
</TD>
</TR>
<TR>
<TD><IMG SRC="one-pixel-image.gif" WIDTH=1 HEIGHT=5></TD>
</TR>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>
<!-- insert your second table here -->
</TD>
</TR>
</TABLE>

Using Style Sheets

We are hearing a lot on the Microsoft Web site regarding advanced page layouts using new HTML tags, and if we go to the Microsoft fonts part of the site we can see some examples of what really is possible such as overlapping images and text, exact placement of images etc.

What would be interesting would be a tutorial covering these, or a general fact sheet of Qs and As, just like "Just the Facts." Every time I have had a free chance to tackle this I find that all present documentation on the subject is very scrambled with no easily understood examples to lead you through the steps of creating a page using these new tags.

Regards,

Craig Bellcurren

Craig replies:

Have you seen our User's Guide to Style Sheets? It's not a step-by-step tutorial or cookbook, but it does give you all the basics of style sheet capabilities that create the effects you mention. For a comprehensive look at using CSS in Internet Explorer 4.0, see George Young's article Cascading Style Sheets in Internet Explorer 4.0.

And by the way, the trick to producing overlapping images and text is to specify negative values to the margin-left, margin-right, and margin-top attributes.

Craig Kosak is the Art Director of the Microsoft MSDN Online Web Workshop Web site.

Photo Credit: Kevin Fleming/Corbis; Michael Boys/Corbis; Neil Beer/PhotoDisc

Regards,

Craig Bellcurren

Craig replies:

And by the way, the trick to producing overlapping images and text is to specify negative values to the margin-left, margin-right, and margin-top attributes.

Craig Kosak is the Art Director of the Microsoft MSDN Online Web Workshop Web site.

Photo Credit: Kevin Fleming/Corbis; Michael Boys/Corbis; Neil Beer/PhotoDisc

More Layout Tips

Contents

General Frames Information

Borderless Frames

Making ActiveX Controls Target the Correct Frame

Using the ActiveX Marquee Control

Controlling Space Between Tables

Using Style Sheets