Jump to content
Stef's Coding Community
kiwigirl

Overlapping DIV's

Recommended Posts

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

post-45607-018298700 1346478541_thumb.jpg

post-45607-018344000 1346478563_thumb.jpg

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...