SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    position:absolute; resize issue

    I have a table with 2 rows, the top has links and the bottom contains the results to the clicks from above.

    In the results area, i want this to resize based on the length of the answer. In this example i want the background color to include the results. I think that the root of this issue is the position:absolute; that i am using, but that would not allow the results to show in the same location.

    thoughts?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #background
    {
    background-color:#CCCCCC;
    }

    .background
    {
    background-color:#CCCCCC;
    }

    .result /* position for results tab*/
    {
    position:absolute;
    overflow:auto;
    display:block;
    width: 200;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    function MM_showHideLayers() { //v9.0
    var i,p,v,obj,args=MM_showHideLayers.arguments;
    for (i=0; i<(args.length-2); i+=3)
    with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v=='hide')?'hidden':v; }
    obj.visibility=v; }
    }
    //-->
    </script>
    </head>

    <body onload="MM_showHideLayers('result-1','','show','result-2','','hide')">


    <table width="500" border="0" align="center" cellpadding="0" cellspacing="0" class="background">
    <tr>
    <td><div align="center"><a href="#" onclick="MM_showHideLayers('result-1','','show','result-2','','hide')">Link 1</a></div></td>
    <td><div align="center"><a href="#" onclick="MM_showHideLayers('result-1','','hide','result-2','','show')">Link 2</a></div></td>
    </tr>
    <tr>
    <td colspan="2">
    <div class="result" id="result-1">Copy 1 test <br />test <br />test <br />test <br />test <br />test <br /></div>
    <div class="result" id="result-2">Copy 2 test <br />test <br />test <br /></div></td>
    </tr>
    </table>

    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I'm not sure what you mean but don't you just remove the absolute positioning and use display instead of visibility.

    Something like this (but javascript isn't my subject and your versions seems to be broken anyway ).
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #background
    {
    background-color:#CCCCCC;
    }
    
    .background
    {
    background-color:#CCCCCC;
    }
    
    .result /* position for results tab*/
    {
    overflow:auto;
    display:block;
    width: 200px;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    function MM_showHideLayers() { //v9.0
    var i,p,v,obj,args=MM_showHideLayers.arguments;
    for (i=0; i<(args.length-2); i+=3)
    with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'block': v=(v=='hide')?'none':v; }
    obj.display=v; }
    }
    //-->
    </script>
    </head>
    <body onload="MM_showHideLayers('result-1','','show','result-2','','hide')">
    <table width="500" border="0" align="center" cellpadding="0" cellspacing="0" class="background">
        <tr>
            <td><div align="center"><a href="#" onclick="MM_showHideLayers('result-1','','show','result-2','','hide')">Link 1</a></div></td>
            <td><div align="center"><a href="#" onclick="MM_showHideLayers('result-1','','hide','result-2','','show')">Link 2</a></div></td>
        </tr>
        <tr>
            <td colspan="2"><div class="result" id="result-1"> Copy 1 test <br />
                    test <br />
                    test <br />
                    test <br />
                    test <br />
                    test <br />
                </div>
                <div class="result" id="result-2">Copy 2 test <br />
                    test <br />
                    test <br />
                </div></td>
        </tr>
    </table>
    </body>
    </html>
    Also remember that align="center" is deprecated in strict and should be avoided. (also use paragraphs for your content and not breaks although I realise the above was just for example.)

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, this was jsut a quick example put together for the post. i will take more time in my code next time.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In hopes of a better explanation.

    I have a main-content div and this is going to change sizes based on selections made on the page. Below this main-content div, i have a footer. I want this footer to sit right below the main-content and change position based on the size of the main-content. I can not seem to find out how to make the footer move with the change to the container.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    If I understand you correctly then my example above will do just that.

    You cannot use absolute positioning when you want to maintain the flow of the page with variable height containers which is why I removed the absolute positioning and allowed the elements to take up space on the page.

    I then changed the visibility:hidden in the JS to display:none because display:none completely removes the element from the page whereas visibility just hides it but the element still takes up space on the page.

    Try the code above and if its not what you meant then you can explain why and we can look again


Bookmarks

Posting Permissions

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