|
HTML - Html Page Width / Horizontal Scrollbar Problem
Hi all, I'd really appreciate some help on this one.
I have a program which outputs very long strings of text to a HTML page. At the moment the text stays on one line resulting in an annoying horizontal scrollbar. How do I get the page to automatically format the text so that it all fits within a standard width, and so there's no horizontal scrollbar? Regards, Ruth Similar TutorialsThe following problem seems to occur in both IE and Firefox (Chrome seems ok). Note the following simple code: HTML Code: <html>
<head></head>
<body>
<div dir="RTL" align="center">
<table width="800" height="100" border="0" cellspacing="0" cellpadding="0">
<tr height="100">
<td width="400" height="100" bgcolor="yellow">
<td width="400" height="100" bgcolor="red">
</tr>
</table>
</div>
</body>
</html>
When the window is manually made thinner, a horizontal scrollbar DOES appear but on the wrong side, which makes some of the content unreachable. On Firefox sometimes there is no horizontal scrollbar at all. HELP? I am wanting to do a horizontal scrollbar like this http://felicefawn.com/fashion.htm with pictures inside. The pictures won't stay side by side, they go underneath therefore creating a vertical scrollbar. Anyone know how to do this? Help much appreciated!! Hi. I'm making a page for a company. And I'm having trouble regarding an iframe, ONLY comes to place when viewed in Explorer. I'm so tired of finding problems ONLY because of IE. This is the second time so far, spent an entire week just because of some minor code problems showing up ONLY when viewed in IE. Anyway, my trouble is an irritating horizontal scroll showing up at the bottom of the one iframe. The URL is http://www.risington.no/dynamikk I have checked that the contents of the page linked to the iframe ain't wider than the iframe itself. Actually, I've tried to even set half of the size it is now, and still I'm getting the scrollbar at the bottom. I'm running out of posibilities here, necer experienced such big a problem on behalf of this. I had thos problem a couple of times before, but allways solved by subtract about 15 px width off the content page shown in the iframe because of the VERTICAL scrollbar showing up, which actually is quite important that it does. But not this time, no! Here's a cut-out of how my iframe tag looks like: Code: <iframe src="news.html" width="677" height="478" align="middle" frameborder="0" marginheight="0" marginwidth="0" name="mainframe" scrolling="auto" title="Dynamikk"></iframe> It's inside a <td colspan="2"></td> with no static width or height. Any help = Grateful Can't tell you how many hours I've spent trying to do this, but it's a lot! An example page with the issue can be found here.. http://www.funkimunkibadges.co.uk/geekybadges-c-79.html I'm basically trying to change it to be a horizontal scroll instead of vertical. Top image here is what happens when I expand the data in the central box. The lower image is when is as it is now.. http://www.flickr.com/photos/creepyd/5710648997/ I'm not really sure where the problem lies, my guess is the html. The piece of CSS which creates the vertical scrollbar is here.. Code: #indexProductList.centerColumn {
width: 630px ;
height: 680px !important; /*CENTER SCROLLBAR HEIGHT*/
overflow:auto;
padding:0px;
If I change the 'auto' above to 'hidden', the scrollbar goes away, so it's definitely that controlling it. The php which creates the 5 columns is here.. If I change it to + 0.5, the last one will wrap to the next line, and not create a horizontal scrollbar. However if I change it so each column is more than 100%, I get a horizontal scrollbar?! Code: $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 0.5; Thanks so much for any help. Here's the html for the central table with the normal vertical scrollbar in place.. HTML Code: <td valign="top">
<!-- bof breadcrumb -->
<div id="navBreadCrumb"> <a href="http://www.funkimunkibadges.co.uk/">Home</a> ::
Careers & Hobbies
</div>
<!-- eof breadcrumb -->
<!-- bof upload alerts -->
<!-- eof upload alerts -->
<div class="centerColumn" id="indexProductList">
<h1 id="productListHeading">Careers & Hobbies</h1>
<div id="indexProductListCatDescription" class="content"> </div>
<form name="filter" action="http://www.funkimunkibadges.co.uk/index.php?main_page=index" method="get"><label class="inputLabel">Filter Results by:</label><input type="hidden" name="main_page" value="index" /><input type="hidden" name="cPath" value="113" /><input type="hidden" name="sort" value="20a" /><select name="alpha_filter_id" onchange="this.form.submit()">
<option value="0">Items starting with ...</option>
<option value="65">A</option>
<option value="66">B</option>
<option value="67">C</option>
<option value="68">D</option>
<option value="69">E</option>
<option value="70">F</option>
<option value="71">G</option>
<option value="72">H</option>
<option value="73">I</option>
<option value="74">J</option>
</select>
</form>
<br class="clearBoth" />
<div id="productListing">
<div id="productsListingTopNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div>
<div id="productsListingListingTopLinks" class="navSplitPagesLinks forward"> </div>
<br class="clearBoth" />
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2628"><img src="images/Be Nice Im In Charge Of The Pills.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2628"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=3165"><img src="images/Best Scrabble Player Ever.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=3165"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2663"><img src="images/Bowling Cutie.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2663"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2662"><img src="images/Bowling Cutie Black.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2662"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2664"><img src="images/Bowling Pins And Ball Red.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2664"></a><br /><br /></div>
<br class="clearBoth" />
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2665"><img src="images/Bowling Princess.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2665"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2666"><img src="images/Bowling Rocks.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2666"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2667"><img src="images/Bowling Strike.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2667"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2672"><img src="images/Camera On Blue.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2672"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2673"><img src="images/Camera On Pink.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2673"></a><br /><br /></div>
<br class="clearBoth" />
<div id="productsListingBottomNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div>
<div id="productsListingListingBottomLinks" class="navSplitPagesLinks forward"> </div>
<br class="clearBoth" />
</div>
</div>
</td>
Following proper new-person-at-a-forum etiquette, I've searched for an answer to my question in the archives, and have been unable to find one. So, here goes. My webapp is uses a bit of asynchronous Javascript and CGI to allow users to change parameters in a serverside povray script (say, colors, positions, textures, etc) to allow users to create custom car designs. The server renders the images realtime and sends them back to the client's browser. What should be the hard part (all of this asynchronous javascript and CGI stuff), I'm having no trouble with. I am having trouble, however, with the scrollbar inputs needed for moving things around (without making users have to type in coordinates). I attempted to do my scrollbars with overflowing DIVs, such as: <DIV CLASS="scrollbar" STYLE="width: 230px;" ID="frequency_scroll" onScroll="change_scroll('frequency', 0, 50, 2, true);"><DIV STYLE="width: 2000px;"> </DIV></DIV> Where class scrollbar is: .scrollbar { overflow: auto; overflow-x: scroll; overflow-y: hidden; font-size: 11px; margin-top: -6px; } To break it down, we're creating an outer div that forces a horizontal scrollbar, and an inner div that makes it wide enough that you can actually scroll it. There are several hacks in this code trying to minimize the annoying phenominon that I can't seem to get around: spacing between scrollbars. I've been testing in two versions of firefox for Linux, one older and one newer, although eventually I'm going to need this to be crossplatform. If I leave out the nbsp in the inner div, in one version of firefox, the scrollbars vanish altogether; it seems to insist that there be content inside. When there is content, however, the scrollbar shifts down on the page significantly to make room for the line with the nbsp, making the scrollbars very spread out and the page very long. My first solution was margin-top: -20px in the scrollbar div; however, the invisible spot it reserves for the line that has the nbsp in it prevents you from accessing the scrollbar above it (and z-indices don't seem to make it accessible). Only the bottommost scrollbar in a group works when you do that, as it's the only one that doesn't have an invisible line of text blocking it. I tried javascript to prevent the user from getting focus on the invisible line, but that didn't help. I then tried shrinking the font size down, hoping the height occupied by the invisible line would shrink. Unfortunately, when you drop the font size below the height of the scrollbar, the scrollbar disappears for some reason, and there seems to be nothing I can do to force it to stay. I've also tried alternatives, such as scaled invisible images inside the scrollbar div; no luck. Firefox seems to simply refuse to draw the scrollbar on the div unless it can have an invisible area above it of equal or greater size in comparison to the scrollbar itself. The above code -- a font size of 11px and a margin-top of -6 -- seems the closest I can space the bars (about one scrollbar's height between each of them) I'm trying to figure out what my options are here, and right now, all I'm seeing as possibiltiies is to write my own code in Javascript to generate scrollbars made of inset/outset DIVs and lots of mouse event captures. And I have a feeling that will get ugly. Anyone have any ideas? I'm still extremely new to coding in html and I'm trying to figure out how to code in all the divides and space them out where I want to but I can't figure out what makes the menus and ad space and main body conform to the shape it is in on this code: And apparently I can't fit it all into a post but the web page is he http://www.huntingtonnews.net If anyone knows about how to space divides, menu bars, and such can you please look at that page and view source and give me a hint? Thanks... Codeguru I have found what seems to be a rather big problem in the HTML canvas When drawing circles, and I presume all shapes, the size of the circle is different based on whether one is filling it, or sketching it. If we have a circle of radius 10 and line width k, and we decide to fill it, that line width will be evenly dispersed about the perimeter of the circle such that half the line width is inside the circle, and half is outside the circle. If, however, the same circle is sketched, the line width will still be the same, but it will now be dispersed entirely on the outside of the circle, thus making it larger. If I am wrong, and this is how figures are supposed to be drawn, or if I am simply not using the right settings, please let me know =) Hello Everyone! (hoping for quick reply.. lol) I am not sure if this should go here, or in the design section. I chose here, because it is a problem in the code itself. I have introduced myself in the introductory section, if you want to know a little bit more about what I am doing this for. I made a template design in The Gimp photo editor. I sliced it up, and opened up the HTML file in the editor Kompozer. It opened up just like it should, but I wanted a liquid type layout, so I turned the cell's widths into the corresponding percentages, though Kompozer rounded them off. (Shown below) However, when I previewed the file this time, it appeared as if it skipped every other cell, leaving a blank white space in its spot. Not even in the right percentages. I think I know what I've done wrong, looking back now that I am writing this thread. Can someone please point me in the right direction? EDIT: Code posted as comment, due to lack of character room. Well, I like to know how you can do this: http://b5.boards2go.com/boards/board...4563&user=he12 Ya know, put HTML inside a box without the HTML actually showing up so others can copy and paste it? I've run out of ideas, so please help! I have a table on my website that doesn't quite fit horizontally, so I want a scrollbar for the user to scroll across. Is this an i-frame? thanks I have been puzzled by the fact that the scroll bar is missing on my site at http://larkspree.com/index.php. It wasn't an issue until I added content 'below the fold'. When viewed in Firefox 3.5.5 and Opera 9.6.4, I CAN scroll down with the down arrow or page down keys. When viewed in Windows Explorer 8, the below the fold content is on top of the main above-the-fold content. The screen won't scroll with the keys, and there is no scroll bar. In Chrome 3.0 and Safari 4.0.4, I can't scroll with with the keys and there is no scroll bar. My page got very complicated with the javascript and jQuery and hidden divs. But the content is organized with nested divs, which can be easily seen using a debugger like Firefly. The main structure is like this: Code: <div id='all'>
<div id='fblogin'></div>
<div id='content'></div>
<div class='featuredEventList'></div>
</div>
I hope I don't have to tear it down to debug this problem. Can someone offer an explanation or suggest something I could try to get the scroll bar to appear? Thanks, Jim Some mouses today have horizontal scroll, some call the tilt. It looks something like: http://www.htmlforums.com/attachment...1&d=1242556560 I noticed that many websites they code those horizontal scroll to go to next/prevous page. For example Discuz! forum system has this function. While you browse hundreds or thousands of posts separated into pages, the horizontal scroll can take you to previous page or next page.(not browser back/forward) How do I code like that? Or any examples? Hi there, Im currently having a problem trying to get a scrollbar to work on my html table. I have a table split into 3 sections (one row at the top for the header and two for a bit of PHP code output im running) however, because the table is split into sections, I cannot get a <DIV> scrollbar to work (across the PHP sections). It will work if I merge the PHP sections, however the output lines up incorrectly. Is it possible to run a scrollbar over a whole table or specific sections? If someone could help, that would be great! Regards, Joe Below are the two sites I will use to explain my problem. For reference, I used Mozilla Firefox 3.08 and Google Chrome 1.0.154.53 in my tests. Example 1: http://www.irishbyname.com/example1.htm Example 2: http://www.irishbyname.com/example2.htm When browsing the site in a browser other than Internet Explorer, example 1 and example 2 center to different locations on the page. In example 1, I set the height of the content area to be 200 px tall. In example 2, I set the height of the content area to be 500 px tall. When I have example 1 open in one tab and example 2 open in another, I can alternate between the two tabs and see a visual difference in alignment. The HTML code on both pages is exactly identical with the exception of the height of the content area. Can anyone tell me why the horizontal page center changes based on the height of the page? Can anyone tell me how to change my HTML to make certain the page centers correctly no matter how tall the page is? Thanks for your help in advance. I have several pages in a site I am designing, some short and some long On short pages the browser automatically hides the scroll bar and on long pages, displays it. This shifts the contents of the page left and right by the width of the scroll bar and completely distracts from the experience and use of the site. I've found a work around; adding breaks so all pages are long enough to have a scroll bar; but that's not the solution, there are plenty of sites out there that don't have this problem and I'd like to know what the fix is. Any ideas gratefully received. Ta, Rizole. Hello, I am looking for a piece of HTML that would stop the scrollbar from automatically resetting to the top of the page once the link has been clicked and the new page is visible, as the website i am currently building is a portfolio container of sorts, and I have a load of images that I wish to appear to be on the same web page but when the "next" button is clicked it is merely taking the viewer to an entirely new page built of identical code but for the different image content. I want the scrollbar to stay at the bottom of the screen (I have a page that is 1063px high with the images at the bottom) once links have been clicked on, and I would be very grateful if somebody in the know has the time to reply. here's the as-yet unfinished web page. http://www.alexhaines.co.uk/footprints.html - click the links to the different housing projects (currently only the brevoort button works :-/ ) to see what I'm talking about specifically with the scrollbar defaulting back to the top. Many sincere thanks in advance, Alex hey i don't quite know why - my company's myspace profile seems to have a scrollbar at the bottom. could you tell me why / how to fix please? thanks bruno [rainpulse] www.myspace.com/rainpulse I am making my personal website and in the starting phase of development of HOME page I am getting a problem that when i enable the Yahoo! toolbar or Ask Toolbar the alignment of page changes picutres under <table> tag becomes little down. how to solve this problem? |
|||||||