•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 373,524 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,766 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 7483 | Replies: 9 | Solved
 |
•
•
Join Date: Jan 2006
Location: Land of Hope & Glory
Posts: 88
Reputation: 
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
CSS scrollbar ??? 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 ???
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,589
Reputation:
Rep Power: 7
Solved Threads: 34
Look at the "overflow" attribute.
The trick is handling how content that is bigger than its container is handled, not vice-versa.
The trick is handling how content that is bigger than its container is handled, not vice-versa.
•
•
Join Date: Jan 2006
Location: Land of Hope & Glory
Posts: 88
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
•
•
•
•
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:
/* 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,589
Reputation:
Rep Power: 7
Solved Threads: 34
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.
Those that you want to display a certain size, but hold longer content, you assign the CSS "overflow: auto" style.
•
•
Join Date: Jan 2006
Location: Land of Hope & Glory
Posts: 88
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
•
•
•
•
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.
/* 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,589
Reputation:
Rep Power: 7
Solved Threads: 34
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
Location: Lawn Guylen, NY
Posts: 10,873
Reputation:
Rep Power: 32
Solved Threads: 109
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
Do you run a computer-related website? Feature it in our niche link directory!
Do you run a computer-related website? Feature it in our niche link directory!
•
•
Join Date: Jan 2006
Location: Land of Hope & Glory
Posts: 88
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
Re: CSS scrollbar ??? •
•
•
•
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).
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
•
•
Join Date: Jan 2006
Location: Land of Hope & Glory
Posts: 88
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
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
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 ;)
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- Previous Thread: Full screen
- Next Thread: 'Decrease' Script Execution Time
