Markup help

[Astronouth7303]

(For want of a better title.)

I'm trying to get a demo gallery To display captions without causing the line of images to break (when they're big or small). The idea is to have the images in a single row (unless you've got a narrow browser) and not break.

The problem is I still want the caption under the image in question.

(Click on the images to see what I mean. Only the first one has a caption.)

Can anyone help me figure out a solution?

(I got the idea and code from Web Monkey)

[Timothy D. Ginn]

I'm not too sure how well this sort of thing would work when stuff's being actively resized; but, for the version of a website I'm working on I did:

<div id="biophotos">
<span style="float: left;"><center><a href="ort.php?bio=adam"><img src="img/bio/adam.jpg" alt="Coordinator">
<br>Adam
<br>(Coordinator)</a></center></span>

<span style="float: left;"><center><a href="ort.php?bio=heather"><img src="img/bio/heather.jpg" alt="Communications">
<br>Heather
<br>(Communications)</a></center></span>
<span style="float: left;"><center><a href="ort.php?bio=mark"><img src="img/bio/mark.jpg" alt="Logistics">
<br>Mark
<br>(Logistics)</a></center></span>
<span style="float: left;"><center><a href="ort.php?bio=tim"><img src="img/bio/tim.jpg" alt="Information Technology">
<br>Tim
<br>(Information Technology)</a></center></span>
</div>

Edit: I should probably note that I haven't tested that in Internet Explorer, yet.

[kirish]

The reason why your images with descriptions are breaking is because they are block elements. Because your containing DIV and your description DIV on the first image are block elements, they expand the width of the screen and cause the remaining images to move below it.

There are a few ways to fix this, but the easiest would be to turn your A elements surrounding your images into block elements themselves, and floating them left. Therefore, the following code should fix your problems:

.livethumbnail
{
	display: block;
	float:left;
}
.footer
{
	font-size: 11px;
	text-align: center;
	color: #ccc;
	clear: both;
}

Also, I see you want the descriptions available when you hover over them. This is fairly easy using css, especially inside of an A element (which makes it IE friendly). Again, the following code should add this functionality:

.livethumbnail .caption {
	color: white;
	display: block;
}
a.livethumbnail:hover .caption {
	display: block;
}
a.livethumbnail:visited:hover .caption {
	display: block;
}

Good luck with the gallery.