Game Development Community

Need a little help with side bar

by Marvin Hawkins · in Technical Issues · 06/24/2005 (8:04 am) · 4 replies

Hi all,

I really want to get some kind of side bar going similar to the one found on gamespot the tower or side panel, (not sure what to call it) seems to scale with the body of the content itself. In other words the side panel is never longer than the page itself or shorter.

How can I achieve this for my web page?

Should I use a table and measure the amount of space on the screen and size each banner for each page?

Or is there a better way?

#1
06/24/2005 (8:35 am)
Well I'm not 100% sure what you're asking.

If you're asking how the left orange menu is the same height as the content to the right, they probably have used the menu as a cell in a table and the content as another cell. So you have a table of one row, two columns (they may have other rows for the title and footers etc, but you get the idea).

Although your comment about scaling has me thinking I may not be understanding you correctly.

There are two main ways to specificy width. A fixed amount or a percentage. To scale to a pages width (or a tables width, or a containers width, etc) you can use a percentage value.

You can always look at the source, although it looks like it generated source which can often be hard to read (hence why I'm guessing, as I couldn't be bothered sifting through it).
#2
06/24/2005 (11:32 am)
Well thanks for the look see anyway vernon. Basically my question was how do i do what they did. When I first started building my page i tried the table method but my banner graphic was always inconsistent with the text. Basically what would happen in my test is that I would size the side bar to whatever pixel size i thought would fill up the screen. But when I put my text in the next cell, the table would always strech (I guess to accomadate the text). This would leave whitespace between the top of the screen and the banner.

In short, the text would never line up.

So what does the percentage value do? does it scale table elements to match the lenght of the screen?
#3
06/24/2005 (9:53 pm)
I'm still not sure what you're asking.

A standard way to make a site like that is to make a table about 700-780 pixels wide , put your banner stuff in a row at the top, and then maybe have 2 columns in the next row, one you can put your menu in (maybe in an embedded table) and then the other cell your content (maybe more embedded tables).

So if I was to make that site I'd write something like

<table width="750" >
 <tr>
    <td colspan =2>insert banner stuff here, maybe break it up into pieces in another table</td>
 </tr>
 <tr>
    <td width = "300" valign="top">my menu stuff</td>
    <td width = "450" valign="top">my content</td>
 </tr>
</table>

Thats very simplified, but maybe that helps? If not maybe further explain your problem?
#4
07/25/2005 (11:52 am)
Okay thanks for your help vernon i figured it out. Basically I was trying to create an image that ran the span of my table content so that the body was flush with the banner. Thanks to dreamweaver, the program automatically lists the dimensions of each table. So in photoshop i created an image that ran the length of the cell's demension that i wanted the image to reside in. I then set that image to the background image of the cell in the properties manager window. After that, the image was he right size and had no tiling effect. so hopefully this helps someone having the same situation.