How can I display h2 text below each gallery image?

[hironaka]

I have set up a gallery page as:

div id image_container
div id image_1 class the box

So here is the css of my gallery page

/*image/BOX

---

---

*/

.the_box {
float: left;
height: 251px;
width: 251px;
overflow: hidden;
position: relative;
margin: 0 29px 29px 0;
}

.the_box h2 {
font-size: 10px;
}

.the_box a {
display: block;
position: relative;
}

.the_box a img {
height: 251px;
width: 251px;
position: absolute;
top: 0;
left: 0;
}

#image_container {
width: 811px;
margin: 20px 0px 20px;
padding: 0;
float: left;
list-style: none;
}

ul#image li a {
height: 248px;
width: 248px;
float: left;
}

#image_3,
#image_6,
#image_9,
#image_12,
#image_15,
#image_18,
#image_21,
#image_24,
#image_27,
#image_30 {
margin: 0;
}

Unfortunately, the h2 text is blocked off by each image. How do I get it to fit underneath each image? Any tips would be greatly appreciated!

[Fantikerz]

It would probably be easier to help if you had an example online. It looks like you may have some float issues though, so try pasting this above each

tag:

If that works, then I would get rid of the inline style and make a .clear class. :)

[soap]

put the image and the h2 in the same div.

make the image display:block and be on top of the h2.

set the h2 width to be the same width as the containing div or the image.

center or left (or right if that floats your boat) align the h2.

voila

[hironaka]

Hey guys thanks for the help!

[Author]

Posts