27.10.2011 2:09, John wrote:
http://coffeeonmars.com/testing/pix/widgets.jpg
I am not sure how to implement this idea, shown at the link above.
I don't quite see what the problem is, but if you just have the <img>
elements in succession, you can wrap a <div class=images>...</div>
around them and use something like
.images { padding: 10px 7px 10px 15px; border: solid #f99;
border-radius: 6px; float: left; }
.images img { margin-right: 8px }
(The padding issue is somewhat tricky, since the right margin on img
elements takes care of spacing between images but also creates extra
space on the right of the last image. So to achieve symmetry, the right
padding of the div element needs to be correspondingly smaller than its
left padding.)
And you would need to set clear: left on the next element.
This approach makes the list of images wrap if they don't fit
horizontally into the available space. If you wish to prevent this and
cause horizontal scrollbar instead, you can add
.image { white-space: nowrap; }
--
Yucca, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
