PDA

View Full Version : How to layout image gallery?



bluemagica
19 Nov 2010, 09:02 AM
I am making an image gallery, and I need to display images in a grid like layout. I don't want to use any frameworks, and would prefer to do things from scratch. Also, I would prefer not to use tables for the layout, since it will be a pain to add images to the table dynamically.

The layout consists of divs, like:

<div id="gallery">
<div class="uPic">
<img src="1.png">
<p> description </p>
</div>
<div class="uPic">
<img src="2.png">
<p> description </p>
</div>
....
......
....
</div>

to achieve the grid look, I simply "float"-ed all .uPics to left....and given some padding and margin to the #gallery. So far everything works great.


The PROBLEM starts, when I try to give a hover effect to the images. initially the <p> is hidden, and I use jQuery to show it on hover. but on doing so, the images below the one I am hovering over, shifts towards the right instead of moving down. Any ideas?

CyanPrime
20 Nov 2010, 01:00 PM
Hmmm... It's cause the <p> tag is moving into the space of the <div>... Maybe try giving the div below a minus margin-top value when you hover over the div above it?