The Secret of the Sidebar
By Carl Jones
(March 14, 1999)
WebTV implements its exclusive Sidebar throughout its Network pages. Sidebar? You know, those colorful navagable columns on the left side of your screen that remain stationary when you scroll down the page. The sidebar is not unique to WebTV, though. They appear infinitely on websites designed for computer browsers except they scroll with the rest of the page.
The problem with using WebTV's Sidebar is that it tends to offset your page layout when rendered on a computer. As a result, many homepage builders are reluctant to use the <sidebar> tag at all.
But wait. There's a way to get your page to look the way you intended it to -- across both platforms (TV and computer).
It seems the only logical way would be to use Javascript to set up a browser detection scheme. Not only would this be complicated, but also require that browser software be Javascript compatible. While this would be no problem for Netscape or Internet Explorer, non-Javascript browsers would be left "holding the code." The simplest way would be to take advantage of the fact that most computer browsers just ignore the <sidebar> tag altogether.
Here's how to open and close the <sidebar> tag:
<SIDEBAR width = any_width>
</SIDEBAR>
It's that simple!
Then all you need to focus on is the table (nested inside the sidebar) and the values of its attributes. Ultimately, this will determine how your page will look on computers.
Imagine your page on a computer screen consisting of a "left column" and a "right column." If you specify the proper width, height, and alignment of the sidebar table, you'll have the "left column" for computers. And, if you specify the correct width of your main content table, you'll have the "right column" for computers.
This formula will create your stationary sidebar as well as the "left
column" for computers:
<SIDEBAR WIDTH = anywidth>
<TABLE ALIGN = left
WIDTH = sidebar_width
HEIGHT = length_of_page_in_pixels
BGCOLOR = any_color>
<TR><TD VALIGN = top>
Sidebar Content Goes Here
</TD></TR>
</TABLE>
</SIDEBAR>
To create your main content table, and the "right column" for computers, use this formula:
<TABLE WIDTH = 560 - sidebar_width
HEIGHT = length_of_page_in_pixels
BGCOLOR = any_color>
<TR><TD VALIGN = top>
Main Content Goes Here Including Nested Tables
</TD></TR>
</TABLE>
Here's an example that uses both formulas. View
it.
It's important that you use these formulas as stated with the exception of setting optional values for cellpadding, cellspacing, and border attributes. Otherwise, computer browsers will place the "right column" table under the "left column" (sidebar) table. Also, notice that you should specify the values of width and height in pixels, not percentages.
There's just one minor problem: The background color of the "left
column" (sidebar) table will not extend the length of the page
automatically. This only affects what is seen on a computer but can be easily fixed if you think it's necessary. Here's how:
Once your page is finished go back and replace
length_of_page_in_pixels with a value that corresponds to the length of your page. You'll have to use guesstimation here, and you may have to try a couple of times before you get it to look right. To see how it will look on a computer, comment the <!-- <SIDEBAR width = any_width> --> tag. Afterwards, be sure to uncomment the <SIDEBAR width = any_width> tag. See example.
WebTV automatically adds an eight-pixel margin around all pages on your screen. But, by default WebTV's Sidebar has no margins. So, to make your main content table appear without margins just add WebTV's exclusive vspace=0 and hspace=0 attributes to your <body> tag. In my opinion, sidebar pages that use these attributes look better, especially when using table background colors that are different from the background color in the <body> tag.
I hope you have learned how WebTV's Sidebar can work for you, without offsetting your page layout on a computer, just by setting the proper attribute values in your sidebar <table> tag.
| 
