...

View Full Version : How to get overflow in this table cell?



kippie
07-15-2003, 12:04 PM
In the HTML below I use a table structure so that the page adapts itself more or less to the resolution of the users monitor. With 1024x768 the image (left side) becomes bigger than with 800x600 and the width of the cell with "head" becomes wider with "1024" than with "800". Because the text under the "head" is much I would like to make an overflow for that text (with a scrollbar appearing when the text is too big). I know this can be done by using a layer with overflow:auto (see #tekst), but as far as I know you have to fix than the width of that layer and then the text does not adapt itself anymore to the reolution of the user. Is there a way to make this flexible layer flexible or is there another solution?

This is the HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<style type="text/css"><!--
#foto { position: relative; z-index: 15; top: 10px; width: 110px; height: 105px; visibility: visible; layer-background-color: #FFFFFF; }
#layer1 { z-index: 2 }
#layer2 { z-index: 1 }
#man { position: relative; z-index: 16; top: -65px; left: 225px; width: 78px; height: 110px; visibility: visible }
#overzicht { position: relative; z-index: 12; top: 90px; left: 0px; width: 100px; height: 25px; visibility: visible; layer-background-color: #FFFFFF; }
#spiraal { position: relative; z-index: 12; top: 10px; left: 220px; width: 124px; height: 105px; visibility: visible; layer-background-color: #FFFFFF; }
#spreuk { position: relative; z-index: 12; top: 0px; left: 0px; width: 123px; height: 75px; visibility: visible; layer-background-color: #FFFFFF; }
#tekst { padding-right: 15%; position: relative; z-index: 15; top: -5px; left: 0px; width: 540px; height: 248px; overflow: auto; visibility: visible }
.kop2 { color: #ffae06; font: bold 11px/7px Arial, Helvetica, sans-serif }
.kop3 { color: #ffae06; font: bold 15px/12px Arial, Verdana, Helvetica, sans-serif }
.kop4 { color: #ffae06; font: bold 11px/6px Arial, Verdana, Helvetica, sans-serif }
.kop5 { color: #ffae06; font: bold 15px/38px Arial, Verdana, Helvetica, sans-serif }
.overzicht { color: #4c5ea1; font: 12px/12px Arial, Helvetica, sans-serif; text-decoration: underline }
.spreuk { color: #ffae06; font: 10px/10px Arial, Helvetica, sans-serif }
.spreuklinks { color: #ffae06; font: 10px/10px Arial, Helvetica, sans-serif; text-align: left }
.spreukrechts { color: #ffae06; font: 10px/10px Arial, Helvetica, sans-serif; text-align: right }
.tekst { color: #4c5ea1; font: 11px/15px Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif; text-align: justify }
body { scrollbar-3dlight-color: #FFFFFF;; scrollbar-arrow-color: #FFAC00;; scrollbar-darkshadow-color: #FFFFFF;; scrollbar-face-color: #FFFFFF;; scrollbar-highlight-color: #FFFFFF;; scrollbar-shadow-color: #F4C13E;; scrollbar-track-color: #FFFFFF; }-->
</style>
</head>

<body bgcolor="white" text="black">
<table border="1" bordercolor="blue" width="100%" height="100%" align="center">
<tr height="5%">
<td height="5%"></td>
</tr>
<tr height="70%">
<td align="center" height="70%">
<table border="1" bordercolor="red" width="90%" height="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<table border="1" bordercolor="purple" width="100%" height="100%">
<tr height="100%">
<td align="left" width="30%" height="100%" valign="top"><span class="kop4"><br>
Text1</span>
<table border="1" bordercolor="green" width="30%">
<tr>
<td width="100%"><img src="(Empty Reference!)" width="100%"></td>
</tr>
<tr>
<td width="100%">Text2</td>
</tr>
</table>
</td>
<td align="right" width="100%" height="100%" valign="top">
<table border="1" bordercolor="orange" width="70%">
<tr>
<td width="100%"><span class="kop5">Head</span>
<div class="tekst">
This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.This is text. This is text. This is text. This is text. This is text. This is text.</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</td></tr>
<tr height="19%">
<td height="19%"></td>
</tr>
</table>
</body>

</html>

Kippie

Danne
07-15-2003, 06:42 PM
To adjust the height of the div, maybe you can use the div.scrollHeight property. And the document.body.scrollHeight to see when to adjust the height.




function adjustHeight() {
if (document.body.scrollHeight > document.body.clientHeight) {
var minHeight = 100; // Minimum height of the div
var div=document.getElementById("divID");
var h=div.scrollHeight-(document.body.scrollHeight - document.body.clientHeight);
div.style.height=Math.max(h, minHeight)+"px";
}
}



I didn't test this, I think it shouild work...:)

Roy Sinclair
07-15-2003, 07:39 PM
Change: <div class="tekst"> to <div id="tekst">

or #tekst { to .tekst {


You're declaring an id based rule but are trying to use it as a class.

kippie
07-16-2003, 01:30 AM
Thanks

Kippie



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum