Layer Position and Scrollbar on a table

Resolved · Medium Priority · Version CS3

Wed 2 Jul 2008, 17:00 Delegate Duncan said...

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

Layer Position and Scrollbar on a table

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

Sat 5 Jul 2008, 20:25 Trainer Rich said...

RE: Layer Position and Scrollbar on a table

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">

<!--

body {

text-align: center;

}

#maincontent {

	text-align: left;

	width: 600px;

	background-color: red;

}



-->

</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">

<!--

DIV{

  text-align : left;

  padding : 5px;

  width : 100%;

  height : 4em;

  overflow: auto;

}

-->

</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

Wed 9 Jul 2008, 17:24 Delegate Duncan said...

RE: Layer Position and Scrollbar on a table

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

Tue 15 Jul 2008, 09:08 Trainer Rich said...

RE: Layer Position and Scrollbar on a table

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