Thread: Markup help
View Single Post
  #3   Spotlight this post!  
Unread 18-05-2006, 23:07
kirish's Avatar
kirish kirish is offline
Registered User
AKA: Kevin Irish
FRC #0100 (Wildcats)
Team Role: Mechanical
 
Join Date: Jan 2005
Rookie Year: 2004
Location: Woodside, California
Posts: 19
kirish is a name known to allkirish is a name known to allkirish is a name known to allkirish is a name known to allkirish is a name known to allkirish is a name known to all
Re: Markup help

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:
Code:
.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:
Code:
.livethumbnail .caption {
	color: white;
	display: block;
}
a.livethumbnail:hover .caption {
	display: block;
}
a.livethumbnail:visited:hover .caption {
	display: block;
}
Good luck with the gallery.
__________________
"you'd better be prepared for the jump into hyperspace. It's unpleasantly like being drunk."
"What's so unpleasant about being drunk?"
"You ask a glass of water."