html questions.. scroll boxes in websites

Discussion in 'Web Design and Development' started by howard, Apr 11, 2007.

  1. howard macrumors 68020

    howard

    Joined:
    Nov 18, 2002
    #1
    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.
     
  2. Nicolasdec macrumors 65816

    Nicolasdec

    Joined:
    Dec 7, 2006
    Location:
    São Paulo
    #2
    Are you useing a program like dreamweaver or are you hand codeing?
     
  3. panoz7 macrumors 6502a

    panoz7

    Joined:
    Nov 21, 2005
    Location:
    Raleigh, NC
    #3
    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.
     
  4. howard thread starter macrumors 68020

    howard

    Joined:
    Nov 18, 2002
    #4
    I don't necessarily want them as complicated as those, just wanted a site that would show a box with a scroll bar...
     
  5. plinden macrumors 68040

    plinden

    Joined:
    Apr 8, 2004
    #5
    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.
     
  6. panoz7 macrumors 6502a

    panoz7

    Joined:
    Nov 21, 2005
    Location:
    Raleigh, NC
    #6
    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.
     
  7. howard thread starter macrumors 68020

    howard

    Joined:
    Nov 18, 2002
    #7
    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?
     
  8. howard thread starter macrumors 68020

    howard

    Joined:
    Nov 18, 2002
    #8
  9. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #9
    ajax...
     
  10. TriXTroll macrumors newbie

    Joined:
    Feb 1, 2008
    #10
    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........

    [​IMG]

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

    [​IMG]

     
  11. cromwell64 macrumors regular

    Joined:
    Jun 30, 2008
    #11
    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.
     

Share This Page