Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to make scrolling text under header?

Status
Not open for further replies.
vanbeugen

vanbeugen

IS-IT--Management
Feb 4, 2005
62
0
0
NL
In the HTML below I use divs contentleft, contentcenter and contentright. Because the text under the Header Contentright is so long I would like to make a scrollbar for the text of contentrigth but withoud the Header contentrigth, so that you alwaus see the header when scrolling the text. Is this possible with these content-codes?

This is the HTML I have so far:
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>glish.com : CSS layout techniques : static width and centered</title>
<style type="text/css"><!--
#contentcenter { background-color: #eee; float: left; padding: 0px; width: 300px }
#contentheader { background-color: #fff }
#contentheader h1 { font-size: 14px; margin: 0px; padding: 16px }
#contentleft { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright p { font-size: 14px }
#toptext { text-align: left; margin-top: 10px; margin-right: auto; margin-left: auto; padding: 0px; width: 650px }
body { text-align: center }
h1 { font-size: 14px; margin: 0px 10px 10px; padding-top: 10px }
p { margin: 0px 10px 10px }-->
</style>
</head>

<body>
<div id="toptext">
<div id="contentheader">
<h1><a href="home.asp">Top Text</a>, page with three columns: left, centered, right.</h1>
</div>
<div id="contentleft">
<h1>Header Contentleft</h1>
<p class="greek">This is the left column</p>
</div>
<div id="contentcenter">
<h1>Header Contentcenter</h1>
<p>This is the center column</p>
</div>
<div id="contentright">
<h1>Header Contentright</h1>
<p>This is the right column. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla blaBla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla</p>
</div>
<p><br clear="all">
<!-- without this little <br /> NS6 and IE5PC do not stretch the toptext div down to encopass the content DIVs -->
</div>
</body>

</html>
 
Sort by date Sort by votes
Give #contentright height as well as width (so as to lock its size) and add [tt]overflow: auto;[/tt] to it. If you do not add a fixed value for its height it will not work because height is by default auto, meaning that the element will extend to fit the contents.
 
Upvote 0 Downvote
Hello Vragabond,

Thanks for your reaction. I think I understand what you mean, but that's not what I mean. Let me try to clarify. In my code there is one div with the name contentright. But when I want the scrollbar for the text I assume I need 2 divs in the column at the right hand side: one for the header (fixed position) and one for the scrolling text. But how to declare 2 divs for the right column? And of course the 2 divs should be nicley one under the other, irrespective of the screen-resolution of the user.

 
Upvote 0 Downvote
Try this:
Code: 
<div id=contentright>
<div id=contentrightheader>This is the Header of content right</div>
<div id=contentrightcontents>This is the contenmt of content right and needs to scroll.</div>
</div>

CSS:

#contentrightheader{
width:100%;
height:20%;
overflow:hidden;
}

#contentrightcontents{
width:100%;
height:80%;
overflow:auto;
}

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
My suggestion still holds. Only that you would do something like vacunita suggests via:
Code: 
#contentright h1 {
 /* fixed header */
}

#contentright p {
 /* scrolling text */
}
Depending on your design I would limit appropriate elements both in width and height.
 
Upvote 0 Downvote
Thanks for your reactions. I have dones as Vagunita suggests but the #contentrightcontents is not scrolling. I must make a mistake, but cannot find out what I'm doing wrong. Could you please help?

This is the code I have with the codes of Vagunita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>glish.com : CSS layout techniques : static width and centered</title>
<style type="text/css"><!--
#contentcenter { background-color: #eee; float: left; padding: 0px; width: 300px }
#contentheader { background-color: #fff }
#contentheader h1 { font-size: 14px; margin: 0px; padding: 16px }
#contentleft { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright p { font-size: 14px }
#toptext { text-align: left; margin-top: 10px; margin-right: auto; margin-left: auto; padding: 0px; width: 650px }
body { text-align: center }
h1 { font-size: 14px; margin: 0px 10px 10px; padding-top: 10px }
p { margin: 0px 10px 10px }-->

#contentrightheader{width:100%; height:20%; overflow:hidden; }
#contentrightcontents{width:100%; height:80%; overflow:auto; }
</style>
</head>

<body>

<div id="toptext">
<div id="contentheader">
<h1><a href="home.asp">Top Text</a>, page with three columns: left, centered, right.</h1>
</div>


<div id="contentleft">
<h1>Header Contentleft</h1>
<p class="greek">This is the left column</p>
</div>

<div id="contentcenter">
<h1>Header Contentcenter</h1>
<p>This is the center column</p>
</div>

<div id="contentright">
<div id="contentrightheader">This is the Header of content right</div>
<div id="contentrightcontents">This is the contenmt of content right and needs to scroll. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla blaBla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla</p>
</div>
</div>
<p><br clear="all">
<!-- without this little <br /> NS6 and IE5PC do not stretch the toptext div down to encopass the content DIVs -->
</div>








</body>

</html>
 
Upvote 0 Downvote
#contentright, being a parent of the useless markup you have has no defined height. Meaning that it's height is auto or expands via the content. W3 rules say that when parent element does not have specific height applied to it, child element with a percentage height will ignore the percentage height and revert to auto.

I still think that additional divs with classes are useless. You need a header and a paragraph within #contentright, so why not use that. Since we cannot see your design, it is hard for us to suggest what sizes to restrict your paragraph and heading size -- but that is all you need to do. So, once again.

1. Create a css structure like the one I showed in my post above.
2. Give any element you need to a specific width and height. Given your request, only element would be <p> within the #contentright, but if you will resort to percentage height, then you will also need to define the height of the #contentright (preferably not in percentage as that will cause the same issue as explained above). But once again, I cannot tell you to make your <p> height 200px because I don't know how that works with your design.
 
Upvote 0 Downvote
Not much to add to Vrag's post, except emphasizing dimensions. for overflow:scroll; to actually do something.

The DIV needs defined dimensions, since its 100% of a DIV without any dimensions, it will just be 100% of whatever size the outer DIV is, and it will just grow along with it however much content there is in there.





----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Hi Vragabond and Vacunita,

Thanks for your reactions. I've been out of internet for some days, so I did not see your reactions. I think I understand what you mean to say, but I think my problem is not yet solved. Below I changed my code as you advised. contentright is scrolling nicely as you can see. But my point is that I would like to keep the Header contenright seperate and not scrolling, so that only the text under the header is scrolling. Hope you can still help me.

The final design of the website can be seen at (but in this html the text in the colmun at the right is short and in other htmls the text is longer, so shoud be scrolling).

Here is the HTML I made on your advice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>glish.com : CSS layout techniques : static width and centered</title>

<style type="text/css"><!--
#contentcenter { background-color: #eee; float: left; padding: 0px; width: 300px }
#contentheader { background-color: #fff }
#contentheader h1 { font-size: 14px; margin: 0px; padding: 16px }
#contentleft { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright { background-color: #fff; float: left; padding: 0px; width: 175px; height: 345px; overflow: auto; }
#contentright p { font-size: 14px }
#toptext { text-align: left; margin-top: 10px; margin-right: auto; margin-left: auto; padding: 0px; width: 650px }
body { text-align: center }
h1 { font-size: 14px; margin: 0px 10px 10px; padding-top: 10px }
p { margin: 0px 10px 10px }-->
</style>

</head>

<body>

<div id="toptext">
<div id="contentheader">
<h1><a href="home.asp">Top Text</a>, page with three columns: left, centered, right.</h1>
</div>

<div id="contentleft">
<h1>Header Contentleft</h1>
<p class="greek">This is the left column</p>
</div>

<div id="contentcenter">
<h1>Header Contentcenter</h1>
<p>This is the center column</p>
</div>

<div id="contentright">
<h1>Header Contentright</h1>
<p>This is the right column. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla blaBla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla</p>
</div>

<p><br clear="all">
<!-- without this little <br /> NS6 and IE5PC do not stretch the toptext div down to encopass the content DIVs -->

</div>

</body>
</html>
 
Upvote 0 Downvote
You've followed the first example, not any of the other. Plus, I cannot see any scrolling in Mozilla or IE.

Again, you need to do this:
Put width, height and overflow: auto; on your p within #contentright. Something like:
Code: 
#contentright p { 
  font-size: 14px;
  width: 100px;
  height: 50px;
  overflow: auto;
}
You will of course need to specify the dimensions yourself in whatever unit you want to use.
 
Upvote 0 Downvote
OK, thanks, I fixed it. Thanks for all your help!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
171
bdwilcox
bdwilcox
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
286
Mike Lewis
Mike Lewis
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
320
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
168
pmonett
pmonett
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
331
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top