Layer Position and Scrollbar on a table

The UK's most regular instructor-led training courses.
Training information: dreamweaver training in london · Dreamweaver training · Adobe dreamweaver training

Resolved · Medium Priority · Version CS3

Duncan has attended:
Dreamweaver 8 Introduction course
Dreamweaver 8 Intermediate course

by - delegate Duncan bronze contributer [25 posts] (2008 Jul 2 Wed, 17:00) Reply

Hello
two probs. 1. I have made my index page (www.therollingimage.com) using a table, the news part is a layer with an iFrame. I really wanted all of my content in the middle of the screen, but if i centralise the table, and manually move the layer then the layer will not be in the same place on a smaller screen. So how do i make its position relative to the table location?

And No.2, (and this is really simple but i've totally forgotten) if i'm putting text straight in to a table (450px high) how do i add a verticle scroll bar to the table so the viewer scrolls the table text as opposed to the entire page?

Thanks

Duncan

Version	Date	Location	Places available	Book	Next place rate:
Dreamweaver 8 Intermediate 1 day course
Version	Date	Location	Places available	Book	Card	Invoice
8	2009 Jan 20 Tue	Bloomsbury	8	book now	£175	£225
8	2009 Apr 24 Fri	Bloomsbury	8	book now	£175	£225
8	2009 Jul 15 Wed	Bloomsbury	8	book now	£175	£225
8	2009 Aug 28 Fri	Bloomsbury	8	book now	£175	£225
8	2009 Oct 6 Tue	Bloomsbury	8	book now	£175	£225

RE: Layer Position and Scrollbar on a table

by - trainer Rich platinum contributer [744 posts] (2008 Jul 5 Sat, 20:25) Reply

Hi Duncan,

1) You're using Absolute Positioning for all your layers. So you'll need to either let the layers sort themselves out, or use table layout.

DIV layout: set your body definition to be text align Center (will centre everything in body). Then have a div, but set text align to be Left. This is a standard method that may work for you. See example below:
<html> <head> <style type="text/css">  </style> </head> <body> <div id="maincontent">This is main content <iframe height="200" width="200">Whatever</iframe> </div> </body> </html>

Table layout: have a 1 celled table at 100% width and height.
eg.
<table width="100%" height="100%"><tr><td> ALL YOUR STUFF INCLUDING OTHER TABLES IF REQUIRED </td></tr></table>

The first method is recommended but i would recommend testing in all browsers.

2) I must admit I've never needed to scroll just a table cell. Anyway, I found a way to do it with CSS. Here is the sample code:
<html> <head> <title>table with scroll</title> <style type="text/css">  </style> </head> <body> <table cellpadding="0" cellspacing="0" border="1"> <thead> <tr> <th>stuff in the thead</th> </tr> </thead> <tfoot> <tr> <th>stuff in the tfoot</th> </tr> </tfoot> <tbody> <tr> <td> <div>scroll stuff in the tbody<br> scroll stuff in the tbody<br> scroll stuff in the tbody<br> scroll stuff in the tbody<br> scroll stuff in the tbody<br> scroll stuff in the tbody<br> scroll stuff in the tbody<br> scroll stuff in the tbody<br> scroll stuff in the tbody<br> scroll stuff in the tbody<br> scroll stuff in the tbody<br> </div> </td> </tr> </tbody> </table> </body> </html>

Let me know how you get on.

Regards, Rich

Source: http://allmyfaqs.net/faq.pl?Scrolling_table_cell

RE: Layer Position and Scrollbar on a table

by - delegate Duncan bronze contributer [25 posts] (2008 Jul 9 Wed, 17:24) Reply

Hi Rich
The second one should work ok. One thing though, when i stick in a lot of text two scroll bars appear side by side. If i remove half of the text one disappears. Try this, then remove half and see if the same happens.

<html>
<head>
<title>table with scroll</title>
<style type="text/css">

</style>
</head>
<body>
<table width="600" height="600" border="1">
<tr>
<td height="73"> </td>
</tr>
<tr>
<td><div>
<div>blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblalahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blblahblblah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblalahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blblahblah ahlahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblalahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blblahblblah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblalahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blblahbla </div>
</div></td>
</tr>
<tr>
<td height="25"> </td>
</tr>
</table>
<p> </p>
</body>
</html>

Does it have anything to do with this?

DIV{
text-align : center;
padding : 5px;
width : 100%;
height : 400px;
overflow: auto;
}

Thanks
Duncan

RE: Layer Position and Scrollbar on a table

by - trainer Rich platinum contributer [744 posts] (2008 Jul 15 Tue, 09:08) Reply

Duncan,

It's cause you've got two div tags, one nested inside the other.

<div><div></div></div>

Remove the middle two and it works.

And yes, it's to do with the CSS (redefining the DIV tag). If you wanted the two div tags to stay (for other style reasons), then you could make your own style up like this:

#scrollme {
text-align : center;
padding : 5px;
width : 100%;
height : 400px;
overflow: auto;
}

First div to scroll:

<div id="scrollme"><div>blah blah</div></div>

Second div to scroll:

<div><div id="scrollme">blah blah</div></div>

Hope that makes sense? If not, experiment a little, then get back to me.

Regards, Rich