944,028 Members | Top Members by Rank

Ad:
May 6th, 2006
0

CSS scrollbar ???

Expand Post »
Is there any way in CSS (without using any JavaScript) which allows us to NOT to have scrollbars next to "certain contents" only.

I'm getting my inspiration from this website:

http://www.tristarwebdesign.co.uk/te...ity/index.html

My very top space is for "company's logo" & I don't want a scroll bar appearing on the right of it (just as in the above website).

Basically, I'd have more or less similar layout & hence all I want scrollbar is ONLY on the right of content & NOT on the right of "topLogoBanner" or "topMenu" or "bottomMenu".

Does the CSS has something that satisfies me ???
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
j4mes_bond25 is offline Offline
90 posts
since Jan 2006
May 6th, 2006
0

Re: CSS scrollbar ???

Look at the "overflow" attribute.

The trick is handling how content that is bigger than its container is handled, not vice-versa.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
May 6th, 2006
0

Re: CSS scrollbar ???

Quote originally posted by tgreer ...
Look at the "overflow" attribute.

The trick is handling how content that is bigger than its container is handled, not vice-versa.
Thanks for your time & help.

Upto someone extent, it did enter my brain cells, since I didn't quite get the result I wanted.

I'm now although getting the scrollbar for "contentRight", am ALSO having Internet Explorer's own BOTH right & bottom scrollbar.

What I also want is the image (left hand side's image in "contentLeft") "Visible all the time" EVEN if someone scrolls down (using the "contentRight" scrollbar, which is the ONLY scrollbar I would like to have).

I also wonder why am I getting "space" on the top edge of the window (i.e. top of the banner), which is LESS on my browser window but its appearing MORE over the Internet, on this website.

This website can be seen on: members.fortunecity.com/dars2525/home.html

Presently, I've simply worked on 3 links: home.html, about.html, contact.html

My CSS file presently is:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. /* CSS Document */
  2.  
  3. body
  4. {
  5. background-color:white;
  6. }
  7.  
  8. #logo
  9. {
  10. width:100%;
  11. height:120px;
  12. float:none;
  13. text-align:center;
  14. overflow:hidden;
  15. }
  16.  
  17. #topMenu
  18. {
  19. font-family:Georgia, "Times New Roman", Times, serif;
  20. text-align:center;
  21. width:100%;
  22. float:right;
  23. background-color:black;
  24. }
  25.  
  26. #topMenu ul
  27. {
  28. list-style: none;
  29. background-color:red;
  30. font-size:medium;
  31. float:none;
  32. position:relative;
  33. padding: 0;
  34. }
  35.  
  36. #topMenu ul li
  37. {
  38. display:inline;
  39. width:130px;
  40. color:#FF00FF;
  41. float:left;
  42. position:relative;
  43. }
  44.  
  45. #topMenu a
  46. {
  47. display:block;
  48. text-decoration:none;
  49. font-size:larger;
  50. color:red;
  51. }
  52.  
  53. #topMenu a:hover
  54. {
  55. color:blue;
  56. background-color:white;
  57. text-transform:uppercase;
  58. }
  59.  
  60. #content
  61. {
  62. width:100%;
  63. height:400px;
  64. overflow:auto;
  65. }
  66.  
  67. #contentLeft
  68. {
  69. width:300px;
  70. margin-top:100px;
  71. float:left;
  72. }
  73.  
  74. #contentRight
  75. {
  76. width:650px;
  77. border-left:5px thin black;
  78. }
  79.  
  80. #contentRight h1
  81. {
  82. font-family:Geneva, Arial, Helvetica, sans-serif;
  83. color:blue;
  84. font-size:large;
  85. text-align:justify;
  86. margin:30px;
  87. }
  88.  
  89. #contentRight p
  90. {
  91. font-family:Verdana, Arial, Helvetica, sans-serif;
  92. color:black;
  93. font-size:medium;
  94. text-align:justify;
  95. margin-left:30px;
  96. margin-top:10px;
  97. }
  98.  
  99. #content p.first-letter:first-letter
  100. {
  101. margin-left:20px;
  102. font-size:xx-large;
  103. }
  104.  
  105. #content ul
  106. {
  107. font-family:Verdana, Arial, Helvetica, sans-serif;
  108. text-align:justify;
  109. color:black;
  110. margin-left:50px;
  111. list-style-image:url(list_icon.gif);
  112. }
  113.  
  114. #content table
  115. {
  116. font-family:Verdana, Arial, Helvetica, sans-serif;
  117. color:black;
  118. font-size:medium;
  119. margin:30px;
  120. }
  121.  
  122. #content img.left
  123. {
  124. float:none;
  125. padding:0px;
  126. }
  127.  
  128. .bold
  129. {
  130. margin:20px;
  131. font-weight:bold;
  132. }
  133.  
  134. #bottomMenu
  135. {
  136. border:1px solid red;
  137. height:10px;
  138. background-color:black;
  139. font-family:"Times New Roman", Times, serif;
  140. width:100%;
  141. color:white;
  142. text-align:center;
  143. font-size:medium;
  144. height:20px;
  145. }
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
j4mes_bond25 is offline Offline
90 posts
since Jan 2006
May 6th, 2006
0

Re: CSS scrollbar ???

I really didn't understand all of that. The basic trick is to organize your site into a series of DIV elements/containers.

Those that you want to display a certain size, but hold longer content, you assign the CSS "overflow: auto" style.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
May 6th, 2006
0

Re: CSS scrollbar ???

Quote originally posted by tgreer ...
I really didn't understand all of that. The basic trick is to organize your site into a series of DIV elements/containers.

Those that you want to display a certain size, but hold longer content, you assign the CSS "overflow: auto" style.
Thanks for your time & help.

Although it helped me to a greater extent, a tiny couple of setback still remains, I'm afraid.

Let me try best articulating my problem using couple of images.

1st image: http://members.fortunecity.com/dars2525/rightScroll.gif

I've sprayed RED on the far-right of the window, which is although not "scrollable" STILL exist. I would want this scroller NOT be there at all.

I want my "contentRight" scroll-bar EXACTLY at the position where we normally have our "Internet Explorer's scrollbar" (i.e. the red-sprayed area, in my 1st image).

2nd image: http://members.fortunecity.com/dars2525/picScrollUp.gif

Here the image goes UP when we scroll down (using the "contentRight" scroller). I've sprayed GREEN on the area. What I want is the image ALWAYS staying in the center even if someone scrolls down (using the scroll-bar of "contentRight").

These images (on "contentLeft") are different for different links, so I can't set as a background in my "styleSheet" (which I can only do, IF I was using JUST ONE image on all the links).

This may be achieved, if I could right some sort of code in my "styleSheet" about image in "contentLeft" saying that "every image appearing in "contentLeft" should be visible "all the time" even if the text on "contentRight" scrolls down. Then I can simply put different image such as:

>> about.html will have <img src="about.gif">
>> home.html will have <img src="home.gif">
>> contact.html will have <img src="contact.gif">

but ALL of these images will be appearing at the same position in the same way I mentioned-above (i.e. even if someone scrolls down the text of "contentRight", the images remains VIEWABLE).


Basically, I want my scrollbar ONLY appearing EXACTLY the same way as in this website: http://www.tristarwebdesign.co.uk/te...ity/index.html

i.e. with regards to my codes, this would ONLY appear in "contentRight" at the location where "we normally see the Internet Explorer's" scrollbar (i.e. the red-sprayed area).

I've used the "overflow:auto" as well in my styleSheet.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. /* CSS Document */
  2.  
  3. body
  4. {
  5. background-color:white;
  6. }
  7.  
  8. #container
  9. {
  10. height:100%;
  11. width:100%;
  12. overflow:hidden;
  13. }
  14.  
  15. #logo
  16. {
  17. width:100%;
  18. height:120px;
  19. float:none;
  20. text-align:center;
  21. overflow:hidden;
  22. }
  23.  
  24. #topMenu
  25. {
  26. font-family:Georgia, "Times New Roman", Times, serif;
  27. text-align:center;
  28. width:100%;
  29. float:left;
  30. background-color:black;
  31. }
  32.  
  33. #topMenu ul
  34. {
  35. list-style: none;
  36. background-color:red;
  37. font-size:medium;
  38. float:none;
  39. position:relative;
  40. padding: 0;
  41. }
  42.  
  43. #topMenu ul li
  44. {
  45. display:inline;
  46. width:130px;
  47. color:#FF00FF;
  48. float:left;
  49. position:relative;
  50. }
  51.  
  52. #topMenu a
  53. {
  54. display:block;
  55. text-decoration:none;
  56. font-size:larger;
  57. color:red;
  58. }
  59.  
  60. #topMenu a:hover
  61. {
  62. color:blue;
  63. background-color:white;
  64. text-transform:uppercase;
  65. }
  66.  
  67. #content
  68. {
  69. width:100%;
  70. height:400px;
  71. overflow:auto;
  72. }
  73.  
  74. #contentLeft
  75. {
  76. width:300px;
  77. margin-top:100px;
  78. float:left;
  79. }
  80.  
  81. #contentRight
  82. {
  83. width:650px;
  84. border-left:dotted thin green;
  85. }
  86.  
  87. #contentRight h1
  88. {
  89. font-family:Geneva, Arial, Helvetica, sans-serif;
  90. color:blue;
  91. font-size:large;
  92. text-align:justify;
  93. margin:30px;
  94. }
  95.  
  96. #contentRight p
  97. {
  98. font-family:Verdana, Arial, Helvetica, sans-serif;
  99. color:black;
  100. font-size:medium;
  101. text-align:justify;
  102. margin-left:30px;
  103. margin-top:10px;
  104. }
  105.  
  106. #content p.first-letter:first-letter
  107. {
  108. margin-left:20px;
  109. font-size:xx-large;
  110. }
  111.  
  112. #content ul
  113. {
  114. font-family:Verdana, Arial, Helvetica, sans-serif;
  115. text-align:justify;
  116. color:black;
  117. margin-left:50px;
  118. list-style-image:url(list_icon.gif);
  119. }
  120.  
  121. #content table
  122. {
  123. font-family:Verdana, Arial, Helvetica, sans-serif;
  124. color:black;
  125. font-size:medium;
  126. margin:30px;
  127. }
  128.  
  129. #content img.left
  130. {
  131. float:none;
  132. padding:0px;
  133. }
  134.  
  135. .bold
  136. {
  137. margin:20px;
  138. font-weight:bold;
  139. }
  140.  
  141. #bottomMenu
  142. {
  143. border:1px solid red;
  144. float:left;
  145. height:10px;
  146. background-color:black;
  147. font-family:"Times New Roman", Times, serif;
  148. width:100%;
  149. color:white;
  150. text-align:center;
  151. font-size:medium;
  152. height:20px;
  153. }
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
j4mes_bond25 is offline Offline
90 posts
since Jan 2006
May 6th, 2006
0

Re: CSS scrollbar ???

I'm denied access to those images. I'm afraid I cannot add anything to my previous explanations. The scrollbar effect on the site you reference is achieved by styling that one div with "overflow: auto", as I've mentioned.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
May 6th, 2006
0

Re: CSS scrollbar ???

It's the same CSS property that allows code to scroll in all of the posts contained within this thread.
Administrator
Staff Writer
Reputation Points: 1422
Solved Threads: 162
The Queen of DaniWeb
cscgal is offline Offline
13,645 posts
since Feb 2002
May 6th, 2006
0

Re: CSS scrollbar ???

Quote originally posted by tgreer ...
I'm denied access to those images. I'm afraid I cannot add anything to my previous explanations. The scrollbar effect on the site you reference is achieved by styling that one div with "overflow: auto", as I've mentioned.
I'm sorry but regardless of trying "overflow:auto" (as you can seen in my CSS file within "#content"), although I managed to get good success with it (as compared to the result I was getting earlier), I'd 1 tiny problem with the scrollbar itself & second with the "contentLeft" image (which is different for different links).
Attached Thumbnails
Click image for larger version

Name:	picScrollUp.gif
Views:	40
Size:	109.2 KB
ID:	1964   Click image for larger version

Name:	rightScroll.gif
Views:	1253
Size:	64.1 KB
ID:	1965  
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
j4mes_bond25 is offline Offline
90 posts
since Jan 2006
May 6th, 2006
0

Re: CSS scrollbar ???

Image on "contentLeft" is sorted & it STAYS visible even if "contentRight" texts scrolls down.

But the scrollbar is still proving a bit of a pain in the neck. I'll be keeping myself awake till late, until I sort it out.

The updated website can be seen on:

http://uk.geocities.com/darsh2525/about.html
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
j4mes_bond25 is offline Offline
90 posts
since Jan 2006
Jun 3rd, 2006
0

Re: CSS scrollbar ???

It is all accomplished with CSS - The DIV styles are key in achieving what you want and the careful arrangement of the DIV locations and sizes.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
John.Nye is offline Offline
6 posts
since Jun 2006

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Need FireFox refrence in javascript
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: 'Decrease' Script Execution Time





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC