Jump to content

Rollover Gallery problems, please help?


ccarcia3
 Share

Recommended Posts

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: hover-mockup.jpgGetting 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 by ccarcia3
Link to comment
Share on other sites

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 by ste
Link to comment
Share on other sites

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----------------------
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...