fixed table when scrolling [Archive]

Roar

04-03-2008, 08:39 AM

I am looking to adapt the html on a site so that the table on the left hand side of my site is static as I scroll down the table on the right hand side. I use a CMS and the creators of the site used tables.

The table I would like to remain static sits to the left of the site and a wider table which I hope to scroll as it is longer sits to the right of it.

I can provide all css and html but firstly does anyone know if this is acheivable?

codeexploiter

04-03-2008, 08:59 AM

Are you trying to achieve something like this website?

http://www.quirksmode.org/elsewhere/index.html

Load the above page and you can see that there are two hyperlinks one at the left side and one at the right side
- show site navigation
- show page contents.

If you scroll down/up the page these links are visible always. If you are looking for an effect like this post the details.

Roar

04-03-2008, 09:32 AM

Yes, I think similar but with a whole table.

I have highlighted the table I hope can remain static in the html below. It may be a big ask to do this kind of thing.

I can provide the css if required.

<div id=Container>
<div id=page>
<div id=topmenunav style="WIDTH: 750px">
<table style="WIDTH: 750px; BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 border=0>
<tbody>
<tr>
<td><img src="http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1930"></td>
<td rowSpan=2>
<div align=center src_cetemp="http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=2070">
<div>
<div align=center src_cetemp="http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=2070"><a style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" href="blank.html" target="" runat="server" pid="1143" tab="0"><img style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" src="http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=2070"></a></div>
</div>
</div>
</td>
</tr>
<tr>
<td><img src="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" align=right runat="server" template_pane="1"></td>
</tr>
</tbody>
</table>
<table style="WIDTH: 750px; BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 border=0>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1819); BACKGROUND-REPEAT: no-repeat; HEIGHT: 8px"></td>
</tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1820); BACKGROUND-REPEAT: repeat-y; vAlign: top">
<div align=center src_cetemp="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"><img src="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"></div>
</td>
</tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1822); WIDTH: 374px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 19px"></td>
</tr>
</tbody>
</table>
<table style="FLOAT: left; BORDER-COLLAPSE: collapse; HEIGHT: 371px" cellSpacing=0 cellPadding=0 width=175 border=0>
<tbody>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1884); BACKGROUND-REPEAT: no-repeat; HEIGHT: 24px"><img src="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"></td>
</tr>
<tr>
<td style="HEIGHT: 4px"></td>
</tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1861); BACKGROUND-REPEAT: no-repeat; HEIGHT: 116px">
<div align=center src_cetemp="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"><img src="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"></div>
</td>
</tr>
<tr>
<td style="HEIGHT: 4px"></td>
</tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1861); BACKGROUND-REPEAT: no-repeat; HEIGHT: 116px">
<div align=center src_cetemp="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"><img src="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"></div>
</td>
</tr>
<tr>
<td style="HEIGHT: 4px"></td>
</tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1861); BACKGROUND-REPEAT: no-repeat; HEIGHT: 116px">
<div align=center src_cetemp="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"><img src="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"></div>
</td>
</tr>
<tr>
<td style="HEIGHT: 4px"></td>
</tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1861); BACKGROUND-REPEAT: no-repeat; HEIGHT: 116px">
<div align=center src_cetemp="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"><img src="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"></div>
</td>
</tr>
</tbody>
</table><table style="FLOAT: right; BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 width=560 border=0>
<tbody>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1863); BACKGROUND-REPEAT: no-repeat; HEIGHT: 8px"></td>
</tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1865); BACKGROUND-REPEAT: repeat-y">
<div align=center src_cetemp="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"><img src="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"></div>
</td>
</tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1866); BACKGROUND-REPEAT: no-repeat; HEIGHT: 8px"></td>
</tr>
<tr>
<td style="HEIGHT: 4px"></td>
</tr>
</tbody>
</table>
<table style="FLOAT: right; BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 width=560 border=0>
<tbody>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1863); BACKGROUND-REPEAT: no-repeat; HEIGHT: 8px"></td>
</tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1865); BACKGROUND-REPEAT: repeat-y" vAlign=top>
<div align=center src_cetemp="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"><img src="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"></div>
</td>
</tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1866); BACKGROUND-REPEAT: no-repeat; HEIGHT: 8px"></td>
</tr>
</tbody>
</table>
<div id=footer2>
<table style="WIDTH: 750px; BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 border=0>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1819); BACKGROUND-REPEAT: no-repeat; HEIGHT: 8px"></td>
</tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1820); BACKGROUND-REPEAT: repeat-y; vAlign: top">
<div align=center src_cetemp="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"><img src="http://www.myelomaonline.org.uk/NetCommunity/view.image?pane=1" runat="server" template_pane="1"></div>
</td>
</tr>
<tr>
<td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetCommunity/view.image?Id=1822); WIDTH: 374px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 19px"></td>
</tr>
</tbody>
</table>
<div></div>
</div>
</div>
</div>
</div>