html questions.. scroll boxes in websites [Archive]

howard

Apr 11, 2007, 10:10 PM

Hey,

this might be a stupid question but I only know basic html. I'm wondering how I can put part of my website in a box that I can have content and scroll down just that area. similar to the three panels here:

http://www.apple.com/downloads/dashboard/

also, is there possibly a way to do this in iweb? I'm pretty sure there isn't but thought I would ask in case there is a hidden way.

-not looking for a whole tutorial, just some references so I can check it out on my own. or any tips.

Nicolasdec

Apr 11, 2007, 10:18 PM

Are you useing a program like dreamweaver or are you hand codeing?

panoz7

Apr 11, 2007, 10:20 PM

Doing something exactly like those panels is very difficult (dynamic selection boxes are a real pain), however putting part of a website in a box is relatively easy.

Search for a tutorial on frames and iframes. They let you put a website within a website and should do what you want.

howard

Apr 11, 2007, 10:23 PM

I don't necessarily want them as complicated as those, just wanted a site that would show a box with a scroll bar...

plinden

Apr 11, 2007, 10:36 PM

Don't let anyone tell you to use frames - use css instead, like this:

<html>
<head>
<style>
#scroller {
top: 0px;
float: left;
height: 150px;
width: 100px;
overflow: auto;
}
</style>
</head>

<body>
<div>
<p id="scroller">text1 text1 text1 text1 text1
text1 text1 text1 text1 text1 text1 text1 text1 text1 text1
text1 text1 text1 text1 text1 text1 text1 text1 text1 </p>
</div>
</body>
</html>

Modify the height and width to what you want. Change the value of overflow to "overflow: scroll;" to always have the scrollbar area even if the text is small enough to fit without scrolling.

panoz7

Apr 11, 2007, 10:46 PM

Don't let anyone tell you to use frames - use css instead

Yeah... I should probably note that the only time I use frames is when building CMS systems for websites that I've created. They're great for that since each frame can be dynamically changed and can dynamically change other frames with minimal javascript.

Frames are useful when you wish to change the page that they contain. There might be a simple CSS solution for that but I haven't found it.

For your situation though, the CSS solution seems to be much better.

howard

Apr 11, 2007, 11:19 PM

Don't let anyone tell you to use frames - use css instead, like this:

<html>
<head>
<style>
#scroller {
top: 0px;
float: left;
height: 150px;
width: 100px;
overflow: auto;
}
</style>
</head>

<body>
<div>
<p id="scroller">text1 text1 text1 text1 text1
text1 text1 text1 text1 text1 text1 text1 text1 text1 text1
text1 text1 text1 text1 text1 text1 text1 text1 text1 </p>
</div>
</body>
</html>

Modify the height and width to what you want. Change the value of overflow to "overflow: scroll;" to always have the scrollbar area even if the text is small enough to fit without scrolling.

that makes a lot of sense to me, I have to brush up on my css... how do you place the "frame" in a specific spot on the page?

howard

Apr 11, 2007, 11:28 PM

first, thanks for all the help,

second, I found this very helpful site after searching around for iframes here:

http://karreth.com/iweb/iFrame!%20iFrame!.html

very helpful for getting them set up in iweb.

tominated

Apr 12, 2007, 01:54 AM

Yeah... I should probably note that the only time I use frames is when building CMS systems for websites that I've created. They're great for that since each frame can be dynamically changed and can dynamically change other frames with minimal javascript.

Frames are useful when you wish to change the page that they contain. There might be a simple CSS solution for that but I haven't found it.

For your situation though, the CSS solution seems to be much better.

ajax...

TriXTroll

Jul 9, 2008, 11:15 PM

Bringing back an oldie. I'm trying to pull this off using the css and am having some issues. I would like to put a scrolling list in the box, but it's not cooperating. Any ideas?

Here's my code. And a screen shot of what is happening. Well, I did have it all nicely nested before I hit submit........

http://img185.imageshack.us/img185/3134/picture2zd3.th.png (http://img185.imageshack.us/my.php?image=picture2zd3.png)

and a screen shot of code in text edit, since the quote feature doesn't like nesting

http://img525.imageshack.us/img525/655/picture4kt5.th.png (http://img525.imageshack.us/my.php?image=picture4kt5.png)

<html>
<head>
<style>
#scroller {
top: 0px;
float: left;
height: 150px;
width: 300px;
overflow: scroll;
}
</style>
</head>

<body>
<div>
<p id="scroller">
<ul>
<li>Non-Structual Body Repair Techniques
<li>SEM Certified Technician
<li>Lexus Structual Body Repair Technician
<li>Chief U-Structural Repair Technology
<li>Certified Welding
<li>ASE Refrigerant Recovery and Recycling
<li>I Car Finish Matching
<li>I Car: Collision Repair
<ol>
<li>Plastic Repair
<li>Finish Matching Combo
<li>Steering and Suspension
</ol>
<li>Plastic Repair Course:Interior Plastics
<ol>
<li>Exterior Plastics
<li>Sheet Molded Compounds
</ol>
<li>ASE Certified:Painting and Refinishing
<ol>
<li>Nonstructual Analysis and Damage
<li>Repair
<li>Structural Analysis and Damage Repair
</ol>
<li>I-Car Certified 8 Part Certification
<ol>
<li>Identification and Analysis Of Damage
<li>Measuring Principles and Techniques
<li>Straightening Systems and Techniques
<li>Welding in Collision Repair
<li>Replacement of Structual Parts
<li>Restoring Corrosion Protection
<li>Suspension,Steering and Alignment
<li>Working with Mechanical and Electrical Parts
</ol>
</ul>
</p>
</div>
</body>
</html>

cromwell64

Jul 10, 2008, 01:18 AM

Bringing back an oldie. I'm trying to pull this off using the css and am having some issues. I would like to put a scrolling list in the box, but it's not cooperating. Any ideas?

Here's my code. And a screen shot of what is happening. Well, I did have it all nicely nested before I hit submit........

http://img185.imageshack.us/img185/3134/picture2zd3.th.png (http://img185.imageshack.us/my.php?image=picture2zd3.png)

and a screen shot of code in text edit, since the quote feature doesn't like nesting

http://img525.imageshack.us/img525/655/picture4kt5.th.png (http://img525.imageshack.us/my.php?image=picture4kt5.png)

put the id="scroller" in the <div> tag and not the <p> tag. also, to make it a little more pleasing to the eye, i would change the overflow:scroll, to overflow:auto. that will remove the horizontal bar that never gets used.