kiwigirl Posted September 1, 2012 Report Share Posted September 1, 2012 Well I've nearly finished this website. Everything has come together without too many issues, except of course this page. The finished result will display 7 images across. Depending how images return from a search, the images will flow down, 7 at a time. I've tried several different things, experimenting with overflow, positioning. I'm sure its something fairly simple that I'm just over looking. If anyone could help that would be great. The next step after this, I'm converting this into php. Please note, slap the default.css file into a folder called 'css', and put the images into a folder called 'images/thumbnails' Cheers, Maria adminImageSearch.html default.css Quote Link to comment Share on other sites More sharing options...
kiwigirl Posted September 1, 2012 Author Report Share Posted September 1, 2012 Maybe my manner wasn't right. I really do need help on this. I'm quite desperate. I'm just a student in training. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 2, 2012 Report Share Posted September 2, 2012 It tends to be a bit slower over the weekends -- people tend to be busy -- so that's probably why you got a bit of a slow reply. I've downloaded the files and taken a look. I think the issue is this -- your .thumbnailVertical div is 64px wide by 94px high, but your image inside it is 96px by 96px (2 px for a border, 15px on the left and right, and the image width is 64px wide. This means that the image inside the .thumbnailVertical is larger than the .thumbnailVertical, causing things to seem to overlap. You have the same issue with .thumbnailHorizontal. The first fix I would do would be to make sure that the images within .thumbnailVertical and .thumbnailHorizontal are the same size or smaller than their container. I would also suggest making .thumbnailVertical and .thumbnailHorizontal have the same height (center the images within them, either horizontally or vertically), to ensure that when items are floated, the flow consistently. I would suggest doing that first and seeing if that either leads you to your answer, or post back if you still need help after you have fixed that issue. Quote Link to comment Share on other sites More sharing options...
kiwigirl Posted September 2, 2012 Author Report Share Posted September 2, 2012 Hey thanks Ben I really appreciate this. I'm sure you know how you can at stare at code so long, where you just can't see the issue. Have made the corrections, and its now up and working. It tends to be a bit slower over the weekends -- people tend to be busy -- so that's probably why you got a bit of a slow reply. I've downloaded the files and taken a look. I think the issue is this -- your .thumbnailVertical div is 64px wide by 94px high, but your image inside it is 96px by 96px (2 px for a border, 15px on the left and right, and the image width is 64px wide. This means that the image inside the .thumbnailVertical is larger than the .thumbnailVertical, causing things to seem to overlap. You have the same issue with .thumbnailHorizontal. The first fix I would do would be to make sure that the images within .thumbnailVertical and .thumbnailHorizontal are the same size or smaller than their container. I would also suggest making .thumbnailVertical and .thumbnailHorizontal have the same height (center the images within them, either horizontally or vertically), to ensure that when items are floated, the flow consistently. I would suggest doing that first and seeing if that either leads you to your answer, or post back if you still need help after you have fixed that issue. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.