|
HTML - Limit Scrollable Area In Scroll Box
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.
Similar TutorialsDespite 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! How extensive/difficult is it to customize a scroll area? I've seen the very simple table versions which automatically generate a scroll bar based on your browser/system. But I want a very clean, simple, minimal scroll area. Even if it were two arrows. I have a mock up here where its just a line with a dot on the right side of a small fixed text area. Is this a flash or javascript thing? Or can it be done with css, html? Thanks How I can set the scrool bar so that the vertical bar will show? When the typed text exceeds the horizontal space area, cursor will be moved into next line without hitting the Enter key. Can anyone help me out? I've set up a test site for a project where I have a scrollable table within an iFrame. Techincally, its an iFrame within an iFrame which gets you to a scrollable table I also added an auto-scroll with anchor-links. Everything finally works, but I really want to remove the horizontal-scroll bar that shows up, while keeping the vertical-scroll bar. (Upon testing, I found without the vertical-scroll bar, the anchor-links and auto-scroll don't work correctly.) here's the link to the test site: http://www.thegrandamerican.com/ here's the line of code I think is the correct place to make corrections: <iframe id="myiframe" name="myiframe" src="oprah june 09_news.htm" width="900" height="475" scrolling="yes" overflow-y: scroll></iframe> The hierarchy works as follows: index.htm > spotlight_news.htm > oprah june 09_news.htm The reason for all the iframes is to have elements on the higher pages that will stay in place, such as a music player and dynamic menu bar. other notes and associated files (for the auto scroll) a smooth-src-comments.js smooth.pack.js Thanks. - J Hi Guys How do I make scrollable divs ? Like the ones in hotmail contacts when writing a new email. HI: 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 I have a Table and I need to have it in some kind of scrollable panel. Is there such a scrollable component? Thanks... 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 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 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> 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 How i create a frame type space( which is scrollable ) similar to seperate window inside a webpage ? Ive been looking EVERYWHERE for a site with a code for a scroll box with a trasparent scroll bar, Ive seen the code where I can edit the size of the box as well as the color of the box itself and I know how to do THAT. how do I make it where the code displays the scroll code as well so I can fully customize it? it seems that its always hidden.. Is there an upper limit on the number of files that can be uploaded into a single website folder? I highly doubt I'll ever have to worry about that, just curious. I remember from DOS days, and early Windows, that there was an upper limit on the number of files one could place into certain directories (a bit over five hundred for the root directory, if memory serves right). Was wondering if there is a similar problem with web folders. While more of a curiosity than a problem, I'd still like to know what is going on behind the scenes here... What I have is a php page with an HTML form, the submission of which goes to the same page. I'm using a hidden variable and md5 hash to execute different scripts based on what is in the $_POST variables. My question is in regards to how fast I can hit "Submit" on the form and actually have it pass information via POST. I'm dumping the POST variables to the page each load so I can see what is in it, and it is blank every time if I don't wait for about 10 seconds after the page loads to hit submit. Is this an intentional limit? If so, can it be configured somewhere? Here is a simplified version of what I am doing, confirmed that it is exhibiting the same behavior: Code: <?php print_r($_POST); echo "<br />"; ?> <form action="http://localhost/cases/concept.php" method="post"> <p> <table> <tr><td><label for="field1">Field 1: </label></td><td><input type="text" name="field1"></td></tr> <tr><td><label for="field2">Field 2: </label></td><td><input type="text" name="field2"></td></tr> <tr><td><label for="field3">Field 3: </label></td><td><input type="text" name="field3"></td></tr> <tr><td><label for="field4">Field 4: </label></td><td><input type="text" name="field4"></td></tr> </table> <input type="hidden" name="function" value="newfield"> <input type="hidden" name="token" value="md5"> <input type="submit" value="Submit"> <input type="reset"> </p> </form> I am using Apache 2.2.11 running under xampp. EDIT: Turns out this is an issue with IE, Firefox does not exhibit the same behavior... I will pursue the issue along that line now. How can I limit the number of characters that will be shown from a field of a DDBB on a td ? Thanks, Ignacio Francisco Penin Is there any way to limit the selection form a multiple select box to a certain number. <select multiple="multiple" size="5"> <option>Beer</option> <option>Vodka</option> <option>Guinness</option> <option>Sambuca</option> </select> How can I stop people selecting more than 2 options? Cheers in advance for the help. hi My code is- <HTML> <HEAD></HEAD> <BODY> <TABLE> <TR><TD> <SELECT NAME="Date"> <OPTION>1</OPTION> <OPTION>2</OPTION> : : <OPTION>30</OPTION> <OPTION>31</OPTION> </TD></TR> </TABLE> </BODY> </HTML> it will show the numbers from 1 to 31 in the drop down with long scrollbar. My problem is - I want show only 10 numbers.User need to scroll and select other numbers. Is it possible? I want to limit image uploading size. For example i want to set my image size max. 50kb . |
|||||||