AJAX

CSS scrollbar ???

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Jan 2006

Posts: 89

Reputation: j4mes_bond25 is an unknown quantity at this point

Solved Threads: 0

j4mes_bond25 j4mes_bond25 is offline

Offline

Junior Poster in Training

CSS scrollbar ???

May 6th, 2006

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 ???

Nope, I'm NOT God, but I'm British (which is the next best thing ;)

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: CSS scrollbar ???

May 6th, 2006

Look at the "overflow" attribute.

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

•

Join Date: Jan 2006

Posts: 89

Reputation: j4mes_bond25 is an unknown quantity at this point

Solved Threads: 0

j4mes_bond25 j4mes_bond25 is offline

Offline

Junior Poster in Training

Re: CSS scrollbar ???

May 6th, 2006

•

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:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
/* 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;
}
/* 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;
}

Nope, I'm NOT God, but I'm British (which is the next best thing ;)

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: CSS scrollbar ???

May 6th, 2006

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.

•

Join Date: Jan 2006

Posts: 89

Reputation: j4mes_bond25 is an unknown quantity at this point

Solved Threads: 0

j4mes_bond25 j4mes_bond25 is offline

Offline

Junior Poster in Training

Re: CSS scrollbar ???

May 6th, 2006

•

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.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
/* 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;
}
/* 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;
}

Nope, I'm NOT God, but I'm British (which is the next best thing ;)

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: CSS scrollbar ???

May 6th, 2006

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.

•

Join Date: Feb 2002

Posts: 12,036

Reputation: cscgal is a glorious beacon of light

Solved Threads: 130

cscgal

Offline

The Queen of DaniWeb

Re: CSS scrollbar ???

May 6th, 2006

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

Dani the Computer Science Gal

Follow my Twitter feed! twitter.com/daniweb

•

Join Date: Jan 2006

Posts: 89

Reputation: j4mes_bond25 is an unknown quantity at this point

Solved Threads: 0

j4mes_bond25 j4mes_bond25 is offline

Offline

Junior Poster in Training

Re: CSS scrollbar ???

May 6th, 2006

•

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

Nope, I'm NOT God, but I'm British (which is the next best thing ;)

•

Join Date: Jan 2006

Posts: 89

Reputation: j4mes_bond25 is an unknown quantity at this point

Solved Threads: 0

j4mes_bond25 j4mes_bond25 is offline

Offline

Junior Poster in Training

Re: CSS scrollbar ???

May 6th, 2006

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

Nope, I'm NOT God, but I'm British (which is the next best thing ;)