Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

html questions.. scroll boxes in websites

howard

howard

macrumors 68020
Original poster
Nov 18, 2002
2,017
4
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.
 
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.
 
I don't necessarily want them as complicated as those, just wanted a site that would show a box with a scroll bar...
 
Don't let anyone tell you to use frames - use css instead, like this:
Code: 
<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.
 
plinden said:
Don't let anyone tell you to use frames - use css instead
Click to expand...

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.
 
plinden said:
Don't let anyone tell you to use frames - use css instead, like this:
Code: 
<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.
Click to expand...

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?
 
panoz7 said:
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.
Click to expand...

ajax...
 
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........



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



<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>
Click to expand...
 
TriXTroll said:
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........



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

Click to expand...

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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back