|
HTML - How Do I Get A Horizontal Scroll Bar When Some Of My Web Page Is Off Screen?
New poster here! Recently been creating a website using HTML & CSS from scratch using Notepad++. I was under the impression that the more flat, or spread out the design, browsers would squish it automatically to fit on the page. Apparently this is not the case.
I current have a page where the main content starts 250 pixels from the left hand side of the screen, this causes some of the content disappear of the right hand side of on lower resolution screens. Should I be starting the content at the far left, or is there another web page design convention I should be following? I assume there is a way around this however I can't seem to find it! Any help would be greatly appreciated. These forums are a wealth of knowledge! Similar TutorialsSome 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? 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 Im working in a HTML page using also JSP (Java). In the HTML code I have a large string of information (horizontal string) that does not fit in the screen. I also would like to have this info aligned in colums. I am using <TABLE>. The problem with <TABLE> is that it put all the information in one screen, breaking the string in two parts, instead of having an horizontal scroll bar and using this scroll bar to see al the info. Thanks, John Morales I want to create a website that both Firefox and IE will recognize my code where there is no vertical scroll. The page only scrolls horizontally. The site I am creating is for a portfolio and horizontal scroll is best for vieiwing such. Do I need to use CSS to make this work or how can I acheive this? Thank you Chaser Hi, I have the following javascript which basically scrolls to a certain point of a webpage when the page loads up: <script type="text/javascript"> window.onload=function() { scrollTo(0,200); } </script> Now the problem I have is that this code behaves differently based on what screen size monitor you have. As I have a 15 inch screen monitor, all works fine. But if i view the page on a 19inch monitor, it scrolls down to a slightly different point of the page. Is there anyway round this. hi ! I'm using a frameset and in the main frame I need the vertical scroller visible all the time, even when not needed, but when I set it ... HTML Code: scrolling="yes" but with this the horizontal scroll is also visible, what I don't want Is there a way to enable just the Vertical one?? Hi! I am having problems with horizontal scroll-bar. The thing is horizontal scroll-bar appears in local view. But when I put it into web only horizontal scroll-bar disappears. I'm using swffit also, and tried lots of things to solve this but coulnd't manage to solve this weird problem. Anyone has an idea? Thanks in advance. site link is www.firinciorhan.com.tr Hi i am having html page which have <frameset> of 7 frames. See below source for that frameset <frameset rows="115,13,*,100" frameborder="no" border="0" framespacing="0"> <frameset cols="*,11" frameborder="no" border="0" framespacing="0"> <frame src="headerPageTop.html" name="topPage" scrolling="no" noresize="noresize" /> <frame src="headerRightPanel.html" name="header_rightpanel" scrolling="No" /> </frameset> <frameset cols="*,22" frameborder="no" border="0" framespacing="0"> <frame src="headerPageBotton.html" name="header_rightpanel" scrolling="No" /> <frame src="headerRightPanelBottom.html" name="header_rightpanel" scrolling="No" /> </frameset> <frameset cols="163,*,22" frameborder="no" border="0" framespacing="0" marginheight="0" marginwidth="0" topmargin="0"> <frame src="leftPage.html" name="leftPage" scrolling="No" noresize="noresize" /> <frame src="../system/deviceView/deviceView.html" name="contentPage" /> <frame src="rightPanel.html" scrolling="No" name="rightpanel" /> </frameset> <frame src="bottomPage.html" name="bottomFrame" scrolling="No" /> </frameset> Solution required is when the user reduce the window size topframe having image menu getting hidden. So we need to provide a horizontal bar common for all the frames. Can you please suggest the best solution with will working for IE, Firefox & Netscape. regards Sudhakar S I don't know how this got here, but I don't have any absolute width defined anywhere, I'm viewing the site on 1280x800 resolution, and I have a horizontal scroll bar... have a look if you want. www.bkriegtech.net Thanks for any help... This website has a skyscraper banner on the left that stays with you as you scroll down the page. http://www.vcdq.com Can this same effect be used on a skyscraper that's in a wordpress theme's sidebar.php? Hi, I've a frameset which contains two rows: <frameset rows="40%,60%" frameborder="10" ImagesBaseUrl="images/" CssClass="VerticalSplitterBar" scrolling="yes"> <frame src="ProgramReport1.aspx" frameborder="10" MARGINWIDTH="5px" scrolling="yes"> <frame src="BottomFrame.aspx" frameborder="10" > </frameset> The first page(ProgramReport1) width size is larger than the normal window size: <body> <ComponentArt:TabStrip id="TabStrip1" <ComponentArt:MultiPage id="MultiPage1" <ComponentArtageView ID="PageView1" <div style="vertical-align:middle; height: 552px; overflow: auto; overflow: auto; width:1400px; padding-left: 5px; padding-right: 5px;"> While displaying the frameset the vertical scroll bar is there, but there is no horizontal scroll bar. I've enabled scrolling="yes" to the frame, but still the horizontal scroll bar is not displayed. Do I need to handle any other properties. Thanks for your time, Senthil i have spent about 45min reading through alot of Iframe related threads but none of them have helped my problem. I have a website with iframes, on my index page i am trying to put an iframe into the content box so when you click the links up top it will load them without refreshing the whole page. So thats fine i put in my iframe code like this <iframe name="homeframe" width="780" height="250" border="0" frameborder="0" marginheight="0" padding="0" marginwidth="0" scrolling="auto"src="homeframe.html"> </iframe> And on the html document im trying to put into it "homeframe.html" it open up but it scrolls horizontally not vertically and all the writing goes onto 1 line horizontally. The width of my content box is 780px so i made the table in the homeframe.html document 780 so it wouldnt have the bar but it does. im stumped. thanks in advance. I'm trying to remove the horizontal scroll bar from a div but keep the vertical. I've seen a lot of posts on this but the answer is always: overflow-y:scroll;overflow-x:hidden but that won't work for me, because the x width does exceed the page, so I don't want to hide, I want to rely on the page's native horizontal scroll bars. (The reason being, I have a 'fixed/frozen' header div above which the offending div needs to stay in sync with) I believe in thread titles that get to the point. I have a basic page, when the page loads I want people to see the top of the page for a few seconds while a flash starts to load but then I want the page to scroll down a bit so the visitor can see the flash load progress status. I just want code that I can copy into my page. I don't have access to the flash code. Greg (the page under design) www.mytcanada.com/designer.html I have a programmer in the US who starts pages for me and then I much around with them until it's looks like I want. He helps me when I get stuck but he's on holidays. Any help would be great. 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 am stuck with this stupid code that i have been trying to fix for an hour! Please help. Heres my problem...: I want to embed a webpage within another and scroll it to the bottom of the page automaticly because i want the information at the bottom which is updated frequently. I also dont want a scroll bar, so all that is seen is the table. the website is www.totalfta.com. I want from below the ENTER|EXIT sign to the bottom of the table. I have attached what i have so far. ***I have the embed into another page, and the no scroll bar... i just want to make it auto scroll to the table..**** Thank you..! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-... <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tester</title> </head> <iframe height="410" width="100%" frameBorder="0" src="http://www.totalfta.com" mce_src="http://www.totalfta.com" scrolling="no" body onLoad="for (i=0;i<window.screen.availHeight;i++) {window.scroll(0,i); }"</iframe> <body> Hi All, I have a problem with centering a page to the screen on a new site. The page is 945px wide, and is fine in IE. But in both Firefox and Safari the page is moved to the left of the screen. Does anyone have an idea of what I have done wrong here? Here is a link to the page:- Website Hey, Don't really know exactly how to pose this question, so i'll try to explain it in several ways, and maybe one of you can help me. I'm trying to find code, HTML or Java, which would cause the browser to automatically start focused on a different part of the page other than the top (as it normally does when a new page loads). For example, lets say i have an image or text several scrolls down on a page. I want the browser to automatically load the page centered on this. Any ideas on how to do this? Any help would help so much.... i tried to search for it, but i didn't know exactly how to phrase it so i wasn't able to find anything. Thanks again. When I create a test page using DIV and set it to 480 px wide, my iPod Touch does not have it initially filling the screen; I have to double tap it to have it fill the screen. What step am I missing? Many thanks... Todd Can someone help me figure out why you cant scroll up or down to view the rest of this web page I'm making? Thank you. http://carsonvalleypowerwash.com |
|||||||