Gallery layout fiddlings...

D

dorayme

I added a captioned version to the playing about on gallery
layouts at

http://tinyurl.com/nnkn2

Was round at a friend and said clearly and distinctly (like the
way Eliza Doolittle (Wendy Hiller) spoke after her training in
Pygmalion) that I could not see how to do captions in the list
format properly. The friend mumbled something hardly distinct,
flashed a bit of css on a screen on which my eyes saw stuff
displayed as block, something to do with the list floated. I
mumbled something about "Oh yeah!" and had a go today on my
machine. Tried this and that and it seems there is a combo that
works to get captions into this...

Sorry if this is all old hat to some of you...

The list idea seems to me closer to the ideal of having a natural
meaning in the html. I trust the floated div idea, but I am
warming to the list one now that captions appear.... Anyone have
any preferences in all this re these layouts or alternative
strategies?
 
M

mbstevens

I added a captioned version to the playing about on gallery layouts at

http://tinyurl.com/nnkn2
Anyone have any preferences in all this
re these layouts or alternative strategies?



Along the same line,
I assume you've already seen:
http://www.realworldstyle.com/thumb_float.html ?


Image-caption pairs are also tabular, if you choose to see them that way.
One column for captions, one column for images works best. Doing it the
other way around results in over-wide pages if you have any reasonable
number of images.

This may also help you to hone it:
http://www.thenoodleincident.com/tutorials/box_lesson/index.html
 
D

dorayme

mbstevens said:
Along the same line,
I assume you've already seen:
http://www.realworldstyle.com/thumb_float.html ?

As I think I mentioned before (this came up in another thread),
the div layout you can see at my url was based on your earlier
suggestion to look at this. You might spot what I think is a
slight improvement in the html/css, nothing big but a tidier
thing in that no need to keep classing the div in the html as in
your reference url. And the grouping into different shapes,
landscapes and portraits and clearing to keep them from mixing.

I am not quite sure about the <p>ing of the caption, is there a
good argument for this in this particular case? In my url, in the
div float template trials, I just text after the break. All is
enclosed in the div.
Image-caption pairs are also tabular, if you choose to see them that way.
One column for captions, one column for images works best. Doing it the
other way around results in over-wide pages if you have any reasonable
number of images.

Are you saying that there is an argument for putting the lot in a
table because there is a tabular element? I can see this, yes and
it is normally how I would have done it in the past, but as I say
in the spiel at my url, the beauty of non table layout here is
the wrap, the flexibility, not having to fix a set number of
thumb/caption pairs to each row. (I am not so churchy that I
would always resist a table just because it is for layout anyway!
For example I do not rush to change old websites code employing a
bit of table layout if it is going to take a lot of time when I
am busy. I get around to it in good time).

I am wondering whether you folks would be thinking the list way
of laying out is better than the floating div way? The list way
makes for rather cleaner html and seems to me closer to the
semantic reality of a portrait gallery, an unordered list of
items. (I know, it sound awfully posh the phrase, semantic
reality... but hell, you know what I mean ... I hope)
 
M

mbstevens

I am not quite sure about the <p>ing of the caption, is there a good
argument for this in this particular case? In my url, in the div float
template trials, I just text after the break. All is enclosed in the div.

Giving it its own block element enclosure makes it easier to style in
exactly the way you want. You might not need a lot of styling.

Are you saying that there is an argument for putting the lot in a table
because there is a tabular element? I can see this, yes and it is normally
how I would have done it in the past, but as I say in the spiel at my url,
the beauty of non table layout here is the wrap, the flexibility, not
having to fix a set number of thumb/caption pairs to each row.

It just depends on how you are using the data and how you want it to be
interpreted.
The list way makes for rather
cleaner html

I'm not sure what you mean by 'cleaner' here.
and seems to me closer to the semantic reality of a portrait
gallery, an unordered list of items.

I think that part is right .
 
J

Jonathan N. Little

dorayme said:
I added a captioned version to the playing about on gallery
layouts at

http://tinyurl.com/nnkn2

Was round at a friend and said clearly and distinctly (like the
way Eliza Doolittle (Wendy Hiller) spoke after her training in
Pygmalion) that I could not see how to do captions in the list
format properly. The friend mumbled something hardly distinct,
flashed a bit of css on a screen on which my eyes saw stuff
displayed as block, something to do with the list floated. I
mumbled something about "Oh yeah!" and had a go today on my
machine. Tried this and that and it seems there is a combo that
works to get captions into this...

Sorry if this is all old hat to some of you...

The list idea seems to me closer to the ideal of having a natural
meaning in the html. I trust the floated div idea, but I am
warming to the list one now that captions appear.... Anyone have
any preferences in all this re these layouts or alternative
strategies?

I an not sure what you are fretting about but looking at you markup I
would make a suggestion:

<div id="smallLandscape">

<div><a href="htmlBor/1.html"><img src="thumbs/1.jpg" width="150"
height="113" alt="thumbnail link"></a><br>Caption</div>
^^^^
Remove this BR element here and you can have more flexibility in for
styling. You do not need it, because you can easily replicate what you
have with your CSS and great an 'Anonymous Block'
<http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level>

All you have to do is in your CSS

..smallLandscape DIV { /the styling of each thumbnail/ }

..smallLandscape DIV A {
display: block;
/* this will make your thumbnail link a block which you can
independently style as you wish borders, padding, margin etc, and it
makes an anonymous block of your following text 'your caption' */
}

This advantage is if you wish not to have your captions underneath you
thumbnails you can do so without changing you markup but only changing
your CSS. Dumping the 'display: block' on your A can put the caption
beside your thumbs. You can vertical align caption with images making
the div

..smallLandscape DIV { display: table-cell; }
..smallLandscape DIV IMG { vertical-align: middle; } /*
top|bottom|baseline... */

even more styling flexibility with no markup changes...
 
D

dorayme

mbstevens said:
Giving it its own block element enclosure makes it easier to style in
exactly the way you want. You might not need a lot of styling.
Fair enough, I used the br because it seemed to hit the style I
wanted. But you are right. I will go for a different stylable
strategy.
I think that part is right .

This is what I wanted to know.
 
D

dorayme

"Jonathan N. Little said:
I an not sure what you are fretting about

Meant it as an invitation for people to say what they thought
about the best strategy for laying out thumbnails, floated divs
or list? But you noticed the pain in my dithering soul.
but looking at you markup I
would make a suggestion:

<div id="smallLandscape">

<div><a href="htmlBor/1.html"><img src="thumbs/1.jpg" width="150"
height="113" alt="thumbnail link"></a><br>Caption</div>
^^^^
Remove this BR element here and you can have more flexibility in for
styling. You do not need it, because you can easily replicate what you
have with your CSS and great an 'Anonymous Block'
<http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level>

All you have to do is in your CSS

.smallLandscape DIV { /the styling of each thumbnail/ }

.smallLandscape DIV A {
display: block;
/* this will make your thumbnail link a block which you can
independently style as you wish borders, padding, margin etc, and it
makes an anonymous block of your following text 'your caption' */
}

This advantage is if you wish not to have your captions underneath you
thumbnails you can do so without changing you markup but only changing
your CSS. Dumping the 'display: block' on your A can put the caption
beside your thumbs. You can vertical align caption with images making
the div

.smallLandscape DIV { display: table-cell; }
.smallLandscape DIV IMG { vertical-align: middle; } /*
top|bottom|baseline... */

even more styling flexibility with no markup changes...

Yes. I will go a non <br> way. Your idea seems good.

So, what do you think about the choice between floated divs and
inline list for thumbnails regarding assessibilty? You will see
two rather different strategies at the url. I fret between them.
My circuitry is twitching now as a I think about this sort of
choice. How come you are so calm and cool? Do you never feel the
thrill of indecision, the pain and pleasure of it? You some sort
of Martian?
 
J

Jonathan N. Little

dorayme said:
Meant it as an invitation for people to say what they thought
about the best strategy for laying out thumbnails, floated divs
or list? But you noticed the pain in my dithering soul.

Just toying with you...should have indicated that I wasn't really serious.
Yes. I will go a non <br> way. Your idea seems good.

So, what do you think about the choice between floated divs and
inline list for thumbnails regarding assessibilty? You will see
two rather different strategies at the url. I fret between them.
My circuitry is twitching now as a I think about this sort of
choice. How come you are so calm and cool? Do you never feel the
thrill of indecision, the pain and pleasure of it? You some sort
of Martian?

Either way, but I think I'd go with DIVs. DIVs seem a little more
flexible to style. The ULs sometime behave a little unpredictably in
some browsers when you get too creative. So I'd use DIVs and keep my
options open.
 
D

dorayme

"Jonathan N. Little said:
dorayme said:
Just toying with you...should have indicated that I wasn't really serious.

No need to have indicated. I was toying with you! Lets get it
right about who is Chief Toyer... :)
Either way, but I think I'd go with DIVs. DIVs seem a little more
flexible to style. The ULs sometime behave a little unpredictably in
some browsers when you get too creative. So I'd use DIVs and keep my
options open.

This was my feeling at first, I was worried about the list idea
for browsers I have yet to test. But I will likely be influenced
by you to go with the divs for a serious application (like on a
commercial site or any I am paid to make).
 

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

No members online now.

Forum statistics

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

Latest Threads

Top