ji Richard,
if you use "overflow:scroll;" you'll get BOTH scrollbars, but in order to get the desired horizontal-only scrollbar, "overflow:auto;" seems to be the better choice to me.Umm actually thinking of a container "x" pixels long that I can hold images in so that they can be scrolled horizontally. This is the kind of effect acheived in Flash with only a little effort but in CSS?
if you want a fixed-width container, say 692x110px (which fits into your design/page proportions) and have the image gallery scroll inside it, you'll NEED the div holding the pictures with a width of say 3000px all in all. otherwise the gallery would expand the whole browser window/frame/whatever to the right. if this is the desired effect and you WANT the whole browser page to scroll, it should work with only one div.At the moment, I'm using the following code:
<div style="display: block; width: 692px; height: 110px; overflow: scroll; overflow-y: hidden ! important;"> <div style="width: 3000px;"><!-- this width is the total width of all objects in the conatiner-->
<a href="javascript:SwapPic('galleryLrg01.jpg')"><img src="images/gallerySml01.jpg" width="100" height="100" border="0"
alt="" /></a> <a href="javascript:SwapPic('galleryLrg02.jpg')"><img src="images/gallerySml02.jpg" width="100" height="100" border="0"
alt="" /></a> <a href="javascript:SwapPic('galleryLrg03.jpg')"><img src="images/gallerySml03.jpg" width="100" height="100" border="0"
alt="" /></a> <a href="javascript:SwapPic('galleryLrg04.jpg')"><img src="images/gallerySml04.jpg" width="100" height="100" border="0"
alt="" /></a> etc...
</div> </div>
yick! a second almost usefuless nested <div> tag! Also, If I want to populate this dynamically, then I'm going to have to work out the
total width of all the scrolling objects each time! How can I get rid
of this?
i'm not the smartest programmer around, but with php for example you
should be able to simply multiply the number of pictures with their
(standardised?) width. if you don't have a standardised width, the math should not become exceedingly complicated, only a bit more elaborate:
-> add width of picture 1 to width of picture 2 to width of picture n, take into account padding between pictures.
again, this is more of a layman's attempt at it, others feel free to bash me senseless with better approaches, i always like to learn!
- Thorsten
****************************************************** The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
