image scroll with horizontal scrollbar?

[questions]

I would like the arrowed scroll image to scroll with the scrollbar, horizontally to the right. Is this possible?

Please refer to this page:
http://www.freewebs.com/testpractic/horizontal-scroll.html
CSS here:
http://www.freewebs.com/testpractic/web-horizontal.css
CSS code for the scrollbar image highlighted:

#content-scroll {
position: absolute;
margin-left: 0px;
margin-top: 275px;
display: block;
width: 934px;
height: 32px;
background: url('scroll-1.gif');
}


Thank you.

[Nile]

Check out fixed positioning:
http://www.w3schools.com/Css/pr_class_position.asp
Then you'll have to make it work in IE:
http://www.dynamicdrive.com/forums/showthread.php?p=154648

[TheJoshMan]

You could use this, it doesn't really "scroll" it just stays in one position on the screen while the rest of the content scrolls across.



#content-scroll {
background-attachment:scroll;
background-color:transparent;
background-image:url(scroll-1.gif);
background-repeat:no-repeat;
display:block;
height:32px;
margin-left:0;
margin-top:275px;
position:fixed;
width:934px;
}

[questions]

Check out fixed positioning:
http://www.w3schools.com/Css/pr_class_position.asp
Then you'll have to make it work in IE:
http://www.dynamicdrive.com/forums/showthread.php?p=154648

I gave it a try in IE and it worked without special coding. Maybe they've fixed their problem.


You could use this, it doesn't really "scroll" it just stays in one position on the screen while the rest of the content scrolls across.



#content-scroll {
background-attachment:scroll;
background-color:transparent;
background-image:url(scroll-1.gif);
background-repeat:no-repeat;
display:block;
height:32px;
margin-left:0;
margin-top:275px;
position:fixed;
width:934px;
}


Yeah. This is exactly what I meant. It seems like it scrolls and that's all that matters!

But, do you think that the following are necessary:
background-repeat:no-repeat;
background-color:transparent;
background-attachment:scroll;

I just put in this and it worked:
position:fixed;

Thanks much.

[Nile]

They are all necessary.
background-repeat is so it doesn't repeat itself.
background-color is so IE doesn't get mixed.
and background-attachment: scroll... Well it is what it sounds like.

[questions]

They are all necessary.
background-repeat is so it doesn't repeat itself.
background-color is so IE doesn't get mixed.
and background-attachment: scroll... Well it is what it sounds like.

I guess what I meant was
1. background-repeat... would it repeat itself if you are already defining it as
display:block and giving its height and width?
2. background-color - the default is transparent. What happens in IE... do they add a color to the background of a gif?

Thanks.

[TheJoshMan]

to answer your question about background repeating, yes and no.

If you define the height and width, for all intents and purposes the image should not repeat. However, in your code you have the image set as the background of a DIV. This DIV is set to a height which is much larger than the image itself, which could cause some browsers to automatically repeat the image to fill the entire height of the DIV.

As far as the background-color... This is not necessary. I defined it in my code because I didn't notice you had already defined the background-color of the element "body".

[questions]

Ok. Cool. Better to be safe than sorry on the image repeating.
So, "transparent" background means that the user's background of choice will appear, instead of the default "white"?

[TheJoshMan]

No, I'm affraid not.

By using "Transparent" to define the background color of an element, that just means that the color of whatever element is underneath that element will show.

If you define the background of "body" as transparent, then it will fall back to the default "white" or as I've recently discovered in IE -5 I believe the default BG color is somewhere in the range of "#f9f9f9" or something to that effect.


Hope this helped.

[questions]

Thanks. So, from what I understand, if I define the background color of the body or page then I don't have to define the background color of the element. Correct?

[TheJoshMan]

not unless you want the element to have a different background color.

It is good practice however, to define the background color even if you just define it as "transparent"

[questions]

Thanks.

[Medyman]

I gave it a try in IE and it worked without special coding. Maybe they've fixed their problem.

Nile meant IE6. IE7 supports position:fixed.