Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to get overflow in this table cell?

    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

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    São Paulo, Brazil
    Posts
    367
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    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...
    /Daniel

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks

    Kippie


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •