At 02:36 PM 7/13/2006, moises wrote: >I'm attempting to layout a bunch of images in a grid >using DIV's >instead of a table. I currently have a 3x6 table that >I need to convert >to css. I've seen various example of a 3 to 4 column >layout. Is this >the only way to accomplish this? To see the table in >its current >format, please go here: > >http://www.godofmod.com
Moises, Here are two ways of doing this, replacing the table with a simple series of anchors: http://juniperwebcraft.com/demo/imageGrid/ If your actual application is to portray a single image, there's no need to slice it up, even if you plan to hover-replace every pane. Each segment of the 18-block grid can use background-position to display a different segment of a single large image. For another example of this, see example 7 in my article "CSS Swag: Multi-Column Lists" http://www.alistapart.com/articles/multicolumnlists/ Your use of JavaScript serves two purposes: to create the hover effect (here replaced with CSS a:hover) and to pre-load the hover image to avoid the delay on the first mouseover. I would accomplish the latter without scripting simply by combining the normal & hover state images in the same image file, and changing the background-position on hover. For more on this technique see "CSS Sprites: Image Slicing's Kiss of Death" by Dave Shea, http://www.alistapart.com/articles/sprites/ (Download considerations: Because every image file has its own header, one image file that combines several images will be smaller than all of its component images in separate files. On the other hand, with large images or slow connections there might be the subjective impression of one large image taking longer to download than many smaller images even if they add up to more disk space, because they will render one at a time as they download. Also, background images don't appear until they've completely downloaded compared to foreground images that can render progressively during download.) Regards, Paul ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
