CSS scrollbar ???

[j4mes_bond25]

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/templates/templates/infinity/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 ???

[tgreer]

Look at the "overflow" attribute.

The trick is handling how content that is bigger than its container is handled, not vice-versa.

[j4mes_bond25]

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:

/* CSS Document */

body 
{
	background-color:white;
}

#logo
{
width:100%;
height:120px;
float:none;
text-align:center;
overflow:hidden;
}

#topMenu
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
	width:100%;
	float:right;
	background-color:black;
}

#topMenu ul
{
	list-style: none;
	background-color:red;
	font-size:medium;
	float:none;
	position:relative;
	padding: 0;
}

#topMenu ul li 
{
	display:inline;
	width:130px;
	color:#FF00FF;
	float:left;
	position:relative;
}

#topMenu a
{
	display:block;
	text-decoration:none; 
	font-size:larger;
	color:red; 
}

#topMenu a:hover
{
	color:blue;
	background-color:white;
	text-transform:uppercase;
}

#content
{
width:100%;
height:400px;
overflow:auto;
}

#contentLeft 
{
width:300px;
margin-top:100px;
float:left;
}

#contentRight 
{
width:650px;
border-left:5px thin black;
}

#contentRight h1
{
font-family:Geneva, Arial, Helvetica, sans-serif;
color:blue;
font-size:large;
text-align:justify;
margin:30px;
}

#contentRight p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:black;
font-size:medium;
text-align:justify;
margin-left:30px;
margin-top:10px;
}

#content p.first-letter:first-letter
{
	margin-left:20px;
	font-size:xx-large;
}

#content ul
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	margin-left:50px;
	list-style-image:url(list_icon.gif);
}

#content table
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:black;
font-size:medium;
margin:30px;
}

#content img.left
{
float:none;
padding:0px;
}

.bold 
{
margin:20px;
font-weight:bold;
}

#bottomMenu
{
border:1px solid red;
height:10px;
background-color:black;
font-family:"Times New Roman", Times, serif;
width:100%;
color:white;
text-align:center;
font-size:medium;
height:20px;
}

[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.

[j4mes_bond25]

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/templates/templates/infinity/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.

/* CSS Document */

body 
{
	background-color:white;
}

#container
{
	height:100%;
	width:100%;
	overflow:hidden;
}

#logo
{
	width:100%;
	height:120px;
	float:none;
	text-align:center;
	overflow:hidden;
}

#topMenu
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
	width:100%;
	float:left;
	background-color:black;
}

#topMenu ul
{
	list-style: none;
	background-color:red;
	font-size:medium;
	float:none;
	position:relative;
	padding: 0;
}

#topMenu ul li 
{
	display:inline;
	width:130px;
	color:#FF00FF;
	float:left;
	position:relative;
}

#topMenu a
{
	display:block;
	text-decoration:none; 
	font-size:larger;
	color:red; 
}

#topMenu a:hover
{
	color:blue;
	background-color:white;
	text-transform:uppercase;
}

#content
{
	width:100%;
	height:400px;
	overflow:auto;
}

#contentLeft 
{
	width:300px;
	margin-top:100px;
	float:left;
}

#contentRight 
{
	width:650px;
	border-left:dotted thin green;
}

#contentRight h1
{
	font-family:Geneva, Arial, Helvetica, sans-serif;
	color:blue;
	font-size:large;
	text-align:justify;
	margin:30px;
}

#contentRight p
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:black;
	font-size:medium;
	text-align:justify;
	margin-left:30px;
	margin-top:10px;
}

#content p.first-letter:first-letter
{
	margin-left:20px;
	font-size:xx-large;
}

#content ul
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	margin-left:50px;
	list-style-image:url(list_icon.gif);
}

#content table
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:black;
	font-size:medium;
	margin:30px;
}

#content img.left
{
	float:none;
	padding:0px;
}

.bold 
{
	margin:20px;
	font-weight:bold;
}

#bottomMenu
{
	border:1px solid red;
	float:left;
	height:10px;
	background-color:black;
	font-family:"Times New Roman", Times, serif;
	width:100%;
	color:white;
	text-align:center;
	font-size:medium;
	height:20px;
}

[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.

[Dani]

It's the same CSS property that allows code to scroll in all of the posts contained within this thread.

[j4mes_bond25]

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).

[j4mes_bond25]

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

[John.Nye]

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.