Re: [css-d] floating thumbnails
Le 27 mars 2014 à 23:19, Colin (Sandy) Pittendrigh
sandy.pittendr...@gmail.com a écrit :
The HTML:
http://fliesfliesflies.com/fragments/Gallery/ttest.html
The (stripped down) CSS:
http://fliesfliesflies.com/css/rrobo.css
…
In this Gallery page I'd like all thumbnails to float left around the
main display image without making odd, unpredictable white space areas on
the next line after a thumbnail runs off the right side of the display area.
In other words I'd like the thumbnails to float into an orderly table like
arrangement, controlled entirely by the browser, depending on current
viewport width.
Fwiw, I kinda like that irregular mosaic that you have as a result of floating
those blocks combined with different image sizes. Brings a bit of life in the
collection…
Just my 2¥. Anyway,
You have an additional problem though: on hovering over an image thumbnail, the
whole mosaic reorganises itself. You *add* a border to the thumbnails while the
pointer is hovering over the images. Thus the size of each block changes (1px
later/taller). You should also add a border to the default state, something
like:
img { border: 1px solid transparent; }
img:hover { border-color: black; /* or whatever you prefer */ }
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
__
css-discuss [css-d@lists.css-discuss.org]
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/
[css-d] floating thumbnails
The following link displays an HTML fragment taken from a (home-brewed) content management system, stripped down to the relevant block area only: div id=main-gallery-disp ...stuff.../div The HTML: http://fliesfliesflies.com/fragments/Gallery/ttest.html The (stripped down) CSS: http://fliesfliesflies.com/css/rrobo.css In the CSS the codes related to floated thumbnails is at the bottom of the CSS file. Each thumbnail is enclosed in a paragraph element such as: p class=robonava href= http://fliesfliesflies.com/index.php?page=Gallery/Pelicans-skies.jpg; img src=/fragments/Gallery/archive/thumbs/tn-Pelicans-skies.jpg alt= Pelicans-skies.jpg //a/p In this Gallery page I'd like all thumbnails to float left around the main display image without making odd, unpredictable white space areas on the next line after a thumbnail runs off the right side of the display area. In other words I'd like the thumbnails to float into an orderly table like arrangement, controlled entirely by the browser, depending on current viewport width. is this possible with CSS only? -- /* Colin (Sandy) Pittendrigh --oO0 */ __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] floating thumbnails
On Thu, Mar 27, 2014 at 10:19 AM, Colin (Sandy) Pittendrigh sandy.pittendr...@gmail.com wrote: In this Gallery page I'd like all thumbnails to float left around the main display image without making odd, unpredictable white space areas on the next line after a thumbnail runs off the right side of the display area. In other words I'd like the thumbnails to float into an orderly table like arrangement, controlled entirely by the browser, depending on current viewport width. is this possible with CSS only? -- Images are different heights, so that makes p different heights, messing up the floats. Adding min-height: 5em; to .robonav cleaned it up nice for me. Adjust as desired. HTH -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] floating thumbnails
On 3/27/14, 7:19 AM, Colin (Sandy) Pittendrigh wrote: The following link displays an HTML fragment taken from a (home-brewed) content management system, stripped down to the relevant block area only: div id=main-gallery-disp ...stuff.../div The HTML: http://fliesfliesflies.com/fragments/Gallery/ttest.html [...] In this Gallery page I'd like all thumbnails to float left around the main display image without making odd, unpredictable white space areas on the next line after a thumbnail runs off the right side of the display area. In other words I'd like the thumbnails to float into an orderly table like arrangement, controlled entirely by the browser, depending on current viewport width. is this possible with CSS only? Not too sure what you are aiming at, but try this: - Take the float:left out of the h3 above the gallery, allowing it to occupy the full width - Take the float:left and min-height:3em out of p.robonav, replacing them with display:inline-block - You may like to add vertical-align:middle or vertical-align:top to p.robonav as well. Does this give you anything closer to what you want? -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] 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/
Re: [css-d] floating thumbnails
On 3/27/14, 9:25 AM, Colin (Sandy) Pittendrigh wrote: Thank you. I tried all of the above (hadn't noticed there was inline CSS in the h3, so I zapped that no matter what). display:inline-block and vertical-align:top didn't do much in Chrome on Mint linux. the min-height: 3em for p.robonav (Tom Livingston's suggestion) did do what I wanted. On Thu, Mar 27, 2014 at 10:06 AM, David Hucklesby huckle...@gmail.comwrote: Not too sure what you are aiming at, but try this: - Take the float:left out of the h3 above the gallery, allowing it to occupy the full width - Take the float:left and min-height:3em out of p.robonav, replacing them with display:inline-block Hmm. Sounds like you didn’t take the float:left out of p.robnav. That makes a whole lot of difference in any browser. :) FWIW I mostly avoid floats. There are better alternatives, IMHO. -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] 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/
