Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 560
  • Last Modified:

web page, left navigation <td> with scolling center-content <td>

What html code do I use to create the left-navigation with scrolling-center-content functionality in a web page.  I have illustrated what I am looking for below using a <table> but it just makes one, big, unified web page.  Thanks.

<table>
  <tr><td colspan=2>This is my header cell</td></tr>
  <tr>
     <td> This is my left-navigation cell  </td>
     <td>  center-content cell.  This should scroll independently, of left-nav and header  /<td>
   </tr>  
</table>
0
pdschuller
Asked:
pdschuller
  • 4
  • 3
1 Solution
 
alexpercsiCommented:
When you want something to scroll you need to put its content in a div tag, set a fixed width and/or height
on the div tag, and set the overflow property depending on how you want to display the scrollbars.

Read more about the overflow CSS property here:
http://www.w3schools.com/Css/pr_pos_overflow.asp

In your code you could do it like this:
<table>
  <tr><td colspan=2>This is my header cell</td></tr>
  <tr>
     <td> This is my left-navigation cell  </td>
     <td>
         <div style="width:500px;height:500px;overflow:auto;">center-content cell.  This should scroll independently, of left-nav and header  
        </div>
      </td>
   </tr>  
</table>

Open in new window

0
 
pdschullerAuthor Commented:
That might be just what I need since I cant use FRAMES.  

I will check it out in the morning.  Thanks.
0
 
alexpercsiCommented:
The only setback is that you CANNOT use relative widths and heights (e.g. 100%).
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
pdschullerAuthor Commented:
Thanks.  That is really getting me closer to what I want.  However, that produces two vertical scroll bars and I want only one.  The two scroll bars are:  one for the center-content div and one for the web page as a whole.  I can make the scroll bar for the web page as a whole go away if I make the height for the center-content div short, but that is not acceptable cause it would restrict the user too much.  What I want looks like this: there is one vertical scroll bar at the right edge of the browser window and that controls the scrolling in the center-content div.  The header/banner and the left navigation areas stay still.
0
 
alexpercsiCommented:
you can always force the page scrollbar to disappear. try adding style="overflow:hidden" to the body tag and see if it helps.
0
 
pdschullerAuthor Commented:
I'm impressed.  Now it does what I wanted it to do.  It probably seems obvious to you but it would have taken me a long time time figure that out.  Thanks.
0
 
alexpercsiCommented:
It's something I've worked with quite a bit, quite a common question around the workplace as well :). I'm glad I could help.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now