|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
September 10th, 2009, 10:56 AM
|
|||
|
|||
|
How did bing do this? Image Column
Hi.
Ive been looking at the bing image search page and it is clever how when you resize the page, to for instance make it less wide, the image columns move closer together, untill one of the columns is removed and they again stretch to fill the space. Can someone tell me how you can achieve this flexible column grid that they have made? Can it be done purely with CSS or is some javascript needed? Thanks!
|
|
#2
September 10th, 2009, 01:53 PM
|
||||
|
||||
|
didn't look at exactly how they did it, but you can set a width of a column to a percentage. so....
Code:
<td width="25%">my image</td>
__________________
Three gigs for the secretaries fair Seven gigs for the system source Nine gigs for the coders in smoky lairs One disk to rule them all, one disk to bind them One disk to hold the files, and in the darkness grind'em --------------------------------------------------- It is by caffeine alone that I set my mind in motion. It is by the beans of Java, that my thoughts acquire speed. The hand acquire shakes; the shakes become a warning. It is by caffeine alone that I set my mind in motion.
|
|
#3
September 10th, 2009, 02:10 PM
|
|||
|
|||
|
Hi.
In that way, setting the each column at 25% means no matter how wide the page, there will only be 4 columns. Bings is more advanced, if the page is very wide there could be 18 columns with relative spacing inbetween the columns. How might this be done?
|
|
#4
September 10th, 2009, 02:50 PM
|
||||
|
||||
|
Quote:
1/18 = .05555555555555555555555555555555555555 So set your column widths at around 5.56% ;-) Bing uses a lot of css you can set the width property to a percentage in css as well. Also you can set the padding to give you that relative spacing in between ...
__________________
medialint.com "Beware of the man who works hard to learn something, learns it, and finds himself no wiser than before. He is full of murderous resentment of people who are ignorant without having come by their ignorance the hard way." - Vonnegut - Cat's Cradle, 1963
|
|
#7
September 13th, 2009, 11:08 AM
|
|||
|
|||
|
Update: www.deviantart.com also do this. When you resize the width of the page, the number of columns of images changes. Can someone please tell me how this is done? Is it simple css or does it require javascript?
|
|
#9
October 16th, 2009, 02:39 AM
|
||||
|
||||
|
When you look at the CSS it's not that hard to figure out.
There's two settings that you need to look at. You'd set these up in CSS like Code:
.img_container {
width: 170px;
display: inline-block;
}
Then you need your HTML code like: Code:
<div> <div class='img_container'><img src='' /></div> </div> Then you add as many divs with the class img_container as you need to. This makes all of the boxes that contain the images 170px wide, and they will flow to the next line when the page is not wide enough. Of course, they have a LOT more CSS and JS going on in the background, so like most other things... it won't be as easy as that to make it work just the same as theirs does. But, hopefully this is a step in the right direction.
|
|
| Viewing: Dev Shed Forums > Web Design > HTML Programming > How did bing do this? Image Column |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
