Bookmark page
Printable version
Course updatesForum home » Delegate support and help forum » Dreamweaver Training and help » Layer Position and Scrollbar on a table
|
|
|
Bookmark this page|
The UK's most regular Training information: |
|
Welcome. Please choose your application (eg. Excel) and then post your question. Our Microsoft Qualified trainers will then respond within 24 hours (working days). Frequently Asked Questions
Any suggestions, questions or comments? Please post in the Improve the forum thread. |
Layer Position and Scrollbar on a table
Resolved · Medium Priority · Version CS3
Reply
Layer Position and Scrollbar on a table
Hellotwo 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
For upcoming training course dates see: Pricing & availability
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
RE: Layer Position and Scrollbar on a table
Hi RichThe 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">
<!--
DIV{
text-align : center;
padding : 5px;
width : 100%;
height : 400px;
overflow: auto;
}
-->
</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
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
|
 |
|
» Forum post: PowerPoint |
How do I remove immediate box around Pie Chart.
