Rollover Gallery problems, please help?

[ccarcia3]

To w3 forumgoers, I'm having an issue with a modified "hoverbox" rollover gallery that I've set up with CSS. It is based off of the SonSpring Hoverbox code. I modified it so I might have the thumbnails line up in 2 columns of 8 rows, together to one side, then each hover-activated image appear in only one spot on the page, regardless of where the thumbnails are. The latter part of my plan worked (see live site; link is below the image), but the thumbnails refuse to line up in the tan area on the left. I've tried a ton of different methods, but I just don't know how to make that happen. Am I missing something obvious, or is this a tough problem? Here is a sketch of what I'd like to have happen: Getting the thumbnails "lined up nicely" is what I can't figure out.Here is the live site with the issue. You can find the HTML and CSS in the page source.Any suggestions or assistance would be SUPER appreciated!! Thank you so much. - Ccarcia3----------------------------

Edited August 7, 2011 by ccarcia3

[Drycodez]

use table elements

Edited August 7, 2011 by O. Samuel

[ccarcia3]

use table elements

That was one of the methods I already tried, which failed. The list elements no longer worked correctly when nested in a table. Should they have worked?

[ste]

I wouldn't advise using tables. Although they can work for layout, that's not what they are supposed to be used for and using DIVs and CSS makes for more maintainable and lighter code. You should be able to get the layout you are after by simply floating the LI elements and setting a width on the UL. Change your CSS too this

.hoverbox {	cursor: default;	list-style: none;		width: 200px}.hoverbox li {	float: left;		margin: 20px;}

By setting a width on the UL you are making it act like a column, then by floating the LI elements they should stack up as 2 per row. You might have to tinker with the margin/widths but what I posted should work

Edited August 8, 2011 by ste

[ccarcia3]

I wouldn't advise using tables. Although they can work for layout, that's not what they are supposed to be used for and using DIVs and CSS makes for more maintainable and lighter code. You should be able to get the layout you are after by simply floating the LI elements and setting a width on the UL. Change your CSS too this

.hoverbox {	cursor: default;	list-style: none;		width: 200px}.hoverbox li {	float: left;		margin: 20px;}

By setting a width on the UL you are making it act like a column, then by floating the LI elements they should stack up as 2 per row. You might have to tinker with the margin/widths but what I posted should work

To ste, Thank you SO MUCH!!!!! That solution worked WONDERFULLY!I'm going to have to make two separate classes for the two rows, because the rollover image appears differently relative to each row, but that shouldn't be too hard. THANK YOU TONS!!!!!!! - Martha----------------------