Results 1 to 3 of 3

Thread: fixed table when scrolling

  1. #1
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default fixed table when scrolling

    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?

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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.

  3. #3
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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/NetC...mage?Id=1819); BACKGROUND-REPEAT: no-repeat; HEIGHT: 8px"></td>
    </tr>
    <tr>
    <td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetC...mage?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/NetC...mage?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/NetC...mage?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/NetC...mage?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/NetC...mage?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/NetC...mage?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/NetC...mage?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/NetC...mage?Id=1863); BACKGROUND-REPEAT: no-repeat; HEIGHT: 8px"></td>
    </tr>
    <tr>
    <td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetC...mage?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/NetC...mage?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/NetC...mage?Id=1863); BACKGROUND-REPEAT: no-repeat; HEIGHT: 8px"></td>
    </tr>
    <tr>
    <td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetC...mage?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/NetC...mage?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/NetC...mage?Id=1819); BACKGROUND-REPEAT: no-repeat; HEIGHT: 8px"></td>
    </tr>
    <tr>
    <td style="BACKGROUND-IMAGE: url(http://www.myelomaonline.org.uk/NetC...mage?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/NetC...mage?Id=1822); WIDTH: 374px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 19px"></td>
    </tr>
    </tbody>
    </table>
    <div></div>
    </div>
    </div>
    </div>
    </div>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •