Center these images? And more...

[mercurius_1@yahoo.com]

I need some help with this page:

http://www.sarahpollock.com/new/x.php

I stole much of this layout from "A List Apart," but I'm no CSS guru
and I desperately need some help with the finishing details because
everything I've tried so far has flopped. I would really appreciate
your insight on the following items:

1 - I would like to get the four images across the top to be in the
overall center of the page (Like most everything else on the page is).
How can I do this with CSS and not resort back to HTML tables?

2 - In Firefox, I am not getting enough space between the bottoms of
the four images and their respective captions (Right now, the captions
appear crunched right up into the bottom edges of the paintings). I've
tried the CSS "padding-top" and even "margin-top" routes, but I'm only
seeing the benefit in IE. Any ideas?

3 - Is there any reasonable CSS way to move the bottom three links up,
closer to the four images? I don't like the vertical distance that
exists right now.

Thank you so much for your time in replying,
-M

[Jim Moe]

Re: Center these images? And more...

mercurius_1@yah oo.com wrote:[color=blue]
> I need some help with this page:
> http://www.sarahpollock.com/new/x.php
>
> 1 - I would like to get the four images across the top to be in the
> overall center of the page (Like most everything else on the page is).
> How can I do this with CSS and not resort back to HTML tables?
>[/color]
Use a table. Set the table's width to 100%. AKAIK [X]HTML provides no
way to place a caption with an image so there is no other effective way to
align the captions with a set of images.[color=blue]
>
> 3 - Is there any reasonable CSS way to move the bottom three links up,
> closer to the four images? I don't like the vertical distance that
> exists right now.
>[/color]
No.
(Wait for it...)

But you could do this:
1. Remove class="float" from the DIV that wraps the images. No need to
float it anyway.
2. Remove the " " from the spacer DIV.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[RoseW]

Re: Center these images? And more...

Re: I would like to get the four images across the top to be in the
overall center of the page

check out the points on photo cards at

http://www.wellstyled.com/css-photo-cards.html

and

http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_2/

for wrap and centering

I made a layout with .content in the css stylesheet to have TRBL margins
(margin: 20 175px 10px 155px;). This .content class is in addition to the
BODY css features.
The float left image class was put inside the content class and I used a
margin on that float left( margin: 0 5px 5px 4px;) so the image was not
butting up against the edge of the content div. By adjusting the Left margin
the images were centered in the middle section of a 3 column page. (Top
Right Bottom Left =TRBL as a reminder for margins)
If you check out the description in the wellstyled.com site it contains
reference to lining up photos in a row and with some fiddling with margins
it could work.

Rose

[kchayka]

Re: Center these images? And more...

Jim Moe wrote:[color=blue]
>
> Use a table. Set the table's width to 100%. AKAIK [X]HTML provides no
> way to place a caption with an image so there is no other effective way to
> align the captions with a set of images.[/color]

Maybe (X)HTML doesn't provide this (natively), but it's not all that
difficult to do in CSS. Somebody else already provided links to some
examples.

This subject has come up in the past often enough, too, and other
samples have been provided. If you searched the newsgroup archives, you
could probably find them in a couple minutes.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Jim Moe]

Re: Center these images? And more...

kchayka wrote:[color=blue]
>[color=green]
>> Use a table. Set the table's width to 100%. AKAIK [X]HTML provides no
>>way to place a caption with an image so there is no other effective way to
>>align the captions with a set of images.[/color]
>
> Maybe (X)HTML doesn't provide this (natively), but it's not all that
> difficult to do in CSS. Somebody else already provided links to some
> examples.
>[/color]
There a few layouts that are simply a lot easier when done with tables.
This is one of them. It is, really, tabular data with the "headings" at
the bottom.
It is a layout that, AFAICT, has no smooth non-table solution,
especially if it is to be browser neutral. "Smooth" in the sense of a
fluid design. A table centers its objects automatically by default. When
the viewport becomes too small, the images are clipped on the right. Nice,
predictable behavior.

The best non-table solution I could find applies a percentage width for
the image container. That percentage is calculated from number of image
containers and any applied margin or padding. In this case its percentage is:
(100% - 2*padding) / 4 = 21%
The images are centered nicely in the viewport. In Mozilla when the
view shrinks, the images overlap each other. IE6's behavior is to wrap the
images (<sigh>). Smooth, but not browser neutral.
And it's a bit of a maintenance hassle. Add or remove an image and the
width must be recalculated.

So, in this instance, a table is a superior choice for presenting that
data. If there is a equally valid non-table solution, please demonstrate
it or provide a link to its description.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[mercurius_1@yahoo.com]

Re: Center these images? And more...

kchayka wrote:[color=blue]
> This subject has come up in the past often enough, too, and other
> samples have been provided. If you searched the newsgroup archives, you
> could probably find them in a couple minutes.[/color]

Well, a query through Google Groups on "center images captions
group:*styleshe ets*" yields only 4 results from this group, one of
which is now this thread. Through the others I've already seen
references to examples on these sites:

http://webdesign.about.com/library/layouts/zphotogallery.htm

http://www.fingerlakesbmw.org/visual/flmgshow.php

http://css.maxdesign.com.au/floatutorial/tutorial0407.htm

*However*, none of these examples centers the images within the overall
page -- you'll note that they are all pinned over to the left margin.
As I stated in my original post, I am not a CSS guru. Furthermore, I've
already tried web searches and other hacks to get this to work; I'm not
interested in wasting more time and I'm fed up that this has to be so
obscure to implement. Can anyone help me with this, or I am stuck
resorting to tables to get this as I want it to appear?

Thank you,
-M

[Spartanicus]

Re: Center these images? And more...

Jim Moe <jmm-list.AXSPAMGN@s ohnen-moe.com> wrote:

[centered image gallery with captions]
[color=blue]
> So, in this instance, a table is a superior choice for presenting that
>data. If there is a equally valid non-table solution, please demonstrate
>it or provide a link to its description.[/color]

http://homepage.ntlworld.com/spartanicus/temp.htm

--
Spartanicus

[Lauri Raittila]

Re: Center these images? And more...

in comp.infosystem s.www.authoring.stylesheets, mercurius_1@yah oo.com
wrote:[color=blue]
> kchayka wrote:[color=green]
> > This subject has come up in the past often enough, too, and other
> > samples have been provided. If you searched the newsgroup archives, you
> > could probably find them in a couple minutes.[/color]
>
> Well, a query through Google Groups on "center images captions
> group:*styleshe ets*" yields only 4 results from this group, one of
> which is now this thread. Through the others I've already seen
> references to examples on these sites:[/color]

Really. Bad luck I, I assume, try
"center image captions group:*styleshe ets"
^
instead, and you get lots. Add "raittila" on query and it will make it
easier.

There should be at least 3 recent threads with discussion
[color=blue]
> http://webdesign.about.com/library/l...otogallery.htm
> http://www.fingerlakesbmw.org/visual/flmgshow.php
> http://css.maxdesign.com.au/floatuto...torial0407.htm
>
> *However*, none of these examples centers the images within the overall
> page -- you'll note that they are all pinned over to the left margin.[/color]

There is no way that works in all browser, as Gecko has not enough
support for CSS. Simple answer:

body {text-align:center}
div {display:inline ;display:inline-block;display:i nline-table}
if you want same width, you can use -moz-inline-block, IIRC, otherwise
use float:left for it.




--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:

https://secure.bmtmicro.com/opera/buy-opera.html?AID=882173

[Jim Moe]

Re: Center these images? And more...

Spartanicus wrote:[color=blue]
>
> [centered image gallery with captions]
>[color=green]
>> So, in this instance, a table is a superior choice for presenting that
>>data. If there is a equally valid non-table solution, please demonstrate
>>it or provide a link to its description.[/color]
>
> http://homepage.ntlworld.com/spartanicus/temp.htm
>[/color]
Brilliant! Thank you. I'll get a grip on CSS someday.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[mercurius_1@yahoo.com]

Re: Center these images? And more...

Jim Moe wrote:[color=blue]
> Spartanicus wrote:[color=green]
> >
> > http://homepage.ntlworld.com/spartanicus/temp.htm
> >[/color]
> Brilliant! Thank you. I'll get a grip on CSS someday.[/color]

It looks great and in a pinch I'll take it (thank you), but the W3C CSS
validator is complaining about the display directive in the CSS:

"Line: 10 Context : #gallery span
Invalid number : display inline-block is not a display value :
inline-block "

Any additional ideas? Or, perhaps more importantly, how does this
repetition of the CSS "display" directive deceive the browsers?

Thanks,
-M

[Lauri Raittila]

Re: Center these images? And more...

in comp.infosystem s.www.authoring.stylesheets, mercurius_1@yah oo.com
wrote:[color=blue]
> Jim Moe wrote:[color=green]
> > Spartanicus wrote:[color=darkred]
> > >
> > > http://homepage.ntlworld.com/spartanicus/temp.htm
> > >[/color]
> > Brilliant! Thank you. I'll get a grip on CSS someday.[/color]
>
> It looks great and in a pinch I'll take it (thank you), but the W3C CSS
> validator is complaining about the display directive in the CSS:
>
> "Line: 10 Context : #gallery span
> Invalid number : display inline-block is not a display value :
> inline-block "[/color]

CSS validator is out of date (for reason). CSS21 where inline-block is
first mentioned is not yet Rec. CSS2 is REC but less supported than
CSS21.
[color=blue]
> Or, perhaps more importantly, how does this
> repetition of the CSS "display" directive deceive the browsers?[/color]

I think I already answered that.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:

https://secure.bmtmicro.com/opera/buy-opera.html?AID=882173

[Del Ferguson]

Re: Center these images? And more...

Spartanicus wrote:[color=blue]
> Jim Moe <jmm-list.AXSPAMGN@s ohnen-moe.com> wrote:
>
> [centered image gallery with captions]
>
>[color=green]
>> So, in this instance, a table is a superior choice for presenting that
>>data. If there is a equally valid non-table solution, please demonstrate
>>it or provide a link to its description.[/color]
>
>
> http://homepage.ntlworld.com/spartanicus/temp.htm
>[/color]

I tried the above example, without any CSS changes, with my images and
found that IE6 displayed each image at the top of the "row" and FF
displayed each image at the bottom of the "row." What CSS will
vertically center variably-sized images in both IE6 and FF? Do I have
to "box" each image and use a hack or should I just stick with a table?
Thanks in advance for any help you can give me?

Del Ferguson