Jaffar,
OK. You will first want to put the scrolling content into some sort of
container element object like a <div></div> block or <td></td> etc.
Typically, I choose to put this sort of content into a <div></div>
container as this element is a block level element that will force a line
break after it. For this example, I shall use the <div>:
CSS code:
#scrollable {
margin:0; // no space above or below, left or right of container object
padding:0; // no space above or below, left or right between content
inside of container box and edges of container box
width:400px; // fix the width (i.e. x axis in 2 dimensional space),
overflow-x property will determine what to do when the content exceeds
this length
height:400px; // fix the height (y axis in 2 dimensional space),
overflow-y property determines browser behavior when content exceeds
height
overflow-x:hidden; // we tell the browser to hide excessive horizontal
content and so the content effectively scrolls vertically based on
overflow-y property below
overflow-y:auto;
background-image:url(/web-context-root/images/your_bg_image.gif);
background-repeat:repeat-y; // if you want the image to fill up the
container vertically only, repeatedly stacked on top of itself in 2
dimensional space
// the image size is based on native image size so if the image is 30px
wide and 20px tall, it will repeat vertically 20 times until it reaches
400px in our
// example, effectively making a vertical "column" of the image
}
XHTML markup:
<div id="scrollable">There is your background image doing whatever you
told it to do behind this text. This text will scroll and so will the
background image inside of this container box. This container box will
also have a scrollbar that is not easy to access with JAWS!! And, the
scrollbar will not appear unless this text is taller than 400px because
we set the overflow-y to scroll automatically if needed. Lastly, if you
want to do neat stuff to this box at runtime in browser memory, you can
access the box via the DOM and reset the values by doing something like
document.getElementById('scrollable').style.overflow-x='auto'; ...</div>
I chose the property values arbitrarily (and even some of the properties
themselves), but this should give you a good jump on your solution, and
you can view the CSS 2 reference at
http://www.w3schools.com/css/css_reference.asp for quick look ups.
Please note that overflow-x and overflow-y properties were originally
proprietary Microsoft extensions and only supported in IE, but they have
since been supported by Mozilla Gecko (Firefox), Safari, and Opera. And,
in fact, the W3C CSS 3 is working on a draft for overflow-x and
overflow-y specs.
Hope this helps!
- Jeff
----- Original Message -----
From: "jaffar" <jaffar@xxxxxxxxxxxxx>
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Tuesday, December 04, 2007 7:08 PM
Subject: Re: CSS and picture scrolling
Hi jeff. It is exactly as you guessed. Cheers!
----- Original Message -----
From: "Jeffrey Fidler" <jfiddler2@xxxxxxxxxxx>
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Wednesday, December 05, 2007 1:24 AM
Subject: Re: CSS and picture scrolling
Jaffar,
I am not sure I understand exactly what you are needing to do. I am
guessing at it, but are you needing a background image that will scroll
as the forground text that appears on top of it (the background image)
scrolls? If you can please provide a bit more detail, I think we can
formulate a solution!
Kind regards,
Jeff
----- Original Message -----
From: "jaffar" <jaffar@xxxxxxxxxxxxx>
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Tuesday, December 04, 2007 4:58 AM
Subject: CSS and picture scrolling
Hi All. Need some advise here. I need to produce a CSS which allows
immages to scroll with certain portions of text on a client's website.
I am referring particularly to, for example, headings and captions.
How do I do this? Is there any tutorial that can help me achieve
this? Cheers and thanks for any help!
__________
View the list's information and change your settings at
//www.freelists.org/list/programmingblind
__________
View the list's information and change your settings at
//www.freelists.org/list/programmingblind
__________
View the list's information and change your settings at
//www.freelists.org/list/programmingblind
__________
View the list's information and change your settings at
//www.freelists.org/list/programmingblind
