Results 1 to 2 of 2

Thread: How to layout image gallery?

  1. #1
    Join Date
    Nov 2010
    Posts
    1

    Question How to layout image gallery?

    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:
    Code:
    <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?

  2. #2
    Join Date
    Nov 2010
    Posts
    6
    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?

Similar Threads

  1. Image gallery template
    By rev_ollie in forum General Questions
    Replies: 0
    Last Post: 15 May 2010, 09:53 AM
  2. CSS help with image gallery
    By zebrasectomy in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 16 Jul 2009, 07:16 PM
  3. Help with Image Gallery
    By erek4 in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 03 Mar 2009, 09:00 AM
  4. Image Gallery: Looks Different in IE & FF
    By jihanemo in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 10 Nov 2008, 08:06 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •