Help to get graphics centered in viewport ...

[tlvp]

Here's a simple memorial page with four photos, not of especial interest
except perhaps to folks familiar with the subjects --

: http://tlvp.net/~fej.math.wes/Milano-2013/index.htm

-- about which I'd like to ask:

what HTML (or, if necessary, STYLE="" attribute values) might I use so as
to assure that, regardless of browser window width, the rows of pictures
wind up laterally *centered* (rather than, as now, flush left). (As the
width grows from under 550 px through roughly 1000 px to over 1200 px, the
count of photos in the first row grows from two to three to four (and the
complementary row beneath it changes from two to one to no pictures in
length); whatever the count I'd like to see *each row* laterally centered.)

I'll be grateful for all relevant ideas. Thanks. Cheers, -- tlvp

[PS: the question is more for ciwas? please move it there; thanks. -- tlvp]
--
Avant de repondre, jeter la poubelle, SVP.

[Gus Richter]

indeed can't be bothered


Wrap all 4 divs inside a wrapper div like so
<div style="text-align:center;">
in order to center all inline elements, however divs are block, so
we must change them to inline-block.
The float:left; is at odds with the centering requirement, so it must go.
For all four instances, change this:
<div style='display: inline; float:left; text-align:center;
padding:0.5em;'>
to this:
<div style='display:inline-block; text-align:center; padding:0.5em;'>

--
Gus

[Denis McMahon]

On Sat, 31 Jan 2015 22:29:07 -0500, tlvp wrote:

> what HTML (or, if necessary, STYLE="" attribute values) might I use so
> as to assure that, regardless of browser window width, the rows of
> pictures wind up laterally *centered*

When I want to do this with thumbnails, I put all the thumbnails inside a
single para with suitable left / right margins (say 50px ea) and text-
align:center.

eg:

<p style="margin-left:50px;margin-right:50px;text-align:center;">
<img .....>
<img .....>
<img .....>
<img .....>
<img .....>
<img .....>
</p>

--
Denis McMahon, denismf...@gmail.com

[tlvp]

Bravo, Gus! Bravo! Bravissimo! Just what the doctor ordered! Thank you!

One unintended side-effect, easily cured: the upper edge of the fourth
photo, the one with 2-line caption, now rose higher on the page than the
upper edges of the earlier photos with their 1-line captions. Under the
previous code all the photos had their upper (and lower) edges aligned.

The cure here (specific to the 2-line caption situation): remove the

<br> &nbsp;

between the close of the 2-line caption and the closing </div> tag
immediately following.

(If there's a general style-attribute way to cause the tops of DIV-blocks
in any given row to become aligned, that'd serve the same purpose.)

Anyway, grazie mille once again; and cheers, -- tlvp

[PS: how far is 280 px x 495 px from being cell-phone-friendly? That's what
one captioned photo here would require in the way of display real estate.]

[tlvp]

Denis, if I didn't have captions I wanted intimately bound up each with its
own picture, that's what I'd have done. Pictures alone? -- no problem.
Picture/caption pairs? -- couldn't get anywhere except with the DIV
patterns to bind picture to its matching caption. But I think Gus Richter's
response will be just the ticket for me :-) . Thanks. Cheers. -- tlvp

[Stan Brown]

On Sat, 31 Jan 2015 22:29:07 -0500, tlvp wrote:

> : http://tlvp.net/~fej.math.wes/Milano-2013/index.htm

>
> what HTML (or, if necessary, STYLE="" attribute values) might I use so as
> to assure that, regardless of browser window width, the rows of pictures
> wind up laterally *centered* (rather than, as now, flush left).

They sure look laterally centered to me (recent version Firefox in
Windows 7). Possibly you've made changes after posting your article.

You ought to use "Milan" or "Milano" consistently, though. FWIW, I'd
go with Milan; "Milano" in otherwise English text seems pretentious
to me.



--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You: http://preview.tinyurl.com/WhyWont

[Gus Richter]

On 2/1/2015 3:49 AM, tlvp wrote:
> One unintended side-effect, easily cured: the upper edge of the fourth
> photo, the one with 2-line caption, now rose higher on the page than the
> upper edges of the earlier photos with their 1-line captions. Under the
> previous code all the photos had their upper (and lower) edges aligned.
>
> The cure here (specific to the 2-line caption situation): remove the
>
> <br> &nbsp;
>
> between the close of the 2-line caption and the closing </div> tag
> immediately following.
>
> (If there's a general style-attribute way to cause the tops of DIV-blocks
> in any given row to become aligned, that'd serve the same purpose.)

vertical-align: top;

See: http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

--
Gus

[tlvp]

On Sun, 01 Feb 2015 13:21:50 -0500, Gus Richter responded to my plea for:

>> ... a general style-attribute way to cause the tops of DIV-blocks
>> in any given row to become aligned ...
>
> vertical-align: top;

Ah! I should have known ... or guessed ... or known to consult your ...

> See: http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

... marvelous info repository :-) . Many thanks again! Cheers, -- tlvp

[tlvp]

On Sun, 1 Feb 2015 07:48:05 -0500, Stan Brown wrote:

> They sure look laterally centered to me (recent version Firefox in
> Windows 7). Possibly you've made changes after posting your article.

Yes, sorry, I quickly implemented Gus Richter's great suggestions.

> You ought to use "Milan" or "Milano" consistently, though. FWIW, I'd
> go with Milan; "Milano" in otherwise English text seems pretentious
> to me.

You have a point there. Yet, pretty much all the folks at that event (the
principal likely viewers of the page) tend to think of the locale
interchangeably as Milan and Milano. No matter, there's still grounds for
striving for terminological consistency on the page (and avoiding what
Fowler has blasted as "elegant variation" :-) ).

Thank you. Cheers, -- tlvp

[Gus Richter]

On 2/1/2015 3:49 AM, tlvp wrote:

> [PS: how far is 280 px x 495 px from being cell-phone-friendly? That's what
> one captioned photo here would require in the way of display real estate.]

1. Open the page containing your image, or whatever.

2. Try opening Firefox's menu and click on the Wrench (Open Web
developer tools) and then select Responsive Design View (or use
Ctrl+Shift+M)

3. View the page at 320 x 480

You can select Landscape or Portrait view, other dimensions or manual
via the Grippie(s). Is this of use to you?

--
Gus

[tlvp]

On Mon, 02 Feb 2015 03:24:00 -0500, Gus Richter responding to:

>> ... how far is 280 px x 495 px from being cell-phone-friendly?

> 3. View the page at 320 x 480

Ah. 320 is way broad enough for 280 width of each of my image files, even
w/ padding added; and 480 is exactly the height of each of them -- so I
guess, even without having undertaken the (Ctrl+Shift+M) ritual, it's not
so far from friendly at all.

Once more time is free, I'll probably follow your steps more faithfully.

> You can select Landscape or Portrait view, other dimensions or manual
> via the Grippie(s). Is this of use to you?

Thanks. I think I'm good for now :-) . Cheers, -- tlvp

[tlvp]

On Mon, 02 Feb 2015 03:24:00 -0500, Gus Richter urged:

> ... select Responsive Design View (or use
> Ctrl+Shift+M) ...

Wow! A whole new world beckons! I'm as wide-eyed at this as I was in my
first glass-bottom boat over coral reefs in shallow tropical water :-) .

Thank you! Cheers, -- tlvp

(PS: and, indeed, that little page of pictures stands up surprisingly well.
Evidently the world's moved beyond my old Nokia 6610's 128x128 screen, eh?]

[Gus Richter]

On 2/2/2015 8:57 PM, tlvp wrote:
> (PS: and, indeed, that little page of pictures stands up surprisingly well.
> Evidently the world's moved beyond my old Nokia 6610's 128x128 screen, eh?]

Small screens may be as small as 240×320 pixels.
http://www.gongol.com/research/media/handheldscreens/
http://www.onbile.com/info/mobile-screen-sizes/
The thing is that even if your image were to be quite wide, the viewer
may be able to view the whole image in Landscape, otherwise he could
scroll horizontally to view the balance of the image in Portrait.

The intrinsic width of the image may be overridden by the use of
min-width and max-width in order to fit/size an image to the
available screen size.
See:
<http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent>
<https://duckduckgo.com/?q=min+width+and+mobile+phone&t=ffnt>

--
Gus

[dorayme]

In article <makie9$4es$3...@dont-email.me>,

Might have to be a bit careful on how this is done if you don't want
the last line of pics to be slightly indented? Some browsers (webkit
ones I think) do this. Perhaps safer to run the img element text
together instead of the return as you have it, and add a general style
of a margin on the img element itself.

Just one other point, you literally address the request for the rows
to be laterally centred by centring the images themselves. Fair
enough. But there is a closely allied wish - it is a matter of taste
of course, but one that some people would prefer - which has the
container (in your case a paragraph element) centred (as you do) but
not *all* the rows. The last row, for example, in an arrangement like
this, can look better if it just seems to go with the flow and keep to
the left. if this is preferred, then a slightly different solution is
required.

--
dorayme

[tlvp]

On Thu, 05 Feb 2015 10:01:23 +1100, dorayme wrote:

> ... there is a closely allied wish - ... - which has the

> container (in your case a paragraph element) centred (as you do) but
> not *all* the rows. The last row, for example, in an arrangement like
> this, can look better if it just seems to go with the flow and keep to
> the left. if this is preferred, then a slightly different solution is
> required.

An intriguing challenge, dorayme -- whose solution utterly eludes me.

(Sigh! I never was very good at solving puzzles :-{ .) Cheers, -- tlvp

[dorayme]

In article <w01jei13f6ur.1p...@40tude.net>,

Well, this is easily done by either modifying the simple inline way of
Denis, or floating or inline block ways.

Modifying Denis's, just leave out his "text-align:center;". The
container element (his p) is itself centred by margins and that is
enough.

Try modifying:

<http://dorayme.netweaver.com.au/denisCentring.html>

by deleting the text-align, which affects *not* the paragraph element
but what is *in* it, that is, the img elements.

--
dorayme

[Christoph M. Becker]

dorayme wrote:

> Well, this is easily done by either modifying the simple inline way of
> Denis, or floating or inline block ways.
>
> Modifying Denis's, just leave out his "text-align:center;". The
> container element (his p) is itself centred by margins and that is
> enough.

It seems to me that it's debatable whether that is enough. For most
viewport widths the img elements are not exactly centered, then.

--
Christoph M. Becker

[dorayme]

In article <mavpmi$rdf$1...@solani.org>,

You are right. If exact centring of the blocks is wanted, as probably
would have been the case, not even debatable!

I apologise for not respecting the desire to centre - perhaps my view
that this is aesthetically overrated made me careless in my
intervention here!

I have had a page demonstrating the bit of extra needed (due to
Bootnic) at

<http://dorayme.netweaver.com.au/thumbsThatWrap/thumbLandscapeGallery_i
nline.html>

--
dorayme

[Christoph M. Becker]

Lucky you, that Bootnic came to the rescue -- otherwise, who knows what
would have happened... ;)

An interesting solution, by the way. I wish I'd have more time to
investigate it more thoroughly -- on a first glance it seems overly
complicated, but I presume it's a necessary workaround for different
clients triggering the resize event rather differently. Anyhow, details
would probably be off-topic here. :)

--
Christoph M. Becker

[BootNic]

In article <mbbhqi$tlj$1...@solani.org>,

The script was created in 2007.

[url] https://groups.google.com/forum/#!topic/alt.html/9WZ84cv_Ozk [/url]

Today, I think I would just use @media (min-width: ) {}

Even so, one would still need to account for the left & right: margins,
paddings and borders of the elements involved, and an additional 15 px or
so just in case there is a scroll bar, and possibly account for any
whitespace between elements.

Knowing the above information along with maximum number of images in a row
or the maximum screen resolution width, it should be rather elementary to
generate the necessary @media statements.

[url] http://bootnic.x10host.com/Image-Gallery-Example.html [/url]


--
BootNic Tue Feb 10, 2015 11:04 am
It is better to die on your feet than to live on your knees!
*Emiliano Zapata*

[dorayme]

In article <mbbhqi$tlj$1...@solani.org>,

"Christoph M. Becker" <cmbec...@arcor.de> wrote:

> > <http://dorayme.netweaver.com.au/thumbsThatWrap/thumbLandscapeGallery_i
> > nline.html>
>
> Lucky you, that Bootnic came to the rescue -- otherwise, who knows what
> would have happened... ;)

Nothing bad at all would have happened, the whole blocks of floats
just would not have been perfectly centred and there is nothing much
wrong with that. This perfect centring is mostly an over-rated desire
by people with under-developed senses of aesthetics, so don't worry
about *my* luck, worry about the dubious luck of those who so hanker
after this quality. Still, it is an interesting technical matter.

--
dorayme