Best Way to Float a Table of Links on a Page?

HTML & CSS
1

Hi Guys

I want to float a table of links in the left hand col of a page, so the links stay visible when the user scrolls down the page. For example on this men’s shirts site, the yellow table on the left would stay in place and visible as the user scrolls down. Ideally, I would write a little script that I could just quickly add to any page without having to rejig too much existing page content.

What’s the best way to achieve this?

Thanks :cool:

2

Hi,

You could just set the table to display:block and then add position:fixed and it will become fixed.


.tablehighlighted-wrap{
position:fixed;
display:block;
width:260px;
top:200px;
bottom:50px;
overflow:auto;
overflow-x:hidden;	
}

Note that you would need to set the top and bottom positions and use overflow otherwise when the fixed element goes below the fold it will be unreachable. Indeed with the above code chrome still will not apply a scrollbar so you lose the content on short window heights.

To satisfy chrome you would need instead to wrap the table in a div and then it will apply the overflow.


.tablehighlighted-wrap{
position:fixed;
display:block;
width:260px;
top:200px;
bottom:50px;
overflow:auto;
overflow-x:hidden;	
}




[B]<div class="tablehighlighted-wrap">[/B]
<table width="%100" border="0" cellpadding="3" cellspacing="0" class="tablehighlighted">
                <tr>
                  <td align="center"><img src="images/showcase.jpg" width="250" height="60" alt="Mens Shirts" title="Mens Shirts" /></td>
                </tr>

etc......
etc.....
</tr>
</table>
</div>

Of course that means you would have to re-position your footer because it would scroll underneath and the footer would need to be moved to the right section instead.

However, IE is a problem because you have no doctype and that sends all versions of IE back to the last century and they do not understand position:fixed. If you added a full doctype then the above code would work for ie7+ but likely cause other errors if you have taken advantage of quirks mode anywhere.

All in all as mentioned by others a re-design to current standards would be your best bet :slight_smile:

3

Thanks for your comments guys.

4

I tried editing the source, and adding a div with position: fixed didn’t work.

5

I would have thought you should be able to create a <div> (or whatever element is appropriate) outside the layout table, and slap a position:fixed on it. Then you just have to make sure that your layout table leaves enough space to avoid overlapping it.

Disclaimer: this is just me thinking aloud, I haven’t tried it so it might not work. And C. Ankerstjerne is right that you’ll be much better off in the long run if you change from table-based to CSS-based layouts.

6

You could probably write a script which did it, but it would take longer than re-writing the design. This would only make the site even bulkier than it already is anyway, so it’s not a good solution either.

Based on the design, I wouldn’t think a re-write should take longer than a day, at most, so it’s certainly something you should consider. Plus, if it’s template-based, you could just upload the template to the other websites you have.

Using a pop-up window is definitely a no-go. There’s never any reason to open pages in a new window, automatically or manualle.

7

Thanks for the reply.

So, to confirm, you’re saying there’s no way to do it unless I recode to a non-table based layout? I have a lot of sites with this table-based template, so I’m not so keen to do that!

Is there no way of adding a floating DIV or something without changing the underlying layout? Maybe I’ll have to use a pop-up window.

Rgds

8

With non-table-based websites, this is very easy: position: fixed. With a table-based website like yours, however, you’re out of luck.

You should seriously consider re-writing the HTML of the entire website to a non-table-based layout, as it will be a whole lot easier to work with.

9