Stylesheets - CSS image gallery question

Author

CSS image gallery question

akress@gmail.com

2007-01-27, 11:02 pm

Hello,

I'm trying to find a way to setup a row of images horizontally, so that
the number of images will automatically fit the width of the screen
depending on the resolution on the user's monitor. For example, I
usually use something like this:

<div id="lrgcontainer">
<div id="img"><a href="#">Name of Image <br /> <img src="img.jpg"
alt="blah" /></a></div>
<div id="img"><a href="#">Name of Image <br /><img src="img.jpg"
alt="blah" /></a></div>
<div id="img"><a href="#">Name of Image <br /><img src="img.jpg"
alt="blah" /></a></div>
</div>

The styling behind said layout would be something like this:

#lrgcontainer {
width:800px;
}
#img {
margin: 0 50px 0 50px;
float:left;
}

And then if I need another row of images, I would do something like <br
style="clear:left;" /> and repeat. However this (in my opinion) creates
a lot of redundant repetition of id="img", etc. Is it possible to fill
the width automatically with as many images as possible, and then when
there is no more room, put them on the next line down?

I'd appreciate any input.

Thanks,
Adam

dorayme

2007-01-27, 11:02 pm

In article
<1168834306.430270.74700@l53g2000cwa.googlegroups.com>,
akress@XXXXXXXXXX wrote:

> Hello,
>
> I'm trying to find a way to setup a row of images horizontally, so that
> the number of images will automatically fit the width of the screen
> depending on the resolution on the user's monitor. For example, I
> usually use something like this:
>
> <div id="lrgcontainer">
> <div id="img"><a href="#">Name of Image <br /> <img src="img.jpg"

Instead of all this, have you tried what is utterly simple first:

<div>
<img src="img1.jpg" alt="blah">
<img src="img2.jpg" alt="blah">
<img src="img3.jpg" alt="blah">
<img src="img4.jpg" alt="blah">
<img src="img5.jpg" alt="blah">
</div>

?

I leave out the height and widths, but you should not. You can
put them in above, or, if they are all the same dims, in the css
under img {}

Use HTML 4.01 as a doctype, then you don't need the pesky " />"s
(but not just for this reason, that's a bonus one)

--
dorayme

Ben C

2007-01-27, 11:02 pm

On 2007-01-15, Jukka K. Korpela <jkorpela@cs.tut.fi> wrote:
[snip]
>
> Does that really work? There must be something that you haven't told us (how
> about a URL?), since a div element occupies the available width, so floating
> cannot be applied.

No, a div element occupies whatever width its styles tell it to occupy.
The default for a div (display: block and width: auto) is for its outer
margin width to occupy all the available width. But the width for floats
with width: auto (the default) is the shrink-to-fit width in CSS 2.1.

The OP's example looks like it would work in most browsers, and I think
the OP wasn't complaining it didn't-- just that it was cumbersome.

[snip]
> But you don't really need the attributes if you have applied systematic HTML
> coding and will keep things that way. You can use, say,
>
> #lrgcontainer div {
> margin: 0 50px 0 50px;
> float:left;
> width: 200px;
> }
>
> Here I've assumed, for definiteness, that all images are 200 pixels wide.

There's no need to set width on the floats, see above. The images can be
even be different widths and it will all work.

Ben C

2007-01-27, 11:02 pm

On 2007-01-15, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> In article
><1168834306.430270.74700@l53g2000cwa.googlegroups.com>,
> akress@XXXXXXXXXX wrote:
>
>
> Instead of all this, have you tried what is utterly simple first:
>
><div>
><img src="img1.jpg" alt="blah">
><img src="img2.jpg" alt="blah">
><img src="img3.jpg" alt="blah">
><img src="img4.jpg" alt="blah">
><img src="img5.jpg" alt="blah">
></div>

This is much simpler, but no good if you need a caption under each
image.

I can't think of a better way to do this (without inline-block) than
what the OP's doing with floats.

Ben C

2007-01-27, 11:02 pm

On 2007-01-15, akress@XXXXXXXXXX <akress@XXXXXXXXXX> wrote:
> Hello,
>
> I'm trying to find a way to setup a row of images horizontally, so that
> the number of images will automatically fit the width of the screen
> depending on the resolution on the user's monitor. For example, I
> usually use something like this:
>
><div id="lrgcontainer">
> <div id="img"><a href="#">Name of Image <br /> <img src="img.jpg"
> alt="blah" /></a></div>
> <div id="img"><a href="#">Name of Image <br /><img src="img.jpg"
> alt="blah" /></a></div>
> <div id="img"><a href="#">Name of Image <br /><img src="img.jpg"
> alt="blah" /></a></div>
></div>

Use class instead of id as Jukka explained.

> The styling behind said layout would be something like this:
>
> #lrgcontainer {
> width:800px;
> }
> #img {
> margin: 0 50px 0 50px;
> float:left;
> }
>
> And then if I need another row of images, I would do something like <br
> style="clear:left;" /> and repeat. However this (in my opinion) creates
> a lot of redundant repetition of id="img", etc.

The repetition can be alleviated with judicious use of a descendent
selector (also in Jukka's post).

> Is it possible to fill the width automatically with as many images as
> possible, and then when there is no more room, put them on the next
> line down?

Yes, the floats will just do that! Try it. If there isn't room for a
left float in the width available, it goes down until it can find the
left edge and they carry on stacking up from the left, just the
behaviour you want.

If the images are all the same height it'll work well. If not you'll
find they snag on each other and some extra trickery will be needed.

Jukka K. Korpela

2007-01-27, 11:02 pm

Scripsit Ben C:

> No, a div element occupies whatever width its styles tell it to
> occupy.

Of course, but the whole picture of styles wasn't revealed to use.

> The default for a div (display: block and width: auto) is for
> its outer margin width to occupy all the available width.

Indeed.

> But the
> width for floats with width: auto (the default) is the shrink-to-fit
> width in CSS 2.1.

Yet the CSS 2.0 specification (which has the status of "W3C Recommendation")
says that for a floated non-replaced element (like div) auto means 0.

> The OP's example looks like it would work in most browsers,

Quite possibly, but that's because they violate the current specification
and use a draft (which itself says that it should not be cited except as
"work in progress") instead.

When there's the simple option of explicitly specifying the width, it's
clearly the best option.

> The images can
> be even be different widths and it will all work.

Of course they can, but you should still set their widths.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Ben C

2007-01-27, 11:02 pm

On 2007-01-15, Jukka K. Korpela <jkorpela@cs.tut.fi> wrote:
> Scripsit Ben C:
>
>
> Of course, but the whole picture of styles wasn't revealed to use.

So why didn't you say that in the first place instead of the misleading
statement "Does that really work? There must be something that you
haven't told us (how about a URL?), since a div element occupies the
available width, so floating cannot be applied."?

I wouldn't normally be so exacting, but are you not the same Jukka K.
Korpela who only the other day was demanding that posters should not
give advice to others on subjects they did not understand completely
themselves?

In this case it was revealed that those divs were floated.

I think we can assume default styles (as specified in CSS 2.1) for
everything else-- in this case width: auto is the relevant one.

>
> Indeed.
>
>
> Yet the CSS 2.0 specification (which has the status of "W3C
> Recommendation") says that for a floated non-replaced element (like
> div) auto means 0.

Correct.

Opera, Firefox and Konqueror all approximate to CSS 2.1 to varying
degrees, and they all implement CSS 2.1 shrink-to-fit width for
auto-width floats, not the CSS 2.0 behaviour.

In fact I am interested to know if you can suggest to me a CSS 2.0
conforming browser.

Johannes Koch

2007-01-27, 11:02 pm

Ben C schrieb:
> Opera, Firefox and Konqueror all approximate to CSS 2.1 to varying
> degrees,

Or the other way round :-)
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Jukka K. Korpela

2007-01-27, 11:02 pm

Scripsit Ben C:

> I wouldn't normally be so exacting, but are you not the same Jukka K.
> Korpela who only the other day was demanding that posters should not
> give advice to others on subjects they did not understand completely
> themselves?

I normally don't reply to people who make personal remarks behind a fake
name or nickname and a forged address, but your message is otherwise
reasonable, so I make an exception.

> In this case it was revealed that those divs were floated.

We cannot tell whether their widths had been set, so we found ourselves in
the possibly futile question what the default widths might be.

> I think we can assume default styles (as specified in CSS 2.1) for
> everything else-- in this case width: auto is the relevant one.

Why would you assume that?

> Opera, Firefox and Konqueror all approximate to CSS 2.1 to varying
> degrees, and they all implement CSS 2.1 shrink-to-fit width for
> auto-width floats, not the CSS 2.0 behaviour.

So you have covered a nonnegligible minority of browsers, counted by
frequency of use.

But that's not the point. Actually you might add other browsers, covering
the majority. That's not the point either.

The point is: Should you assume that browsers generally treat a construct
against a current recommendation and according to a draft that may be
changed or withdrawn at any moment without prior notification? In some
issues, the answer is affirmative, since there is no feasible option. Here
we have a simple option of explicitly setting the widths.

> In fact I am interested to know if you can suggest to me a CSS 2.0
> conforming browser.

There is none, of course, partly because the specification is
self-contradictory, but we weren't discussing that now. There's no CSS 2.1
conforming browser either, of course.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Ben C

2007-01-27, 11:02 pm

On 2007-01-15, Jukka K. Korpela <jkorpela@cs.tut.fi> wrote:
> Scripsit Ben C:
>
>
> I normally don't reply to people who make personal remarks behind a fake
> name or nickname and a forged address, but your message is otherwise
> reasonable, so I make an exception.

You are too kind.

>
> We cannot tell whether their widths had been set, so we found ourselves in
> the possibly futile question what the default widths might be.
>
>
> Why would you assume that?

If a brief example of HTML and CSS is given, it's reasonable to assume
default styles where they aren't specified-- you did as much yourself
when you assumed the OP had not explictly set widths on the floats.

>
> So you have covered a nonnegligible minority of browsers, counted by
> frequency of use.
>
> But that's not the point. Actually you might add other browsers, covering
> the majority. That's not the point either.
>
> The point is: Should you assume that browsers generally treat a construct
> against a current recommendation and according to a draft that may be
> changed or withdrawn at any moment without prior notification?

In principle you're right, but CSS 2.1 seems like a good bet.

Perhaps you can advise on this, but has there ever been a time when more
browsers have been closer to conforming to anything than now and CSS
2.1?