How can I vertically scroll content in one table column with browser scrollbar?

I am a bit stumped on how to do this. I have created an image showing what I would like to achieve:

The black text is the HTML code, the red is the description of the element and the purple is what I would like to achieve.

Some may take umbrage that I am using tables to position and display content. That is their choice but since tables and table elements have NOT been deprecated that is what I want to use for the moment (to get the site running the way I want quickly). There WILL be a time when I will convert the site to DIV and CSS styling elements, but that will take a lot of learning for me to do. Until then I will use tables - in a way that they were not meant to be used as I understand it (but they are very easy to implement). In the meantime if anyone can be so kind as to help me out with this I would very much appreciate it. Thanks given in advance.

Hi there judgedredd,

and a warm welcome to these forums. :winky:

As pointed out to you at codingforums.com ,
table layouts are unlikely to receive help from
members.

If you provided members with your content, then
you would probably get some postive assistance,

coothead

1 Like

What you are actually doing is stalking me and dissuading others from responding to my query because of an arrogant outlook on things - because you have a problem with my query and call my site design ‘ancient’.

if you have nothing to offer then keep your arrogant opinions to yourself.

Hi judgedredd,

Welcome to the forums. Unfortunately coothead speaks the truth. I do not know where you found this “ancient” layout design but it’s been over ten years since I last encountered this layout method. I’m guessing a lot of the members here have never seen this old method of website layout. This isn’t an opinion but fact. You need to familiarize yourself with modern layout techniques and use a responsive layout that works across a wide spectrum of devices not just desktops.

If you follow coothead’s advice and provide the forum with your content I’m sure people here could provide you with all the assistance you might need.
Thanks

Steve

1 Like

I think the safest and most common way to code is to write for what the majority of current browsers support. Then there is “bleeding edge” that not all browsers support and may change over time on the one side, and “old” that some browsers still support but are likely to stop supporting at any time.

Both “old” and “bleeding edge” require work to keep and get things working to an acceptable level, and if there is a strong need or desire to write either it should be understood that short term fixes are just that, short term.

That said, despite the problems and difficulties inherent with “old” code - i.e. tables for layout, inline styles - there are members here that are willing to tackle the problems.

However, it is much more likely that those members will be inclined to help when the code is available as text rather than an image requiring them to manually write the code instead of easily copying/pasting it.

4 Likes

Hi there judgedredd,

As I am in a benevolent mood, I will ignore your petulant remarks,
and give you the solution that will work for your “ancient” layout. :winky:

1 . - Put this HTML in the table cell…<div></div>

2 . - Put this CSS in the stylesheet…div { height: 100%; overflow: auto; }

coothead

This is a polite reminder to all to refrain from making their replies personal or antagonistic.

Ok. Thanks to all those that responded and apologies to coothead. I have taken on board everyone’s comments and have gone ahead and created a very basic page with the elements that I need. The page can be found here:

<link removed>

I found that coothead’s solution, thanks for that, is what I had tried earlier today (although I gave the div an id of content), after mulling over the info I had come across while researching this, and that wasn’t what I really wanted. The scrollbar appears inside the table column. What I would like is for the browser scrollbar to be used to scroll this section up and down. I am beginning to wonder if this is at all possible.

The HTML code is here:

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>
<title>Scrollbar test page</title>

<link rel="stylesheet" type="text/css" href="test2.css">

</head>

<body bgcolor="#ffffff" text="#000000" link="#000080" vlink="#ff0000" alink="#00ff00">

<table align="center" width="971" border="1" height="800">
<tr>
<td height="50" colspan="2"><center>HEADER IMAGE GOES HERE</center>
</td>
</tr>
<tr>
<td colspan="2" height="30">
<div class="row">
<ul>

<li><a href="item1.php">Item1</a></li>

<li><a href="item2.php">Item2</a></li>       

<li><a href="item3.php">Item3</a></li>

<li><a href="item4.php">Item4</a></li>

<li><a href="item5.php">Item5</a></li>

<li><a href="item6.php">Item6</a></li>

<li><a href="item7.php">Item7</a></li>

<li><a href="item8.php">Item8</a></li>

<li><a href="item9.php">Item9</a></li>

<li><a href="item10.php">Item10</a></li>

<li><a href="item11.php">Item11</a></li>

<li><a href="item12.php">Item12</a></li>

<li><a href="item13.php">Item13</a></li>

</ul>

</div>
</td>
</tr>
<tr>
<td valign="top"width="171">

<ol>

<li><a href="page1.php">Page1</a></li>

<li><a href="page2.php">Page2</a></li>

<li><a href="page3.php">Page3</a></li>       

<li><a href="page4.php">Page4</a></li>

<li><a href="page5.php">Page5</a></li>

<li><a href="page6.php">Page6</a></li>

<li><a href="page7.php">Page7</a></li>

<li><a href="page8.php">Page8</a></li>

<li><a href="page9.php">Page9</a></li>

<li><a href="page10.php">Page10</a></li>

<li><a href="pag11.php">Page11</a></li>

<li><a href="page12.php">Page12</a></li>

<li><a href="page13.php">Page13</a></li>

<li><a href="page14.php">Page14</a></li>

</ol>
</td>
<td width="800">
<div id="content">
        Test Position of Text and whatnot1<br />
        Test Position of Text and whatnot2<br />
        Test Position of Text and whatnot3<br />
        Test Position of Text and whatnot4<br />
        Test Position of Text and whatnot5<br />
        Test Position of Text and whatnot6<br />
        Test Position of Text and whatnot7<br />
        Test Position of Text and whatnot8<br />
        Test Position of Text and whatnot9<br />
        Test Position of Text and whatnot10<br />
        Test Position of Text and whatnot11<br />
        Test Position of Text and whatnot12<br />
        Test Position of Text and whatnot13<br />
        Test Position of Text and whatnot14<br />
        Test Position of Text and whatnot15<br />
        Test Position of Text and whatnot16<br />
        Test Position of Text and whatnot17<br />
        Test Position of Text and whatnot18<br />
        Test Position of Text and whatnot19<br />
        Test Position of Text and whatnot20<br />
        Test Position of Text and whatnot21<br />
        Test Position of Text and whatnot22<br />
        Test Position of Text and whatnot23<br />
        Test Position of Text and whatnot24<br />
        Test Position of Text and whatnot25<br />
        Test Position of Text and whatnot26<br />
        Test Position of Text and whatnot27<br />
        Test Position of Text and whatnot28<br />
        Test Position of Text and whatnot29<br />
        Test Position of Text and whatnot30<br />
        Test Position of Text and whatnot31<br />
        Test Position of Text and whatnot32<br />
        Test Position of Text and whatnot33<br />
        Test Position of Text and whatnot34<br />
        Test Position of Text and whatnot35<br />
        Test Position of Text and whatnot36<br />
        Test Position of Text and whatnot37<br />
        Test Position of Text and whatnot38<br />
        Test Position of Text and whatnot39<br />
        Test Position of Text and whatnot40<br />
</div>
    </td>
</tr>
<tr>
<td height="30" colspan="2"><center>FOOTER INFORMATION GOES HERE</center>
</td>
</tr>
</table>

</body>

</html>

The CSS code is:

@charset "utf-8";
/* CSS Document */

.row ul{
padding: 2px 0px 0px 0px;
margin: 0px;
white-space: nowrap;
text-align: center;  
list-style-type: none;
font-family: Courier;
} 

.row ul li{
    margin: 0px;
}  

.row ul li{
    display: inline;
    vertical-align: middle;
}

/* changing the colour, size and other attributes of the font in the horizontal menu bar */
ul li a{
color: #2e3192;
padding-left: 8px;
padding-right: 8px;
text-decoration:none;
font-size: 15px;
}

#content {
    height: 100%;
    overflow: auto;
}

ol {
list-style-type: none;
}

ol li{
    margin:0px;
}  

ol li{
    display: block;
    vertical-align: middle;
} 

ol li a{
color: #2e3192;
padding-left: 2px;
padding-right: 2px;
text-decoration:none;
font-size: 15px;
line-height: 20px;
font-family: courier;
}

I have seen various solutions but each one is not doing what I would like as they are dealing with DIV elements mostly. One more thing… the top menu items and left menu items, even though they are live links, don’t have pages attached to them. I created the links to show the layout of the page and what I am hoping to achieve.

Typical behavior is for scrollbars to be associated with the content that is scrollable. That is, browser chrome scrollbars scroll the page content and element scrollbars scroll the element content.

My gut feeling is that purposely changing behavior from what users would it expect it to be is not a good idea. But don’t let that stop you from experimenting if you are so inclined.

It is, with limitations, possible to style scrollbars

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

It might be possible to have most page content display in “fixed position” and somehow use JavaScript to scroll only the overflowing content.

However, fixed position is best used extremely sparingly as it can cause all sorts of issues. And I’m not sure if it’s even possible to tie the browser chrome scrollbars to element content using JavaScript.

2 Likes

Ok. Thanks for that explanation. It did make me think as to how I navigate a site.

Here is a fuller explanation as to why I wanted the content area to be scrollable via the browser’s scrollbar.

When I go to a site and scroll down a regular page the top menu, and side menu if there is one, would invariably disappear through the top of the browser window. I would then have to scroll back up to go to another page or section via the menu up there.

All I wanted to do was to be able to create my page so that the content would scroll via the browser scrollbar, as that is what would normally be used, leaving the top and side menus in place which would allow the user to immediately go to another section of the site without having to scroll back up to the top of the page which would save time. That is the only reason I wanted to use the browser’s scrollbar to scroll the content section of the table.

But as I wrote this I begun to think that the only way to do that would be to get rid of the tables and use styled DIV elements. I have not gone down that road because I am not very proficient (yet) with CSS and DIVs. I can do it over a lengthy period of time, but I would much rather get my site up and running with the look as to how I want it and content to be in place and then take a breather and go back and redo everything without tables and bring it more up to date (code-wise).

I thought I would have a go at this, just as a bit of a challenge. The result sort of works, but it’s a bit fragile and magic numberish for me, as the content has to be pushed around with margins to clear the fixed elements which are of course taken out of the natural flow.
It’s not the type of layout I would recommend.

Thank you very much for this SamA74. This is actually what I am looking for as it does everything that I have asked.

My only concern is cross-browser compatibility as I have found browsers interpret CSS differently. Which brings up a point I failed to mention… One of the main, forgotten, reasons I use, and have always used, tables is because all browsers render them the same way. After all, the code is pretty straight forward and there is very little wiggle room for ‘interpretation’ of where things should go.

Not so for CSS. I have used CSS in a menu that is cross-browser compatible which was developed by Steve Gibson at grc.com and he spent 2 months on it! This is from a highly able programmer. You can find the menu and code here: https://www.grc.com/menudemo.htm

When I adapted it for my own use it took more than two solid weeks to get it running the way I wanted to.

In comparison, styling tables, and their content, is 10 x easier but one is not able to do fancy things with them like you can with CSS styled items.

Tables may be ‘ancient’ but they work very well in presenting things the way I want and the way my users like (I have got feedback on the site I am working on and it works very nicely - even on iPhones).

After spending a few hours on it I have been able to get SamA74’s code to look the same as the table design I have. You can view it here:

I had to change a few things around to get it to look the same in all 4 browsers I have installed. Here is the html code:

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>
<title>Scrollbar test2</title>

<link rel="stylesheet" type="text/css" href="test3.css">

</head>

<body bgcolor="#ffffff" text="#000000" link="#ff8000" vlink="#ff0000" alink="#00ff00">

<div id="wrap">

<div class="top">
  <header><h1>The Header</h1></header>
  <nav>The Menu</nav>
</div>
<div class="mid">
  <aside>Sidebar</aside>
  <main>
    <p>The main content of the page.</p>
    <p>Lorem ipsum dolor sit amet, falli dignissim dissentias ei pro, amet dolor eripuit in qui. Praesent imperdiet at mei. Usu laoreet instructior te, eos ad commune offendit. An nec apeirian antiopam periculis, vitae voluptaria voluptatibus at mel.</p>
    <p>Duo ei quodsi quaeque maiorum, id per epicuri omittantur. Debitis suscipiantur pro an, ne insolens inciderint mea, usu id iusto tamquam consetetur. Unum consul te his, duo malis torquatos ad, clita indoctum has et. Nonumes blandit corrumpit pri ne,
      tation ridens senserit in nam. Animal blandit voluptua pri ea. Ad pro quis eruditi.</p>
    <p>Per graeci convenire suavitate no, nibh elit probatus cum et. Qui ad malis nemore feugiat, nec eu cibo consequuntur. Ne pro graeco adipisci, in iriure saperet definiebas cum. Ea sit quot probo labore, ei vix etiam eruditi vocibus. Cu vero munere periculis
      per, ius aperiri forensibus democritum et, ex quo postea insolens conceptam.</p>
    <p>Ea numquam tincidunt pri, mei utinam scribentur et. Ne quo platonem splendide reprimique, et eam vero noster percipitur. In ludus nobis vim, in mazim quaestio petentium usu. Elit tota cu eam, dolorem sapientem cu est, nisl quot iriure vis ea. Graeco
      epicuri consequat ea ius, quo ut viderer expetendis, at vim stet imperdiet. Cum an novum utroque definitiones, eum solet molestiae cu.</p>
    <p>Bonorum maluisset no nam, vidisse adipisci vim ex. Omnis ullum oportere vis cu, ne eum suas corpora. Cu odio inermis principes duo, cu eam alia impedit. Semper fastidii senserit ius id. Eam mandamus signiferumque cu.</p>
    <p>Lorem ipsum dolor sit amet, falli dignissim dissentias ei pro, amet dolor eripuit in qui. Praesent imperdiet at mei. Usu laoreet instructior te, eos ad commune offendit. An nec apeirian antiopam periculis, vitae voluptaria voluptatibus at mel.</p>
    <p>Duo ei quodsi quaeque maiorum, id per epicuri omittantur. Debitis suscipiantur pro an, ne insolens inciderint mea, usu id iusto tamquam consetetur. Unum consul te his, duo malis torquatos ad, clita indoctum has et. Nonumes blandit corrumpit pri ne,
      tation ridens senserit in nam. Animal blandit voluptua pri ea. Ad pro quis eruditi.</p>
    <p>Per graeci convenire suavitate no, nibh elit probatus cum et. Qui ad malis nemore feugiat, nec eu cibo consequuntur. Ne pro graeco adipisci, in iriure saperet definiebas cum. Ea sit quot probo labore, ei vix etiam eruditi vocibus. Cu vero munere periculis
      per, ius aperiri forensibus democritum et, ex quo postea insolens conceptam.</p>
    <p>Ea numquam tincidunt pri, mei utinam scribentur et. Ne quo platonem splendide reprimique, et eam vero noster percipitur. In ludus nobis vim, in mazim quaestio petentium usu. Elit tota cu eam, dolorem sapientem cu est, nisl quot iriure vis ea. Graeco
      epicuri consequat ea ius, quo ut viderer expetendis, at vim stet imperdiet. Cum an novum utroque definitiones, eum solet molestiae cu.</p>
    <p>Bonorum maluisset no nam, vidisse adipisci vim ex. Omnis ullum oportere vis cu, ne eum suas corpora. Cu odio inermis principes duo, cu eam alia impedit. Semper fastidii senserit ius id. Eam mandamus signiferumque cu.</p>
    <p>Lorem ipsum dolor sit amet, falli dignissim dissentias ei pro, amet dolor eripuit in qui. Praesent imperdiet at mei. Usu laoreet instructior te, eos ad commune offendit. An nec apeirian antiopam periculis, vitae voluptaria voluptatibus at mel.</p>
    <p>Duo ei quodsi quaeque maiorum, id per epicuri omittantur. Debitis suscipiantur pro an, ne insolens inciderint mea, usu id iusto tamquam consetetur. Unum consul te his, duo malis torquatos ad, clita indoctum has et. Nonumes blandit corrumpit pri ne,
      tation ridens senserit in nam. Animal blandit voluptua pri ea. Ad pro quis eruditi.</p>
    <p>Per graeci convenire suavitate no, nibh elit probatus cum et. Qui ad malis nemore feugiat, nec eu cibo consequuntur. Ne pro graeco adipisci, in iriure saperet definiebas cum. Ea sit quot probo labore, ei vix etiam eruditi vocibus. Cu vero munere periculis
      per, ius aperiri forensibus democritum et, ex quo postea insolens conceptam.</p>
    <p>Ea numquam tincidunt pri, mei utinam scribentur et. Ne quo platonem splendide reprimique, et eam vero noster percipitur. In ludus nobis vim, in mazim quaestio petentium usu. Elit tota cu eam, dolorem sapientem cu est, nisl quot iriure vis ea. Graeco
      epicuri consequat ea ius, quo ut viderer expetendis, at vim stet imperdiet. Cum an novum utroque definitiones, eum solet molestiae cu.</p>
  </main>
</div>
<div id="footer">The Footer</div>

</div>

</body>

</html>

And here is the CSS code:

@charset "utf-8";
/* CSS Document */

#wrap {
	padding: 5px 0px 0px 0px;
	min-width: 650px;
	width: 971px;
   	margin: 0px auto;
}

/* * {
  outline: red dotted 1px;
}*/

body {
  margin: 0;
}

.top, aside {
  position: fixed;
}

.top {
  top: 0;
  width: 971px;;
  z-index: 2;
}

header {
  text-align: center;
  background: #f99;
  padding: 1em;
}

nav {
  background: #9f9;
  text-align: center;
  padding: 0.3em;
}

.mid {
  position: relative;
  margin-top: 9em;
}

aside {
  background: #ff9;
  top: 141px;
  bottom: 0;
  width: 171px;
  padding: 0.3em;
}

main {
  margin-left: 12em;
  margin-bottom: 1em;
  padding-right: 10px;
  width: 770px;
}

p {
text-align: justify;
}

#footer {
  position: fixed;
  background: #9af;
  text-align: center;
  width: 971px;
  padding: 0px;
  top: 97.5%;
}
/* top: calc(100vh - 1em);  original footer code*/


@media screen and (max-width: 30em) {
aside {
    width: 100%;
    bottom: auto;
  }
  .mid {
    margin-top: 10em;
  }

  main {
    margin-left: auto;
  }
}

I am a bit puzzled by the .mid class code as there is no reference to that in the html. Can you explain that SamA74?

The only thing I have left to do now is to understand how to tweak things so that when a browser is resized everything centers in the window (including the fixed elements) and the data in the main content area is 100% the width of the new resized window. At the moment a scroll bar appears for the horizontal scrolling of the content area.

Hi there judgedredd,

I hope that you don’t think that I hell bent on upsetting
you but when clicking on your link Firefox does this…

coothead

3 Likes

And Chrome says this:-

Edit As a precaution for others I have removed the link.
Since you posted the code it should not be necessary.

I recommend you look into the malware problem.

3 Likes

Hi there judgedredd,

I have just noticed that you are using this DOCTYPE…

I would suggest that you can now safely use this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Scrollbar test2</title>

<link rel="stylesheet" href="test3.css" media="screen">

…in your future projects. :winky:

coothead

1 Like

Hi to both of you,

First I have changed the doctype to the HTML5 protocol - and everything still works as before. Thank you coothead for pointing that out.

This may seem to gooff topic but you have both bought up points that need to be discussed as you both posted images of what happens when using certain browsers to visit my site.

Has anyone tried to actually see what my site page has? Has anyone actually been brave enough to throw the shackles of ‘percieved authority’, about what one site has on its page or contains in its code, off? After all you both heeded the warning that came up in your browsers did you not? Do any of you think that I would be stupid enough to send you to a site that would harm your machines? or be unethical enough to cause any of you harm? I have no bad intentions to anyone here - none whatsoever.

Here is the screen shot of my redstorm7.com folder:

Edit: image link was also to redstorm7, and image failed to render - TechnoBear

his is what my front page looks like:

Edit: image link was also to redstorm7, and image failed to render - TechnoBear

The screen shot again of my redstorm7 directory after uploading the images that I gave the links to above is in the next post.

Edit: image link was also to redstorm7, and image failed to render - TechnoBear

So you see, there is nothing in the directory that will harm anyone.

I have figured out what the class .mid is. I somehow didn’t see the code correctly. I found it this morning when looking at the code again while tweaking it.

Off Topic:

Unfortunately, there are people who would do just that, so forum policy is to remove links where such warnings appear. It is nothing personal, and you’ll find other threads around the place where similar things have happened. While we all understand that false positives can and do occur, it is not reasonable to expect forum members to take the risk of visiting a site where such a warning is in place - especially so when the site belongs to a new member whose reliability is, as yet, unknown.

Unfortunately, a screenshot of a directory would not have been enough to prove there is no malicious content there. A favourite trick of hackers is to hide malicious code in legitimate files, in an attempt to prevent the site owner from detecting it.

I’m sure you’ll understand why we have to be cautious.

3 Likes

Here is a valid reason my I don’t like using CSS and DIV elements to create a website… Try and view it in Safari (v. 5.7.1) here (on a new site - NOT redstorm7.com):

Scrollbar test 2

and you will see a small gap between the top of the sidebar and the green menu which reveals that the text goes behind it and all the way to the left. I have been unable to correct this.

In Opera, Chromium, Firefox and Maxthon the rendering is fine with the text staying where it should. Why should I spend an inordinate amount of time trying to figure out how to render the page properly in Safari when it is clearly the fault of the developers of that browser not to follow the implementation of CSS rules properly?

With the site design the way it is, with a table, the site renders correctly in all 5 browsers!

It seems that CSS is open to interpretation more so than plain HTML.