|
|
Posted by dorayme on 04/06/07 22:58
In article <slrnf1c439.oc.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggs> wrote:
> On 2007-04-06, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> > I assume there is simply no good way to centre the mass of
> > rectangles (shrink fit a wrapper and centre wrapper, left/right)
> > here:
> >
> > http://tinyurl.com/ypnfc8
>
....
> Basically shrink-to-fit only "shrinks" to anything when the maximum
> width (width of everything on one line) is smaller than the available
> width.
>
Indeed and is easily observed by moving the closing div to the
wrapper up in the html to enclose just a few (say 8 - for a big
screen, gets a nice big fat margin, left and right) thumnbnail
divs.
> > If this is so, since they are reasonably fine uncentered anyway,
> > a URL to suitable javascript "solution" would be appreciated - if
> > there be such.
>
> In an ideal world you'd do this by making each thumbnail an inline-block
> instead of a float, and putting text-align: center on their container.
> That would give just the effect you want, and might even work on IE
> since Mr Korpela has said that inline-blocks with widths set on them
> give it less of a problem than usual.
>
> I'm assuming you need the thumbnails to be little block boxes in their
> own right-- if you don't need captions or anything, just use inline img
> elements and don't float them. Use text-align: center on the container
> and it will all work much like inline-blocks even in FF.
>
My galleries usually have captions and the URL above was an
abstraction. In fact, to take a snip from an actual site I used:
a {display: block; font-size: 85%;}
and had short captions that sat nicely under each pic.
But ... back to centering...
> The problem if you just use inline-block is that it will look positively
> wrong in FF (I suspect each image on its own line). So you could use
> float, then the JS could sniff out whether inline-block is supported and
> then just go round changing everything to inline block, i.e.
>
> node.style.float = "none";
> node.style.display = "inline-block";
>
> etc.
>
> You can leave #wrapper as text-align: center from the start since it
> won't affect the floats.
>
> Then you'd default to the floats even if JS was turned off, which would
> be OK since they don't look that bad. If JS was on, and the browser
> supported it, then you'd get the centering.
I will just have to put all this on the back burner, I have no
idea how to go now. As someone here once said, one can convince
oneself of the beauty of doing anything (though really, one does
it because once cannot figure out a way to to do it better!)
--
dorayme
Navigation:
[Reply to this message]
|