Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to get overflow in this table cell?

Status
Not open for further replies.
kippie

kippie

Technical User
Nov 8, 2001
158
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=&quot;content-type&quot; content=&quot;text/html;charset=iso-8859-1&quot;>
<meta name=&quot;generator&quot; content=&quot;Adobe GoLive 4&quot;>
<style type=&quot;text/css&quot;><!--
#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=&quot;white&quot; text=&quot;black&quot;>
<table border=&quot;1&quot; bordercolor=&quot;blue&quot; width=&quot;100%&quot; height=&quot;100%&quot; align=&quot;center&quot;>
<tr height=&quot;5%&quot;>
<td height=&quot;5%&quot;></td>
</tr>
<tr height=&quot;70%&quot;>
<td align=&quot;center&quot; height=&quot;70%&quot;>
<table border=&quot;1&quot; bordercolor=&quot;red&quot; width=&quot;90%&quot; height=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;>
<tr>
<td>
<table border=&quot;1&quot; bordercolor=&quot;purple&quot; width=&quot;100%&quot; height=&quot;100%&quot;>
<tr height=&quot;100%&quot;>
<td align=&quot;left&quot; width=&quot;30%&quot; height=&quot;100%&quot; valign=&quot;top&quot;><span class=&quot;kop4&quot;><br>
Text1</span>
<table border=&quot;1&quot; bordercolor=&quot;green&quot; width=&quot;30%&quot;>
<tr>
<td width=&quot;100%&quot;><img src=&quot;(Empty Reference!)&quot; width=&quot;100%&quot;></td>
</tr>
<tr>
<td width=&quot;100%&quot;>Text2</td>
</tr>
</table>
</td>
<td align=&quot;right&quot; width=&quot;100%&quot; height=&quot;100%&quot; valign=&quot;top&quot;>
<table border=&quot;1&quot; bordercolor=&quot;orange&quot; width=&quot;70%&quot;>
<tr>
<td width=&quot;100%&quot;><span class=&quot;kop5&quot;>Head</span>
<div class=&quot;tekst&quot;>
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=&quot;19%&quot;>
<td height=&quot;19%&quot;></td>
</tr>
</table>
</body>

</html>

Kippie

 
Sort by date Sort by votes
Hello Kippie,

I had the same problem, but I could solve it like this:

I had a startpage in which I determined the window properties of the user with the javascript parameters screen.height and screen.width. You can than use these parameters to determine the fix height and width of the layer where you have implemented the overflow property.

There are also some other parameters to determine the size of the visible screen in your browser ( so the screen size minus the space occupied by menu bar, windows start bar ,...).

Example for the startpage:

<script language=&quot;JavaScript1.2&quot;>
function doit() {
document.test.action = '???.htm?sizeh=' + screen.height + '&sizev=' + screen.width ;
document.test.submit('go');
}
</script>

<form name=&quot;test&quot; action=&quot;???.cfm&quot; method=&quot;post&quot;>

<input type=&quot;button&quot; name=&quot;button1&quot; value=&quot;Next&quot; onClick=&quot;doit();&quot;>

</form>

<script language=&quot;JavaScript1.2&quot;>
document.write('height: ' + screen.height);
document.write('width: ' + screen.width);
</script>

I hope this will help you!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
843
lexer
lexer
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
760
coldbohemia
coldbohemia
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
969
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
858
malpa
malpa

Part and Inventory Search

Sponsor

Back
Top