technique for scrolling flim strip of thumbnails

[chadmichael]

I'd like to be able to have a photo album where I have a veritcal row of thumbnails on the side and a full image to the right. The thumbnails on the left will be the menu to select which pic is seen in full view to the right. The problem: there might be a lot of thumbnails. How to I get them to scroll on the left without moving the full view image on the right?

[Little Goat]

I would use frames.make a page with all the thumbnails and put it as one frame, and then you can either use a different page for each image, or use javascript.another option is to use a div with a set width and height, and set the div's css to overflow:scroll; then use javascript for changing the images.LG :)Edit: no I take that back. I would use the scrolling div.

Edited April 18, 2006 by Little Goat

[aspnetguy]

do this

<div style="width:750px">  <div style="float:left;width:200px;overflow:auto;text-align:center">  ...thumbnails here...  </div>  <div style="float:left;width:550px;text-align:center">  ..big photo here...  </div>  <br style="clear:left"/></div>

remember if you add margins or padding you need to take that into account when setting the width of the main div.

[chadmichael]

aspnet guy.Thanks MAN!

[Brendon Branigin]

question on the padding/margins thing asp if you dont mind me asking ;/why is it that in FF when padding is applied it doesnt effect the size of the div but in IE it makes the div bigger?

[Jonas]

If you don't mind me answering... :)When you define a size for an element, width and height, Firefox will give you that size no matter. So if you define width 300px and height 300px, and set padding to be 140, you'll have a space to write your text/content that is width: 300-(140*2) = 20px and height also 20px. IE on the other hand interprets it that you want 300px for content, and so build padding on the outside of the document, and you'll get an element with 580px width and height instead. Firefox's interpretation is way better imo, because it doesn't break the format. No one uses that big paddings anyway.

[Brendon Branigin]

well thats no good, that means anyone using padding or margins on content containing divs will have to write 2 different css files ;/when i was redoing runuo.com's site (not updated yet) i ended up having to apply margins to all the actual content (<p> and <h#> which is still a bad solution because the <h#> tag looses the margin on the 2nd line if it has one.*sighs*

[Jonas]

Yeah, same with margins. Default margins on p and h# elements are different for IE/Opera/FF for some reason. I always start my stylesheets neutralising things that I know about browser differances:html, body {margin: 0;padding: 0;}p,h1,h2,h3,h4,h5,h6 {margin: 0;}

[chadmichael]

I've got the filmstrip of thumbnails scrolling perfectly. Now, I'm trying to do the same thing but have the filmstrip running horizontally along the bottom of the page. I'd like the extra thumbs to run off the right and left bounds of this strip. Then, you would have a scroll bar right and left to get to the extras, similar to how you scroll up and down to get to the extras in the vertical strip. However, the extra thumbs keep showing up beneath and and I get a vertical scroll. How can I force the extras to go to the right and give me a horizontal scroll??Thanks

[Little Goat]

well, I'm not sure if this is valid, but I think you can wrap your images with <nobr> tags. LG

[justsomeguy]

You might also be able to do a <td nowrap>, but probably not if you have a div or something else inside the td. The images need to be children of the td I think.

[chadmichael]

I found the CSS attribute "white-space" that is supposed to replace the stuff like <nobr> and pre.To force the overflow of my thumbnails to proceed in a horizontal fashion, I set the style of the encompassing div to include

  white-space: nowrap

works great!

[Little Goat]

hey, if you do that, do the child elements inherit the property?LG