Re: [css-d] images in a grid using DIV's...
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/
Re: [css-d] images in a grid using DIV's...
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 If you need such a splitted-up image for whatever reason, then floating all pieces left inside one, single, div with suitable dimensions for the whole image, will do just fine. Adding a link around on or more image-piece doesn't really change anything. Again: only one outer div needed - not one for each image-piece. regards Georg -- http://www.gunlaug.no __ 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/
Re: [css-d] images in a grid using DIV's...
moises wrote: > Greetings, > > http://www.godofmod.com > > What looks like a single image is actually a table > comprised of 18 > seperate images. Any assistance is greatly > appreciated. Just use a single image. Or is that not possible? - Rahul. __ 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/
[css-d] images in a grid using DIV's...
Greetings, 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 What looks like a single image is actually a table comprised of 18 seperate images. Any assistance is greatly appreciated. thanks __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ 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/
