put a block element into a line, makes it behave like <img>?

[Zhang Weiwu]

Hello. This is problem puzzled me a long time. I wish to organize some
block elements and let them flow one after each other like text.

Think about a album, I wish the album have 12 thumbnails, each one has a
comment line under the picture. And I wish when the screen size is big,
this thumbnails arrange 3 rows, 4 columns; if the browser window is
smaller, arranges 4 rows, 3 columns; if it's even smaller, 6 rows with 2
columns. If there are only thumbnails, it's very simple, just flow each
thumbnail down with proper margin and padding:
<div> <img ... /> <img ... /> .... </div>

But now each image has a line of comment, so it is like this:
<div>
<div class="thumbnail"><img ... /><br/><p> Comments here ... </p> </div>
<div class="thumbnail"><img ... /><br/><p> Comments here ... </p> </div>
......
</div>

I wonder how to make div.thumbnail look like a single <img/>.

This is very simple in IE (although I am not sure if it is standard
way), just let div.thumbnail {display: inline;} and the effect is what I
wanted. This is the screen shot on IE:
http://218.85.101.134/ie6.png (file stays a week)

But for mozilla, this would cause very strange arrangement:
http://218.85.101.134/mozilla.png (file stays a week)

This buggy webpage can be visited at:
http://www.zhangweiwu.com/album_group.html

[Cameron McCormack]

Hi Weiwu.

Zhang Weiwu wrote:

Think about a album, I wish the album have 12 thumbnails, each one has a
comment line under the picture. And I wish when the screen size is big,
this thumbnails arrange 3 rows, 4 columns; if the browser window is
smaller, arranges 4 rows, 3 columns; if it's even smaller, 6 rows with 2
columns. If there are only thumbnails, it's very simple, just flow each
thumbnail down with proper margin and padding:
<div> <img ... /> <img ... /> .... </div>

But now each image has a line of comment, so it is like this:
<div>
<div class="thumbnail"><img ... /><br/><p> Comments here ... </p> </div>
<div class="thumbnail"><img ... /><br/><p> Comments here ... </p> </div>
.....
</div>

I do this by setting each div containing a thumbnail to be the same
width and then floating them all. For example, see:

http://mcc.id.au/photos/svgopen2004/day2/

Each thumbnail is in a div, like:

<div class="photo">
<div>
<a href="1">
<img
src="http://www.bur.st/~clm/photos/svgopen2004/day2/1.thumb.jpg"
alt="Conference registration" width="150" height="112"/>
</a>
</div>
<div class="caption">Conference registration</div>
<div class="date">September 7 2004, 4:55pm</div>
</div>

Each div.photo is styled with:

.photo {
float: left;
margin-top: 0.75em;
margin-right: 1.5em;
text-align: center;
width: 150px;
height: 20em;
}

Hope this helps,

Cameron

--
Cameron McCormack
| Web: http://mcc.id.au/
| ICQ: 26955922

Replies by e-mail must include the current month name in subject line to
bypass spam filter.

[Lauri Raittila]

Zhang Weiwu wrote;

Hello. This is problem puzzled me a long time. I wish to organize some
block elements and let them flow one after each other like text.
display:inline-block

CSS2.1, partially works in Opera 7. Work in IE.

display:inline-table

CSS2, works on Opera 5+

thing {display:inline-block}
thing {display:inline-table}

Gets best results. If doesn't, add display:inline thing before inline-
block.
But now each image has a line of comment, so it is like this:
<div>
<div class="thumbnail"><img ... /><br/><p> Comments here ... </p> </div>
<div class="thumbnail"><img ... /><br/><p> Comments here ... </p> </div>
.....
</div>
Why <br/>? It seems to unnecessary, and has no semantical value.
I wonder how to make div.thumbnail look like a single <img/>.

This is very simple in IE (although I am not sure if it is standard
way), just let div.thumbnail {display: inline;} and the effect is what I
wanted. This is the screen shot on IE:
http://218.85.101.134/ie6.png (file stays a week)
Use correct CSS I showed earlier, and then it is not bug, but correct
behaviour.
But for mozilla, this would cause very strange arrangement:
http://218.85.101.134/mozilla.png (file stays a week)

Mozilla is bad at CSS. You need to use float for it. Makes it harder to
align differently sized boxes vertically, and you can't center the
content.
Centered gallery with captions example:
http://www.student.oulu.fi/~laurirai...allery/cc.html
I would love to hear how it works on other browsers:
Opera 7, IE6 - show like intended
Firefox, Firebird - show boxes left aligned
Others?
Does
http://www.student.oulu.fi/~laurirai/www/css/gallery/
Work better?

Someone already told you how to make floated boxes, I recommend that if
you can live with restrictions.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Spartanicus]

Lauri Raittila <la***@raittila.cjb.net> wrote:

Hello. This is problem puzzled me a long time. I wish to organize some
block elements and let them flow one after each other like text.
display:inline-block

CSS2.1, partially works in Opera 7. Work in IE.

Inline-block does nothing on a block level element in IE.
Centered gallery with captions example:
http://www.student.oulu.fi/~laurirai...allery/cc.html

Seems a bit to complex, simpler imo:
http://www.spartanicus.utvinternet.i...h_captions.htm
I didn't bother much with how Gecko renders it.

--
Spartanicus

[Lauri Raittila]

Spartanicus wrote;

Lauri Raittila <la***@raittila.cjb.net> wrote:

Hello. This is problem puzzled me a long time. I wish to organize some
block elements and let them flow one after each other like text.
display:inline-block

CSS2.1, partially works in Opera 7. Work in IE.

Inline-block does nothing on a block level element in IE.

Gee, I was lied earlier, apparently. It seems that IE don't regognize
inline-block at all. (makes no difference weather it is there or not. I
thought I had tested it, but apparently didn't)

Or maybe the someone talking me said it was MacIE...

Centered gallery with captions example:
http://www.student.oulu.fi/~laurirai...allery/cc.html

Seems a bit to complex, simpler imo:
http://www.spartanicus.utvinternet.i...h_captions.htm
That is because there is extra stuff in mine that is not really
necessary. And of course, yours will look ugly when there is differently
sized thumpsnails.
(I cut and pasted the HTML, not bothered to clean it. It is needed for
styling on other page, and inline styles are there as I had forgotten
them...).

I don't like you markup using p element for image and caption. It don't
fit definition of paragraph. Why not use table, it would suit much better
than p. In fact, it would propably degrade better.

<table>
<tr><td><img><th>caption
</table>
I didn't bother much with how Gecko renders it.

That was done one line in my example.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Spartanicus]

Lauri Raittila <la***@raittila.cjb.net> wrote:

>> Hello. This is problem puzzled me a long time. I wish to organize some
>> block elements and let them flow one after each other like text.
>
>display:inline-block
>
>CSS2.1, partially works in Opera 7. Work in IE.
Inline-block does nothing on a block level element in IE.

Gee, I was lied earlier, apparently.

I recently pointed out to you that IE supports inline-block to some
extent (note the "to some extent"). But it doesn't do anything on an
elements that default to block, it only works on elements that default
to inline.
It seems that IE don't regognize inline-block at all.
It works fine on elements that default to inline, see the url I posted.
Or maybe the someone talking me said it was MacIE...
Nope, IE win.

>Centered gallery with captions example:
>http://www.student.oulu.fi/~laurirai...allery/cc.html

Seems a bit to complex, simpler imo:
http://www.spartanicus.utvinternet.i...h_captions.htm

That is because there is extra stuff in mine that is not really
necessary. And of course, yours will look ugly when there is differently
sized thumpsnails.

Why?:
http://www.spartanicus.utvinternet.i..._captions2.htm
I don't like you markup using p element for image and caption. It don't
fit definition of paragraph.
The image and the caption need to be grouped together and separated from
other image/caption combo's in the same gallery. Paragraph markup is the
correct way to achieve that. In one form an image/caption combo is
strictly text, some may feel that a paragraph should consist of multiple
sentences, this is nonsense. Paragraph markup is appropriate regardless
of how much text it encompasses, as long as the text it contains belongs
together and needs to be separated from other content then paragraph
markup is correct.
Why not use table, it would suit much better
than p. In fact, it would propably degrade better.

<table>
<tr><td><img><th>caption
</table>

1 row 2 cell table markup arguably would not be unsuitable, but IIRC UA
support for positioning the caption beneath the image is poor (only
works in O7 IIRC).

--
Spartanicus

[Lauri Raittila]

Spartanicus wrote;

Lauri Raittila <la***@raittila.cjb.net> wrote:

>display:inline-block
>
>CSS2.1, partially works in Opera 7. Work in IE.

Inline-block does nothing on a block level element in IE.
Gee, I was lied earlier, apparently.

I recently pointed out to you that IE supports inline-block to some
extent (note the "to some extent"). But it doesn't do anything on an
elements that default to block, it only works on elements that default
to inline.

Hm, I tested on quirks mode, which explains things.

http://www.spartanicus.utvinternet.i...h_captions.htm

will look ugly when there is differently
sized thumpsnails.

Why?:
http://www.spartanicus.utvinternet.i..._captions2.htm

[ try use shorter urls, so that I can quote them under 80.]

Now, make them random order, and not growing linearly in both all
directions. Sure you can live with it, but imho if captions would be on
same line it would look better. (you still have one option though - but
with bit more markup, there would be many options - and markup would be
better)

My example doesn't look that good either at the moment, I know. But as I
don't use br, and have box in img, I can do lots.

I don't like you markup using p element for image and caption. It don't
fit definition of paragraph.

The image and the caption need to be grouped together and separated from
other image/caption combo's in the same gallery.

Correct. Use grouping element, called div. If you need to group
something, that is not text, do not use P.
Paragraph markup is the correct way to achieve that.
It surely is not. Paragraph markup is for paragraphs. Are you too
boneheaded to know what know paragraph? There is div for use in cases
there is no other suitable elemenet.

You markup also causes problems, when user agent assumes that paragraph
is paragraph, and shows it somehow different that div, to take advantage
of the fact that it is paragraph, not some random content. Like max-width
for better readability.

I find it wrong to have image inside P, but I know there is different
opinions on this, and I can understand them. But I can't understand you
when you are not having any paragraph in its normal meaning. Show your
frien a mail order catalog, draw border around an image and caption, as
what he thinks it is. I bet he don't say it is paragraph, even if he
doesn't know better name for it.
In one form an image/caption combo is
strictly text,
I find it rather amazing that you say that image is text. Of course, it
does not say in dictionary that image is not text, but that is pretty
irrelevant. Why don't you make survey: show your image of butterfly with
caption to 100 people, ask them what they think it is

a) text
b) image
c) photo
d) paragraph

I would be very surprised, if you come with result that has one answer a.
C is there so that people don't think that you are fooling with them and
answer wrongly on purpose. You may use d) instead/with a)...
some may feel that a paragraph should consist of multiple
sentences, this is nonsense.

The paragraph is there for text. It has no use semantically if it is used
as general element to hold just about anything. A paragraph can be just
one sentence, and a word can be a sentence. But an image and a caption is
not paragraph, especially it is not paragraph, when you have list of
images with captions.

What you don't seem to get is that if you use some element to something,
that it is not very far fetched from it's orginal purpose, you make the
element unusable. There is no sence in semantics, if they are so vague
that one can't assume anything of them. In html, all elements are
traditionally used incorrectly, and most are defined stupid way - but
that doesn't mean you are allowed to strech definitions even farther, if
it suits you.

Why not use table, it would suit much better
than p. In fact, it would propably degrade better.

<table>
<tr><td><img><th>caption <tr>td><img><th>caption2</table>

Sorry, should have added more rows show what I meaned. If I am not
mistaken, it should be just as easy to get work as with current markup.
Caption alignment is irrelevant with this kind of table.

Of course, there is many ways to use table to combine image and caption
that are more logical that paragraph, but IMO it is not good use of
table.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Spartanicus]

Lauri Raittila <la***@raittila.cjb.net> wrote:

Are you too boneheaded to know what know paragraph?

You're behaviour of late has fallen substantially below what I consider
the minimum requirement to engage with. Good luck with that attitude.

Bye.

--
Spartanicus