Kooner said:
Barry,
I think I'm still missing something. I copied the div statements from
your post, but the width gets cut off. I tried displaying two photos
(using the div statements), then I displayed the same two photos the
'normal way' at 40% so I can see where they were cut off.
http://home.comcast.net/~jason.kooner/helpfromgoogle.htm
I think I can see what is happening. Remember that I set up the CSS for
thumbnails, while you want larger photographs. The key is that I used CSS to
make the heights of all the images quite small: { height: 100px; }. Obviously,
that is not what you want! You do need to ensure that all the photographs are
the same heights for floating to work properly, but it is up to you what that
is.
Note that your photographs are far too large for your original intention of 5
by 4. It is not a good idea to cause a user to download a 1280 x 1024
photograph only to see very much smaller images which could have been
downloaded in a tiny fraction of the time. I wouldn't have thought you wanted
photographs much more than 200 or 300 pixels wide / high for that sort of
display. If you start with them all the same height, you don't need to control
their heights further using CSS.
What does 'width: 12em' mean? I really
need a better HTML book. This one I have by Dietel and Dietel (WWW
Internet and World Wide Web How to Program) just doesn't go into
enough detail for me with the CSS,div,class stuff.
"em" is related to the size of the font currently in use at that position. If
one user is using double the font size of another, then that first user will
get a <div> which is twice the width of the other. It is a very useful way,
(indeed, I believe the *intended* way), of building displays that adapt
element sizes naturally to the user's font sizes. I used 12em because I found
by experimentation that it was enough for what I wanted. For example, it
mostly enabled me to have big enough captions for my purpose.
Note - "experimentation". When I was developing the CSS for that gallery
layout, I ran with 5 different browsers pointing at the page. I put in
captions of various sizes, then viewed with each browser at a whole variety of
settings. Including the full range of IE settings, Mozilla settings from too
small to read, to so big that only 2 or 3 words would fit on a screen, and
Opera zoomed from 50% to 200%. I don't have enough confidence to try to decide
the values by any more "scientific" or "mathematical" method. I know enough to
make an initial guess, but no more. Once the galleries get populated, I may
have to fine-tune the CSS, but that is trivial in comparison.
The cut-off is done by { overflow: hidden; }. I experimented with { overflow:
auto; }, but didn't like the scroll-bars I got when there was too much text.
Neither did I like the effect of not controlling the overflow, because I
sometimes got captions running into one-another. In other words, the result is
a compromise - I will sometimes find that I can't get a caption as big as a
really want, and may end up with an abbreviated one. But that is pretty
inevitatble if you want regular alignment of photographs in rows & columns.
On another note, why don't the two rightmost
pictures display on the next line toward the left margin?? Shouldn't
the <p></p> I added around the last two pics give a line return?
No, because you floated the 2 left thumbnails, and that takes them out of the
normal flow. Or, more precisely, you *did* get a line return, and if you put a
border round the paragraph, you will see, in a compliant browser, that the <p>
starts on the left, but it is the (initial) *content* of the <p>, the images
in this case, that are pushed to the right by the floated elements. If you
really wanted the paragraphs to drop below the floated elements, the CSS
property to apply to the paragraph is { clear: left } (or it could be { clear:
both }). This will explain:
http://www.complexspiral.com/publications/containing-floats/
[snip]
lines. The