chadmichael Posted April 18, 2006 Share Posted April 18, 2006 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? Link to comment Share on other sites More sharing options...
Little Goat Posted April 18, 2006 Share Posted April 18, 2006 (edited) 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 Link to comment Share on other sites More sharing options...
aspnetguy Posted April 18, 2006 Share Posted April 18, 2006 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. Link to comment Share on other sites More sharing options...
chadmichael Posted April 18, 2006 Author Share Posted April 18, 2006 aspnet guy.Thanks MAN! Link to comment Share on other sites More sharing options...
Brendon Branigin Posted April 21, 2006 Share Posted April 21, 2006 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? Link to comment Share on other sites More sharing options...
Jonas Posted April 21, 2006 Share Posted April 21, 2006 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. Link to comment Share on other sites More sharing options...
Brendon Branigin Posted April 21, 2006 Share Posted April 21, 2006 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* Link to comment Share on other sites More sharing options...
Jonas Posted April 21, 2006 Share Posted April 21, 2006 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;} Link to comment Share on other sites More sharing options...
chadmichael Posted April 21, 2006 Author Share Posted April 21, 2006 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 Link to comment Share on other sites More sharing options...
Little Goat Posted April 21, 2006 Share Posted April 21, 2006 well, I'm not sure if this is valid, but I think you can wrap your images with <nobr> tags. LG Link to comment Share on other sites More sharing options...
justsomeguy Posted April 21, 2006 Share Posted April 21, 2006 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. Link to comment Share on other sites More sharing options...
chadmichael Posted April 25, 2006 Author Share Posted April 25, 2006 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! Link to comment Share on other sites More sharing options...
Little Goat Posted April 25, 2006 Share Posted April 25, 2006 hey, if you do that, do the child elements inherit the property?LG Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now