captions under photos

K

Kooner

Hello,

How do I put a caption centered under a photo? I have 5 rows of photos
and each row contains 4 photos side by side. I was playing around with
the div tag and relative positioning, but I still can't get it to
work. I don't want to use tables either. Also the photos are not the
same size.

Kooner
 
B

brucie

in post: <
Neal said:
.container,[nul]{...}
What is this [nul]??

hides css from IE6
Fails in Opera 7.23.

upgrade, turn css off or put up with it.
Following position: relative with float: left makes the div no longer
a positioned containing block...

float applies as long as the box isn't absolutely positioned
 
B

brucie

in post: <
Shouldn't have said that. Now he will get all toffee-nosed.

i thought he was just trying to rally the villagers in an attempt to
have me burnt at the stake.
 
T

Titus A Ducksass AKA Lou Simon (Just for Gran) Luc

in post: <


i thought he was just trying to rally the villagers in an attempt to
have me burnt at the stake.
Dont worry, all the loose straigt pins are on sale in ebay along with
the spare cloth dollies.
 
B

Barry Pearson

Kooner said:
Hello,

How do I put a caption centered under a photo? I have 5 rows of photos
and each row contains 4 photos side by side. I was playing around with
the div tag and relative positioning, but I still can't get it to
work. I don't want to use tables either. Also the photos are not the
same size.

Here is my recent experiment of doing something similar. I didn't want to have
specific CSS rules for different images, which appears to be what brucie does,
but I wanted to have line-wrapped behaviour. I also wanted to cater for all
sorts of user text-sizses, etc. And as many browsers as possible.

I had to break one of your requirements. I had to make the images the same
height. (Not necessarily the same width). If necessary, when I do the proper
version, I will have to add transparent space to them in Photoshop. The reason
is that, when using floats for line-wrapping, the heights of the elements
being floated need to be precisely the same. (If someone knows different,
please tell me!)

http://www.kingsnorton.info/galleries/gallery1.htm

The tricks I had to adopt were: all images have the same height; all captions
have the same number of lines, if necessary with hidden (&nbsp;) lines. The
CSS I used was as follows, but much of it is because they are
thumbnail-anchors, not just images being displayed.

div.thumbnail {
font: normal 75% Arial, Helvetica, sans-serif;
width: 12em;
text-align: center;
float: left;
overflow: hidden;
margin: 5px;
border: 1px solid #E1BC89;
}
div.thumbnail img {
height: 100px;
}
div.thumbnail a {
text-decoration: none;
display: block;
padding: 5px;
white-space: nowrap;
}
div.thumbnail a:hover {
color: #00c;
background: #E1BC89;
}

Typical HTML (for the first one, in fact):

<div class="thumbnail">
<a href="../photographs/generic.htm" title="A title">
<img src="../photographs/thumb0.jpg" alt="" width="125" height="105" title="A
title"><br>
Caption<br>for the first photograph</a>
</div>
 
E

Els

Kooner said:
Hello,

How do I put a caption centered under a photo? I have 5 rows of photos
and each row contains 4 photos side by side. I was playing around with
the div tag and relative positioning, but I still can't get it to
work. I don't want to use tables either. Also the photos are not the
same size.

I'm not sure if this is what you are looking for, but I made
a test-case, which does use tables, but not in the way you
would expect. The way I did it here
http://locusmeus.com/test/thumbswithcaptions.html
is fluid, but if you want always 5 pictures in a row, you
could put them in a div with the correct width to hold 5
pictures.

I did this on
http://www.mediatech.nl/~rachel/Rachel/live-a.html
Only that's 6 pics in a row :)
 
B

brucie

in post: <
Barry Pearson said:
[gallery thingy]
I had to break one of your requirements. I had to make the images the same
height. (Not necessarily the same width).

for the thingy to look nice neat and professional images should always
be at least the same height.

i would also recommend thinking about something other than the same
dull, boring and unsexy rows/columns layout.
 
B

Barry Pearson

brucie said:
in post: <
Barry Pearson said:
[gallery thingy]
I had to break one of your requirements. I had to make the images
the same height. (Not necessarily the same width).

for the thingy to look nice neat and professional images should always
be at least the same height.

i would also recommend thinking about something other than the same
dull, boring and unsexy rows/columns layout.

Hm! I remember a recent discussion between Whitecrest & others about dull
image layouts. It depends on various factors, of course. For example, in my
photography site, I select the photographs themselves to look good (I hope) in
balanced rows-of-five. I then use a table to enforce these rows (and columns).
I exchange one source of interest/novelty for another.
http://www.barry.pearson.name/photography/portfolios/lrps.htm

But the site I referred to earlier here is more like an academic site, and the
regular array may be appropriate anyway.

I take your point. But rows & columns do have the merit of being easy for the
user to work through systematically. Any departure should not simply be an
arbitrary departure for the sake of novelty.
 
B

brucie

in post: <
Hm! I remember a recent discussion between Whitecrest & others about dull
image layouts.

i must have missed that one. did anyone die?
It depends on various factors, of course.

of course. its just my pet hate that css gives you so many fun and
giggly options to arrange images but people only seem to be interested
in attempting to emulate the same layout a table gives. i don't see why
they don't just keep using tables (until crappy IE supports css-tables).
photography site, I select the photographs themselves to look good (I hope)

not enough nudity although the iguanas getting it on do somewhat make up
for it.
in balanced rows-of-five. I then use a table to enforce these rows
(and columns). I exchange one source of interest/novelty for another.
http://www.barry.pearson.name/photography/portfolios/lrps.htm

it would be much nicer if the images were all the same size and remember
the thumb doesn't have to be a miniature of the larger image.

for example the picnic table image could have the left and right bits of
the image cut off so the picnic table was still the focus of the image
but it could be displayed the same portrait size as the images either
side of it. the larger image shows the full image.

the image above it with two people walking doesn't need the shadow of
the people. cut it off so it can be the same portrait format as the
images either side. the larger image shows the full image.

don't mix landscape and portrait images.
I take your point. But rows & columns do have the merit of being easy for the
user to work through systematically. Any departure should not simply be an
arbitrary departure for the sake of novelty.

rather than thinking of it as a novelty how about creativity without
sacrificing usability.
 
B

Barry Pearson

brucie said:
in post: <


i must have missed that one. did anyone die?

I'll leave you to judge. (Actually, the discussion was whether a particular
example was crap & sucked, not dull):

http://groups.google.com/[email protected]

Its importance, for me, was to convice me to be less ambitious about having a
floating-thumbnail gallery. I began to suspect that some the problems, that I
couldn't solve, couldn't be solved by people with far more expertise in CSS
than me.
of course. its just my pet hate that css gives you so many fun and
giggly options to arrange images but people only seem to be interested
in attempting to emulate the same layout a table gives. i don't see
why they don't just keep using tables (until crappy IE supports
css-tables).

I have a slightly different point of view. I sometimes wonder why people don't
have more fun and use more giggly options with tables! They are only nested
elements - even IE 5 can take them apart and do weird things with them, with
just bog-standard CSS. My latest attempt was to devise a diagonally-displayed
table - I haven't got it working properly in Opera yet:

http://www.barry.pearson.name/articles/table_pages/exhibit08.htm

Why? Why not? These are precisely the same table:
http://www.barry.pearson.name/articles/table_pages/exhibit05.htm
http://www.barry.pearson.name/articles/table_pages/exhibit07.htm
not enough nudity although the iguanas getting it on do somewhat make
up for it.
Chuckle!


it would be much nicer if the images were all the same size and
remember the thumb doesn't have to be a miniature of the larger image.

Ah! There was a special reason for that, and for the other things you reject.
These thumbnail galleries were an attempt at illustrating a real-world display
of photographs. The Royal Photographic Society doesn't judge individual
photographs. Instead, it treats a panel of 10, 15, or 20, (depending on the
distinction), as a collective piece of evidence, and that evidence includes
the hanging-plan. I'm using the thumbnail-gelleries for both links to
individual photographs, and a representation of the 8-foot by 3-foot panels I
submitted.

It is quite likely that, in the new (floating-thumbnail) gallery I am
developing, the images will have the characteristics you mention. There are
not for photographs as photographs, they will be photographs as illustrations
of history. The thumbnail gallery will simply be a lot of links, not a formal
display in its own right.

[snip]
rather than thinking of it as a novelty how about creativity without
sacrificing usability.

OK, but unfortunately I lack creativity in the "visual arts".
 
S

Stephen T. Fox

In brucie <[email protected]> typed:
:| in post: <:| Kooner <[email protected]> said:
:|
:| > How do I put a caption centered under a photo? I have 5 rows of
:| > photos and each row contains 4 photos side by side.
:|
:| not supported by IE
:| http://moreshit.bruciesusenetshit.info/pic-thingy-01.shit
:|
:| supported by IE
:| http://moreshit.bruciesusenetshit.info/pic-thingy-02.shit
:|
:| --
:| b r u c i e

Tried in Netscape 7 -01 is good, -02 sux captions go to left corner,
Tried in Mozilla Firefox works on both.
As advertised, IE6 -01 works, -02 sux.
Thank you, brucie. I learn something every darn day.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top