|
Welcome
Guest
|
Register
| Login
|
|
|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
Killersites.com Forum
Misc Forums
Web design articles from the killersites.com newsletter
Thread: CREATING A SCROLLING WINDOW IN A WEB PAGE WITHOUT FRAMES OR IFRAMES
|
| No member browsing this thread |
|
Thread Status: Active Total posts in this thread: 34
|
|
| Author |
|
admin
Advanced Member Joined: Jun 14, 2003 Post Count: 2940 Status: Offline |
SCROLLING WINDOW IN A WEB PAGE WITHOUT FRAMES OR IFRAMES. Those of you in the 'know,' probably guessed that I am going to be using a little CSS on a <div> tag. If you don't know CSS, you should first learn the basics of CSS before reading the rest of this article - though you should still be able to follow along anyway. Check out a scrolling div example. THE 3 STEPS TO SCROLLING DIV GOODNESS 1. CREATE A BASIC HTML PAGE Nothing special here, we just a need a place to type in our code. You can use your web design software to create your page but I would suggest that you type out the code by hand (what!) because that's the best way to learn this stuff. Here's the basic page: START OF CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My Practice HTML Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> </body> </html> END OF CODE I am not going to explain the HTML code because I'll assume you all know how to do this by now. But if you don't, just read my beginner's web design tutorial; why don't you? 2. CREATE A DIV WITH SOME TEXT The next step is to place a <div> tag in-between the <body> and </body> tags, then paste enough text in the div so that when we get the scrolling working, you will have enough to see the text scroll a little. 3. WRITE THE CSS CODE THAT WILL MAKE THE DIV SCROLLABLE To make a <div> tag scrollable, all you need to do is give it an overflow property, a height and width - just take a look my example code and add it to your <div>: START OF CODE <div style="overflow:auto; height:250px; width:300px;"> <p> Pay attention to my coding style - you may learn something about formatting code so that it's easier to read! </p> <p> In your actual page you should have much more text to see the scrolling action do its thing - I kept it short for the article ... </p> </div> END OF CODE LET'S TALK ABOUT THE CSS CODE You can apply CSS to your pages in three ways: 1. By linking to a separate CSS document 2. By placing the CSS code in your page in between a pair of <style> tags 3. Right on the tag itself - this is called �inline� CSS and that�s what we did this time for no other reason than to make it easier for me for this article. Typically you would want to stick all your CSS code in a separate document and then link the CSS page to your web pages for the following reasons: * Because browsers will cache the separate CSS file - the CSS file will only be downloaded once (saves a little bandwidth). Whereas if you included the CSS code in each of your web pages, it would be downloaded over and over again with each page - waste of bandwidth. * More importantly, CSS code in separate files centralizes all your CSS making it easy to update the CSS for all your pages. I�m assuming that you have linked all your site �s web pages to the CSS document. When would you apply CSS code 'inline'? I do it when I have a unique element - that is to say when I have some unique CSS code that will only affect one item (tag) on one page in the whole site . I do this to not clutter my master CSS files with these unique CSS rules that can get lost in the site over time. Even if this doesn't make sense to you now, I would strongly suggest that you do this anyway because in time the confusion will clear and you'll say: 'I don't believe it, that nerd was right!' What is the 'overflow' option: auto | scrolling etc. The 'overflow' property tells the browser how to handle text that can't fit into the <div>. Oh yea, that brings me to another point; you have to specify the size of the <div> otherwise the browser will just increase the size of the <div> to make room for the text - this is not what we want to do here. The two 'overflow' options that make a <div> tag sprout scrollbars are: auto : scroll bars appear only when required. scrolling. : scrollbars always appear. Just try it out. About my code indentation: it's for legibility. Did you notice how the code in my page is nicely formatted so that sub-tags are indented a little to the right? The practice of indenting sub-tags like this makes for much more legible code. This will make you and especially anyone else who may have to edit this web page later very happy. Conclusion To really get a feel for this, I would suggest inserting a scrollable <div> into a packed web page and play with the dimension and so on; you may learn some nuances about using a scrollable <div> while doing this. ---------------------------------------- Stefan Mischook Video Tutorial Store | Web Templates ---------------------------------------- [Edit 4 times, last edit by admin at May 9, 2006 9:52:26 PM] |
||
|
|
OldNewb
Stranger Joined: Feb 17, 2006 Post Count: 1 Status: Offline |
I've done a bit of searching, but being new to this i'm not sure what I'm looking for  To add a link to the css file in the <div> Waht is the command? Thanks |
||
|
|
LSW
Advanced Member USA Joined: Nov 27, 2003 Post Count: 6285 Status: Offline |
No, you link to the CSS in the head. You can place it in under the meta tags: <style type="text/css" media="screen">Now there is another form of linking CSS using link, however I prefer the Import style version because Netscape 4.2 doesn't kow it, so will show the site without style sheets rather than incorrectly. Of course you can do a simple CSS fr netscape and link it then use import for IE and later Netscape/mozilla versions with the good styles. Be advised: overflow can have problems with old browsers. But none of the current versions should have trouble. If a browser does nt support it the entire text will simply be inserted so the info is still accessible even if it looks bad. Also screenreaders can access the info fine as it is in the document (where frames and iframes use a exteral file for the content) |
||
|
nez
Stranger Joined: Apr 20, 2006 Post Count: 3 Status: Offline |
this thread answered my frames dilemma! thanks a lot for this! =D |
||
|
|
nez
Stranger Joined: Apr 20, 2006 Post Count: 3 Status: Offline |
ok.. so i have learned how to use scrollable div tag. but how can i apply this to a web layout created in adobe photoshop? pls help me... thanks thanks thanks! :) |
||
|
|
admin
Advanced Member Joined: Jun 14, 2003 Post Count: 2940 Status: Offline |
Hi, Photoshop is just outputting the layout in HTML - the format of all web pages. You simply need to learn basic HTML and web design and you will be able to do what you need to do. That said, you should not be using the Photoshop-to-web-site production method ... that is very old school and labour intensive. You ougth to start with web site/web page template (commercial or otherwise) and build from there. ---------------------------------------- Stefan Mischook Video Tutorial Store | Web Templates |
||
|
|
BBJones
Stranger Joined: Apr 28, 2006 Post Count: 1 Status: Offline |
Hi there, My first time on this site, very helpful I must say :) Ok, question: Frames are handy for something I'm doing becuase I have a sub-section of the page that needs to vertically scroll if needed (while the rest of the site remains static). I have a problem in IE where it will stick a horizontal scroll in once the vertical scroll shows up (guessing it's becuase the body inside the frame doesn't resize to allow room for the vertical scroll). After reading your example, I disabled scrolling in the frame (but kept the frame in though becuase of tons of code functions/reference to the frame) and instead stuck the div/overflow trick in the body (which is the source of the frame). Structure goes like this: Frameset rows down page (about 5) in frame row 3 is a frameset of columns (about 3) in frame col 2 is my dynamic section that needs to vertically scroll this section is built of dynamic tables (think rows/cols of products) When this section starts to vertically scroll, the horizontal shows up While this solves my unwanted horizontal scroll problem, I no longer get the benefit of dynamically sized vertical scroll bars when resizing the page. is there a way to make the height of the div dynamic within a frame? Or better yet (so I don't have to re-write tons of code) what can force the horizontal scroll bar in a frame to never show up in IE? :) I guess I maybe force a minimum height to the framerow or something? Thanks in advance, BB P.S. Works perfectly (the old way with frames) in Firefox. ---------------------------------------- [Edit 2 times, last edit by BBJones at Apr 28, 2006 6:37:50 PM] |
||
|
|
Hutgm
Stranger Joined: May 9, 2006 Post Count: 2 Status: Offline |
This is a great piece of code. However it doesn't work in IE. It adds horizontal scroll bars (don't want them) and turns on the scroll bars for the browser when it isn't needed. More importantly, I'm using this code for a scrolling list of alphabetized items with anchors to coresponding letters. I want to let the viewer jump to items by choosing the letter nav or scrolling. In IE when you choose the letter button, it jumps the entire page to where the item would be if all the text were visible at once but it doesn't make the desired text appear in the scroll box. The result is that clicking on the letter nav takes you to an area below where the page is and you get a black screen. Any solutions? |
||
|
|
billyboy
Advanced Member Joined: Sep 3, 2005 Post Count: 2206 Status: Offline |
IE interprets the CSS box model incorrectly so what may fit in a standard compliant browser wont fit for IE. Padding and margins will affect that. Increase the width of the div or check your code for something elswhere - like an element the div is nested in - that is limitting the width. Same applies to the screen jumping to a black area "below the page". It's impossible for a browser to diplay anything below a page so there's got to be something in your code that's adding un-needed height. That would also explain the horizontal scroll bars. How are you targetting the element you want the links to jump to? The correct way is to identify the element<div id="#a"></div> and the write the link<a href ="#a"></a> ---------------------------------------- Quiquid latine dictum sit altum viditur ---------------------------------------- [Edit 2 times, last edit by billyboy at May 10, 2006 4:38:08 PM] |
||
|
|
Hutgm
Stranger Joined: May 9, 2006 Post Count: 2 Status: Offline |
The extra "invisible" height is coming from the text in the scroll area that extends down below the visible "window" of the scroll box and the main table. Clicking on the link to the anchor within the scrolling text box doesn't move the scroll text upward to be visible within the scroll area. It takes you way down below the "visible" page to where the anchor is hidden outside the of the scroll box window. The link to the anchor takes you to where the scroll text would be on the page if it weren't in a scrolling window where the rest of the page doesn't show. It works fine on Safari, Opera, and Fire Fox. I should say that I'm currently seeing this weirdness on IE for the Mac. I haven't had a chance to look at it in IE on a PC yet. I hope I'm describing the problem clearly; I may not be explaining it well. Is there any way around this or do I just have to give up on having the option for the viewer to scroll or jump to selected items within the scroll area via anchors? I hope not (man I hate IE ? it's always the problem browser for me, all the other main browsers display as they should without any problems) |
||
|
|
|
|
Current timezone is GMT Sep 9, 2010 3:35:08 AM |
