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;
} 
