|
HTML - Looking For A Scrollable Panel For A Table
I have a Table and I need to have it in some kind of scrollable panel. Is there such a scrollable component?
Thanks... Similar TutorialsHI: I have a very long table (with 5 columns). I wish to have this table (vertical size="350px") to have a scroll bar on the right-side, so that the user can scroll down thru the table, but yet still see the 'div' below it on the viewport. Suggestions please on a 'scrollable' table. Thanks, -Mel Smith Despite reading multiple posts on "scrollable" table cells on the forums, I've not yet quite found the answer to my question, so hopefully I can get some feedback from all viewers out there! I and some friends run a small Catholic arts and crafts website (www.illuminatedink.com) through which we sell products that we create. I've based the page layout on a table instead of frames or iframes. The table has 3 cells in it. The entire top "banner area" of the screen is one cell. Below that on the left we have the naviagation menu cell. The main content that someone is trying to view appears in the remaining lower right cell (also the largest). This page works great on all the computers at my house (3 of them) and on most other computers as well. I have yet to test this in IE 7.0, but if someone else has that browser, please let me know what happens. So, what's the problem you ask? That lower right table cell where all the content appears does not work for everyone. I just got another complaint today that no scroll bar appears and the person can only see what's in the top of cell, there is no "scrollability". Here is a sample (with notes made by me in ** NOTE ** format). The notes are of course not in the actual code, I am showing only the code really matters here. Code: <BODY STYLE="margin-top: 0px; margin-left: 0px">
<TABLE CELLPADDING=0 CELLSPACING=0 HEIGHT=590 WIDTH=1000>
<TR HEIGHT=90>
<TD WIDTH=1000 COLSPAN=2 STYLE="background-image:url('http://www.illuminatedink.com/images/background/banner.jpg')">
 
</TD>
</TR>
<TR HEIGHT=500>
<TD VALIGN=top WIDTH=200 STYLE="background-image:url('http://www.illuminatedink.com/images/background/menu_bar.jpg');background-repeat:no-repeat">
<TABLE ALIGN="center" CELLSPACING=0 CELLPADDING=0>
**Navigation menu on the left side goes here**
</TABLE>
</TD>
<TD WIDTH=800 VALIGN="top">
<DIV STYLE="overflow:auto;height:490px;width:800px;position:absolute;left:200;padding-right:30px; padding-left:0px"><MAP NAME="page_links">
**All code for the scrollable cell in the lower right goes here**
</DIV>
</TD>
</TR>
</TABLE>
</BODY>
So, can anyone possibly tell me why this would have a scroll bar in some browers and not in others? Or does anyone have any code changes I could make that may guarantee that they will get a scroll bar in that lower right cell? The complaints that I have received mainly seem to be from Mac users using IE for Mac. But I just had someone who had a brand new Dell with Windows XP Prof. and the most recent IE 6, which is exactly the configuration I run, but didn't get a scroll bar when I did. Ideas? Thank you! Hi Guys How do I make scrollable divs ? Like the ones in hotmail contacts when writing a new email. I'm not sure where this should be listed so I'm starting here - Here's the website I'm working on - www.drscopesnaturalhealthcare.com - I'd like to add a textbox under the image below the "news" lable that has a scroll bar on it so it can have quite a bit of content in it but remain a constant size. I know I could do this with frames, but I don't want to use frames. I think I can do this with CSS, but I'm not sure how. Is there an easier way or can some one point me to the element to use in CSS? Thanks. cybergrrl Hi all, I'm quite new to webpage development in HTML & using Dreamweaver 8.0. I am trying to put a small scrollable window within the main webpage, so that the text inside this scrollable window can be scrolled vertically without having to scroll the main window up & down. The webpage I'm building is an FAQs. An example of what I mean can be found on the following webpage : http://www.xe.com/ucc/ where the user can scroll vertically to see more currency options. Please refer to my two screen captures where I've shown the code I used & the screen capture from the browser window. I only want the scrollable window to scroll vertical. Much thanks in advance for your expert help. Andrew Not sure if this is possible or not, but I created a scroll box, which contains a title and then text underneath it. Is there a way to limit the scrollable area, so the title is always fixed at the top of the scroll box and the text scrolls up and disappears just below the title? If its not possible in HTML/CSS, then how else can I do this? Thanks for your help in advance. Hi everyone, I'm new to this forum so please correct me if I'm doing anything wrong or if this post is in the wrong section. I have a custom template for my website which allows you to scroll down and view my photographs. I would like to keep it this way BUT I would like to implement Google Ads on either sides of my centered content. I want these ads to be stationary even if a viewer is scrolling to the bottom of my site. Is this possible, and even then, is it hard to do? I really appreciate your help. Here is the link to my website if that helps. http://floatingcity.tumblr.com Cheers, Kyle aaaaaaaaaaaaaaaaaaaaaaa Hi, I have a div element, that will contain various debug/warning messages from Javascript. If I set it's height to 100%, so to fill the parent element, it overlaps the parent element. How can I automatically set the height, without manually setting the height in pixels? Many thanks for any suggestions. Regards Aaron HTML Code: <div style="border-style: solid; border-width: 3px; margin: 0px; padding: 0px; z-index: 1000; position: fixed; top: 252px; left: 582px; width: 494px; height: 202px; background-color: white; display: block;"> <h1 style="width: 100%; height: 20px; font-size: 12px; display: block; border-bottom-width: 2px; border-bottom-style: solid; vertical-align: middle;"><img src="https://127.0.0.1/beer2/i/clear.png" style="cursor: pointer;" alt="clear"/><img src="https://127.0.0.1/beer2/i/min.png" style="cursor: pointer;" alt="Minimise"/> Debug Window</h1> <div style="overflow: scroll; width: 100%; height: 100%; font-size: 12px; position: static;"> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> </div> </div> How i create a frame type space( which is scrollable ) similar to seperate window inside a webpage ? Hi I'm brand new here. Trying to figure out how exactly to make a panel like the one shown on the right in my site layout. Any advice would be helpful. http://kyonn.freehostia.com/SitePlan/Layout.jpg Hey guys, I'm looking for a script, which I think can be made HTML, that will allow a drag-able side panel. Like a space on the 'left' side of my page that can be typed in (in my case, I'm using it for a nav bar). And the bar dividing the page and the frame is drag-able when it is online, so you can change it's size. If anyone has a script that can be used for this, or can help me make something like this, please respond Could someone please give me some sample code to show how to create a tabbed panel in html>? thanks a lot! After some good help from Horus_Kol i made a panel to the left on my website: But now i created alot of stuff on my website, and then i found that something was wrong if there is too much text on the page (sorry, i can't explain it so good ): here is the HTML Code: Code: <html> <head> <title>Urne's Website - About</title> <link rel="stylesheet" type="text/css" href="style/style2.css"> <div id="container" style="width:100%;"> <div id="header"> </div> <div id="left" style="width:30%;float:left;"> <a href="index.html"><img alt="Home2 (15K)" src="img/Home2.png" height="50" width="200" border= "0px"/></a> <p><a href="Community.html"><img alt="Community (15K)" src="img/Community.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Tracks.html"><img alt="Tracks (17K)" src="img/Tracks.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Videos.html"><img alt="Videos (15K)" src="img/Videos.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Images.html"><img alt="Images (15K)" src="img/Images.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Other.html"><img alt="Other (13K)" src="img/Other.png" height="50" width="200" border= "0px"/></a><p/> <p><a href="Trackup.html"><img alt="Track Updates" src="img/trackup.png" height="50" width="200" border= "0px"/></a><p> <p><a href="Settings.html"><img alt="Settings (13K)" src="img/Settings.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Search.html"><img alt="Search (14K)" src="img/Search.png" height="50" width="200" border= "0px"/></a><p> <p><a href="About.html"><img alt="About (12K)" src="img/About.png" height="50" width="200" border= "0px"/></a></p> </div> </head> <body> <div id="main" style="width:70%;"> <h1>Other Things</h1> </div> </body> <div id="footer"> <img alt="Pretty Plant" src="img/Pretty+Plant.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Pretty Plant 3D Model</h3></u></b></p> <p>This plant i made in September, and was made for this website. You can use it if you want to your track, or any other thing, but if you want to upload it to your website, then please contact me on my e-mail (look in the readme.txt that comes with the plant). <br>Convert the plant to any other format if you want, but please keep the readme.txt unmodified, and safe.</br> <p><a href="dload/Pretty+Plant.zip"><img alt="Download Pretty+Plant.zip" src="img/Download.png" height="50" width="200" border= "0px"/></a> <hr /> <img alt="Urne's World infodocument" src="img/No+pic.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Urne's World Infodocument</h3></u></b></p> <p>The "Uworld" Project is still going around, and in the beginning i was planning alot, about how the track should be etc. <br>The infodocument contains pictures, and track information about the 5 tracks Urne's World include. Urne's World should be aviable for Download in October/November 2008.</br> Enjoy the reading! </p> <p><a href="dload/UW+Project.doc"><img alt="Download UWorld Project.doc" src="img/Download.png" height="50" width="200" border= "0px"/></a> <hr /> <img alt="Bone Island Light Pack" src="img/No+pic.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Bone Island Light Pack</h3></u></b></p> <p>Alot of people uses wrong Brightness & Contrast settings wich will cause alot of darkness in Bone Island, so i made this ligth pack to help all thoose who cant drive this amazing track because it's too dark. <br>Hope it helps!</br></p> <p><a href="http://www.mediafire.com/?xvy1gjwxll1"><img alt="FC" align="right" src="img/FC.png" height="50" width="200" border= "0px"/></a> <a href="ihttp://www.mediafire.com/?v2ygm4n7cpu.ico"><img align="right" alt="Extreme" src="img/Extreme.png" height="50" width="200" border= "0px"/></a></p> <hr /> <img alt="Other Pisa Grandprix GFX" src="img/new+pisa.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Other Pisa Grandprix GFX</h3></u></b></p> <p>Before me & Crone made the update pack for Pisa Grandprix, Crone took this nice picture, to use as GFX for Pisa Grandprix. Please feel free to download, if you like this one better than the 2 other images!</p> <p><a href="img/new+pisa.png"><img alt="Full Size" src="img/FS.png" align="right" height="50" width="200" border= "0px"/></a> </div> </div> Is there any way to make this work so everything is aligned the way that the other text are? Hi The sidebar appears on the bottom of the website I'm editing when I try to add it.I'm not the original webmaster,he abandoned it and I'm helping my friend redo it.We're both inept at html. InstanceBeginEditable name="EditRegionRightSide" --> <!-- InstanceEndEditable --> <h1>MySpace Page</h1> <p><a href="http://www.myspace.com/kellimaroney" target="myspace"><img src="graphics/myspace.gif" alt="Click Here to visit my MySpace page" border="0"></a></p> <p>Don't forget to visit me at <a href="http://www.myspace.com/kellimaroney" target="myspace">myspace.com/kellimaroney</a></p> <div align="center"><br> Check out the <a href="http://movies.groups.yahoo.com/group/kellimaroneyfans/?yguid=188954506" target="_blank">Kelli Maroney Fan Club @ Yahoo! Groups</a><br> </div> <div> <h1 align="center">Follow me on...</h1> <ul class="hnav" style="margin-left: 30px;"> <li><a href="http://twitter.com/Kellimaroney" title="Twitter"><img src="images/twitter.gif" alt="Twitter" width="32" border="0" height="32"></a></li> <li><a href="http://www.facebook.com/kellimaroney?ref=profile" title="Facebook"><img src="images/facebook.gif" alt="Kelli's Facebook Page" width="32" border="0" height="32"></a></li> <li><a href="http://www.youtube.com/user/lovesnerds" title="YouTube"><img src="images/youtube.gif" alt="Kelli's YouTube Channel" width="32" border="0" height="32"></a></li> </ul> </div> <br style="clear: both;"> <br> <div align="center"> <script type="text/javascript"><!-- amazon_ad_tag="kellsonl-20"; amazon_ad_width="120"; amazon_ad_height="600"; amazon_color_border="206BA2"; amazon_color_logo="FFFFFF"; amazon_color_link="206BA2"; amazon_ad_logo="hide"; amazon_ad_title="The Official Kelli Maroney Amazon.Com Store"; //--></script> <script type="text/javascript" src="http://www.assoc-amazon.com/s/asw.js"></script> </div> <script type="text/javascript" src="http://www.assoc-amazon.com/s/link-enhancer?tag=wwwkellimaron-20"> </script> <noscript> <img src="http://www.assoc-amazon.com/s/noscript?tag=wwwkellimaron-20" alt="" /> </noscript> </div></td> </tr> </tbody></table> <p> </p> <table width="798" border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td><img src="graphics/t_photo.gif" width="798" height="8"></td> </tr> Hi Sorry had to re-post this I put it in the wrong forum topic before. I am a college student creating a website for a school and was wondering if there is an easy way to create a login panel that the user can update a news section on the home page. For example may want to say school closed for the day. I have never made a website before and aren't that good at it so I was wondering if theres an easy way. I am using dreamweaver. Thanks in advance http://www.quickscriptz.ca/v3/index.php Ive got a problem with a dj panel from there! I cant create a request form. Can someone download it and take a look im useless. Ive tried almost everything Alright, well I'm pretty new to web design... Just started using HTML a couple months ago and I want to make a login panel for my website. This is what I got... I searched Google and used a simple cut and paste: Cut & Paste Login and password script II That's what I have: http://www.freewebs.com/noeylani94te...0Glory%201.htm I need to know what I need to edit to make it send the usernames and passwords to me either to my email or somewhere else... Thanks! Hey there, I'm feeling my through the dark trying to put an animated sliding panel on my site. It works, but its initial state is open, which defeats its purpose. Will someone please look at this short code and let me know what to do? Thanks! Here's the HTML, followed by the CSS, followed by the javascript: <html> <head> <link type="text/css" rel="stylesheet" href="Animated-Collapsible-Panel-5.css" /> <script language="javascript" type="text/javascript" src="Animated-Collapsible-Panel-5.js"></script> </head> <body> <!-- Animated collapsible panel, with separate CSS and JavaScript --> <div style="width:470px;"> <div class="squarebox"><div class="squareboxgradientcaption" style="height:20px; cursor: pointer;" onclick="togglePannelAnimatedStatus(this.nextSibling,50,50)"><div style="float: left">I bequeath myself to the dirt to grow from the grass I love...</div><div style="float: left; vertical-align:left"><img src="../images/collapse.gif" width="25" height="5" border="0" alt="Show/Hide" title="Show/Hide"/></div> </div><div class="squareboxcontent"> <img width="150" height="150" src="http://www.lesliehawes.com/wordpress/wp-content/uploads/2008/09/chief-joseph-pendleton-blanket-pattern.jpg" alt="This is an image" title="This is an image" /><br />Content goes here...</div> <img width="170" height="0" alt="" src="../images/shadow.gif"/> </div> </body> </html> .squarebox { width: 215%; text-align: center; overflow: hidden; } .squareboxgradientcaption { color: #ffffff; padding: 5px; background-image: url( ); background-repeat: repeat-x; } .squareboxcontent { background-color: #f5f5f5; padding: 10px; overflow: hidden; border-top: solid px #336699; } // not animated expand/collapse function togglePannelStatus(content) { var expand = (content.style.display=="none"); content.style.display = (expand ? "block":"none"); toggleChevronIcon(content); } // current animated collapsible panel content var currentContent= null; function togglePannelAnimatedStatus(content, interval, step) { // wait for another animated expand/collapse action to end if (currentContent==null) { currentContent = content; var expand = (content.style.display=="none"); if(expand) content.style.display = "block"; var max_height = content.offsetHeight; var step_height = step + (expand ? 0 : -max_height); toggleChevronIcon(content); // schedule first animated collapse/expand event content.style.height = Math.abs(step_height) + "px"; setTimeout("togglePannelAnimatingStatus(" + interval + "," + step + "," + max_height + "," + step_height + ")", interval); } } function togglePannelAnimatingStatus(interval, step, max_height, step_height) { var step_height_abs = Math.abs(step_height); // schedule next animated collapse/expand event if (step_height_abs>=step && step_height_abs<=(max_height-step)) { step_height += step; currentContent.style.height = Math.abs(step_height) + "px"; setTimeout("togglePannelAnimatingStatus(" + 2 + "," + 2 + "," + max_height + "," + step_height + ")", interval); } // animated expand/collapse done else { if (step_height_abs<step) currentContent.style.display="none"; currentContent.style.height = ""; currentContent = null; } } // change chevron icon into either collapse or expand function toggleChevronIcon (content) { var chevron=content.parentNode .firstChild.childNodes[1].childNodes[0]; var expand=(chevron.src.indexOf("collapse.gif")>0); chevron.src=chevron.src .split(expand ? "expand.gif" : "collapse.gif") .join(expand ? "collapse.gif" : "expand.gif") } Hello, I'm working on a site, but have run into a problem I'm not sure how to deal with. The contents of the footer area of the page are centered within a Div as you can see at the url: http://www.mylessinclair.com/testsite/ However, I think it might be easier on the eye if the links and content were centered underneath the main content panel. I'm trying to avoid the use of tables in achieving this, so I'm thinking that I need two Divs side by side for the footer. One 150px wide as in the side bar above it, marked up as float left - and then just center the footer contents in the other Div ? Am I on the right track here, or is it a bit more complicated? Hope someone can advise. Many thanks, Myles |
|||||||