CSS image gallery question

[akress]

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]

In article
<11*********************@l53g2000cwa.googlegroups. com>,
ak****@gmail.com 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

[Jukka K. Korpela]

Scripsit ak****@gmail.com:

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.

Screen? You probably meant the width of the canvas in the browser.

<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>

That's incorrect markup, since the id attribute value must be unique within
the document and you're apparently using the same value for all. (It's
difficult to be sure, since your sample is otherwise so sketchy and you
didn't post a URL.)

Changing id="img" to class="img" in HTML and #img to .img in CSS is the
first fix needed.

#lrgcontainer {
width:800px;
}

What?? You described the idea of flexible layout and now you are setting the
width to 800 pixels. Simply don't set the width at all here.

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

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.

If you set the widths, as you need to do in this approach, you evidently
need to set them in pixels, since the width of an image is in pixels. I'm
afraid there's no working shortcut (except in the sense that the HTML markup
might be programmatically produced) - each div element needs to have its
width set. If the images share the same width and you want to keep things
that way, it's of course much easier.

However this (in my opinion)
creates a lot of redundant repetition of id="img", etc.

That's not very important, really, even when you use the correct attribute
name, which is somewhat longer (class).

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.

The selector #lrgcontainer div refers, in principle, to any div element
contained (directly or indirectly) in an element with id="lrgcontainer".
This imples that you should not use any inner <divmarkup in the div
elements that contain an image and its caption.

Using #lrgcontainer div would be more logical, but it has considerable
limitations in browser support (read: IE up to IE 6 does not grok it).

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

[Ben C]

On 2007-01-15, Jukka K. Korpela <jk******@cs.tut.fiwrote:
[snip]

>#img {
margin: 0 50px 0 50px;
float:left;
}

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]

On 2007-01-15, dorayme <do************@optusnet.com.auwrote:

In article
<11*********************@l53g2000cwa.googlegroups .com>,
ak****@gmail.com 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>

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]

On 2007-01-15, ak****@gmail.com <ak****@gmail.comwrote:

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]

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]

On 2007-01-15, Jukka K. Korpela <jk******@cs.tut.fiwrote:

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.

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.

>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.

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]

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]

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]

On 2007-01-15, Jukka K. Korpela <jk******@cs.tut.fiwrote:

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.

You are too kind.

>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?

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.

>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 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?