The trick with positioning absolutely within another container is to make the container position:relative.
See http://www.sydneyivf.com/forchad.htm Tom -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Chad Renando Sent: Tuesday, 19 July 2005 10:56 AM To: CFAussie Mailing List Subject: [cfaussie] RE: OT: relatively absolute positioning / maintaining table headers The first one has the columns matching (http://203.89.231.233/06/prism/cssforumpost.htm), but I just need to figure out how to move the table around the page, keeping the header at it's pseudo-absolute position at the top of the table. Chad who feels pseudo absolute about many controversial issues On 7/19/05, Andrew Scott <[EMAIL PROTECTED]> wrote: > Chad, > > This has nothing to do with your problem, yet if I see what your doing is > correct in my thinking then if you ever get the table header on the outside > to match the sizes of the table on the other div (scrollable area) let me > know. > > I have been trying to find a solution to have table headers for something we > are working on here for 2 years now with out any success, on the outside so > that the scrollable area would match the, can never get the columns to > match. > > Now this is provided I am right in were your going with this sample. > > > Regards > Andrew Scott > Analyst Programmer > > CMS Transport Systems > Level 2/33 Bank Street > South Melbourne, Victoria, 3205 > > Phone: 03 9699 7988 - Fax: 03 9699 7976 > -----Original Message----- > From: [EMAIL PROTECTED] > [mailto:[EMAIL PROTECTED] On Behalf Of Chad Renando > Sent: Tuesday, 19 July 2005 10:43 AM > To: CFAussie Mailing List > Subject: [cfaussie] OT: relatively absolute positioning / maintaining table > headers > > Nothing to do with CF (yet), working on maintaining table headers > while scrolling table data. > > I am trying to do something like this: > http://203.89.231.233/06/prism/cssforumpost.htm > > Works great, table header stays in the same place. How do I go about > moving the table? If I put it in another table, it does this: > > http://203.89.231.233/06/prism/cssforumpost2.htm > > I figure it has something to do with the absolute positioning. How do > I position a div absolutely relative to another div? > > Code for example 1 is below. > > Chad > who understands if this question is shunned for it's off-topicness > > <html> > <head> > > <style> > table#headers {table-layout:fixed;background:#eea033;} > table#data {table-layout:relative;background:#eea033;} > td, th {vertical-align:top;background:#ffffff;} > </style> > <script language="javascript"> > var rh; > var fr; > var ds; > var hs; > > function syncScroll(e) { > hs.scrollLeft = ds.scrollLeft; > } > > function syncResize(e) { > hs.style.width = ds.offsetWidth-(ds.offsetWidth - ds.clientWidth); > > for( i =0; i < rh.childNodes.length; i++ ) { > rh.childNodes[i].width = fr.childNodes[i].offsetWidth; > } > } > > function init() { > rh = document.getElementById("rh"); > fr = document.getElementById("fr"); > ds = document.getElementById("ds"); > hs = document.getElementById("hs"); > > if ( navigator.userAgent.toLowerCase().indexOf( 'gecko' ) != -1 ) { > hs.style.overflow='-moz-scrollbars-none'; > } > > hs.style.top = ds.offsetTop; > hs.style.left = ds.offsetLeft; > hs.style.visibility = 'visible'; > ds.onscroll=syncScroll; > window.onresize=syncResize; > syncResize(); > } > > </script> > > </head> > > <body onload='init();'> > <div style="overflow:hidden;z-index=3;visibility:hidden;position:absolute;" > id='hs'> > <table cellpadding="0" cellspacing="1" id="headers" width="100%"> > <tr id='rh'> > <th>col1</th> > <th>col2</th> > <th>col3</th> > <th>col4</th> > <th>col5</th> > <th>col6</th> > <th>col7</th> > <th>col8</th> > <th>col9</th> > <th>col10</th> > <th>col11</th> > </tr> > </table> > </div> > <div style="width:90%;height:400px;overflow:auto;z-index=2;" id='ds'> > <table cellpadding="0" cellspacing="1" width="100%" id="data"> > <tr id='fr'> > <th>col1</th> > <th>col2</th> > <th>col3</th> > <th>col4</th> > <th>col5</th> > <th>col6</th> > <th>col7</th> > <th>col8</th> > <th>col9</th> > <th>col10</th> > <th>col11</th> > </tr> > <tr> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>thisisawidthtest-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > </tr> > <tr> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > </tr> > <tr> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > </tr> > <tr> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > </tr> > <tr> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > </tr> > <tr> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > </tr> > <tr> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > </tr> > <tr> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > </tr> > <tr> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > </tr> > <tr> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > <td>this is a width test-- please tell me it works</td> > </tr> > </table> > > > </div> > </body> > </html> > > --- > You are currently subscribed to cfaussie as: [EMAIL PROTECTED] > To unsubscribe send a blank email to > [EMAIL PROTECTED] > Aussie Macromedia Developers: http://lists.daemon.com.au/ > > > > > --- > You are currently subscribed to cfaussie as: [EMAIL PROTECTED] > To unsubscribe send a blank email to [EMAIL PROTECTED] > Aussie Macromedia Developers: http://lists.daemon.com.au/ > --- You are currently subscribed to cfaussie as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] Aussie Macromedia Developers: http://lists.daemon.com.au/ --- You are currently subscribed to cfaussie as: [email protected] To unsubscribe send a blank email to [EMAIL PROTECTED] Aussie Macromedia Developers: http://lists.daemon.com.au/
