ccarcia3 Posted August 7, 2011 Report Share Posted August 7, 2011 (edited) 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 Link to comment Share on other sites More sharing options...
Drycodez Posted August 7, 2011 Report Share Posted August 7, 2011 (edited) use table elements Edited August 7, 2011 by O. Samuel Link to comment Share on other sites More sharing options...
ccarcia3 Posted August 8, 2011 Author Report Share Posted August 8, 2011 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? Link to comment Share on other sites More sharing options...
ste Posted August 8, 2011 Report Share Posted August 8, 2011 (edited) 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 Link to comment Share on other sites More sharing options...
ccarcia3 Posted August 9, 2011 Author Report Share Posted August 9, 2011 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now