ansaurus

Question

html / css: best way of writing a preview pane (master/detail)

Answer 1

+6 A:

Well, if you're actually using windows, then it sounds like you're talking about frames or even iFrames.

My assumption, though, is that when you say "window" you're just referring to the idea of a scrollable area. To do that, the css property "overflow" can be set to "scroll" and it will scroll if the contained elements size is larger than that of itself.

A simple code sample:

<html>
  <body>
    <div id="window-one">
      <p>Content for window one goes here.</p>
    </div>
    <div id="window-two">
      <p>Content for window two goes here.</p>
    </div>
  </body>
</html>

The CSS would like this:

#window-one,
#window-two {
    width: 100%;
    height: 50%;
    overflow: scroll;
}

This would create two "panes" (windows) that take up 50% of the height, but span the entire width of window. Scrollbars would be automatically set on the panes, even if not needed (in which case they're disabled.)

Michael T. Smith 2009-01-08 20:05:48

All 3 are good answers. I'd probably use a class rather than the id match, but that isn't important to the point of the answer. Thanks again.

Marc Gravell 2009-01-08 20:46:25

Answer 2

+3 A:

There are lots of good ways to do this - you could use any block level element (like a div) with overflow:scroll. This would allow you do do what you want without resorting to something complicated like frames (unless that is what you need).

Try something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
     <title>untitled</title>
     <style type="text/css">
      .pane {
       margin:20px;
       width:300px;
       height:100px;
       overflow:scroll;
      }
     </style>
    </head>
    <body>
     <div class="pane">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac ipsum id diam ullamcorper viverra. Ut nec risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque pulvinar. Integer vel est. Sed elementum, tortor nec sollicitudin semper, eros purus suscipit pede, in dictum metus ligula id mauris. Donec augue metus, malesuada a, ultricies eu, volutpat quis, est. Fusce suscipit. Mauris magna. Nulla facilisi. Praesent sem odio, imperdiet ac, vestibulum quis, lacinia eget, nibh. Nunc faucibus pede nec pede. Duis eget risus. In hac habitasse platea dictumst. Cras nunc odio, tempus et, condimentum ut, lacinia quis, est. Fusce ipsum metus, accumsan a, faucibus et, semper vitae, pede. Cras est. Vivamus metus dui, lobortis at, fermentum cursus, dapibus eget, orci. Cras imperdiet. </div>
     <div class="pane">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac ipsum id diam ullamcorper viverra. Ut nec risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque pulvinar. Integer vel est. Sed elementum, tortor nec sollicitudin semper, eros purus suscipit pede, in dictum metus ligula id mauris. Donec augue metus, malesuada a, ultricies eu, volutpat quis, est. Fusce suscipit. Mauris magna. Nulla facilisi. Praesent sem odio, imperdiet ac, vestibulum quis, lacinia eget, nibh. Nunc faucibus pede nec pede. Duis eget risus. In hac habitasse platea dictumst. Cras nunc odio, tempus et, condimentum ut, lacinia quis, est. Fusce ipsum metus, accumsan a, faucibus et, semper vitae, pede. Cras est. Vivamus metus dui, lobortis at, fermentum cursus, dapibus eget, orci. Cras imperdiet. </div>
    </body>
</html>

Andrew Hare 2009-01-08 20:13:33

All 3 are good answers, thanks.

Marc Gravell 2009-01-08 20:44:55

Answer 3

+3 A:

<html>
<body>
    <div style="height: 70%; border: 1px solid #000; overflow: auto;">
        <div style="background: #ddd; height: 1000px;">master</div>
    </div>
    <div style="height: 30%; border: 1px solid; #000; overflow: auto;">
        <div style="background: #ddd; height: 1000px;">detail</div>
    </div>
</body>
</html>

Luca Matteis 2009-01-08 20:15:54

All 3 are good answers, thanks.

Marc Gravell 2009-01-08 20:45:27

ansaurus

tags:

views:

answers:

html / css: best way of writing a preview pane (master/detail)

related questions