List with images

[=?iso-8859-1?B?QW5kcukgSORuc2Vs?=]

Hi,

this is another problem that tempts me to use tables but before I do
that I'm going to ask you.

Sounds simple: A list of images with a description to their right.
Illustration:
http://kundenweb.creations.de/usenet...listimages.jpg

I thought of two solutions:
- Make the images "float: left". Doesn't work because the text - of
course - floats around them.
- Make them "position: abolute" and give the text a left-margin.
Doesn't work either, because the next image slips under the previous.

Regards,
André

[=?iso-8859-1?B?QW5kcukgSORuc2Vs?=]

On Aug 27, 2:33 am, André Hänsel <[e-mail]:

Sounds simple: A list of images with a description to their right.
Illustration:http://kundenweb.creations.de/usenet...listimages.jpg

I read the spec again and found a solution:
Because the floating image is out of the flow and hence does not
affected the margin of a subsequent block box I can write:

<div class="item">
<img ...>
<div class="text">
...
</div>
</div>

div.item { clear: both; }
div.item img { float: left; }
div.item div.text { margin-left: <max-width-of-images>px; }

Regards,
André

[dorayme]

In article
<11*********************@y42g2000hsy.googlegroups. com>,
André Hänsel <an***@webkr.dewrote:

Hi,

this is another problem that tempts me to use tables but before I do
that I'm going to ask you.

Sounds simple: A list of images with a description to their right.
Illustration:
http://kundenweb.creations.de/usenet...listimages.jpg

I thought of two solutions:
- Make the images "float: left". Doesn't work because the text - of
course - floats around them.

Not "of course", if you provide for a left margin for the element
that has the text, it will not wrap.

Is there some particular reason you do not want to use a table
for this?

--
dorayme

[=?iso-8859-1?B?QW5kcukgSORuc2Vs?=]

On Aug 27, 4:05 am, dorayme <[e-mail]:

In article
<[e-mail]. com>,
André Hänsel <[e-mail]:

I thought of two solutions:
- Make the images "float: left". Doesn't work because the text - of
course - floats around them.

Not "of course", if you provide for a left margin for the element
that has the text, it will not wrap.

Not "of course"? It floats around them when I set them to "float:
left;"... sounds natural to me. ;)

Is there some particular reason you do not want to use a table
for this?

The script code is nicer without them. :)
With tables they must be closed and opened again (or get a colspan)
for each subheader. And they don't inherit fonts.

André

[dorayme]

In article
<11**********************@k79g2000hse.googlegroups .com>,
André Hänsel <an***@webkr.dewrote:

On Aug 27, 4:05 am, dorayme <[e-mail]:

In article
<[e-mail]. com>,
André Hänsel <[e-mail]:

I thought of two solutions:
- Make the images "float: left". Doesn't work because the text - of
course - floats around them.

Not "of course", if you provide for a left margin for the element
that has the text, it will not wrap.

Not "of course"? It floats around them when I set them to "float:
left;"... sounds natural to me. ;)

(1) The non-floated text does not float in the technical sense

(2) With a left margin, the non-floated text does not float (in
the non technical sense of "flow around", (wrap and drop under
the technical float when it can).

Is there some particular reason you do not want to use a table
for this?

The script code is nicer without them. :)
With tables they must be closed and opened again (or get a colspan)
for each subheader. And they don't inherit fonts.

Sorry, I don't know anything about these things. I am suspicious.
But I do know an expert in scripting who has proved to be pretty
smart with tables. <g>

--
dorayme

[Gus Richter]

André Hänsel wrote:

On Aug 27, 2:33 am, André Hänsel <[e-mail]:

>Sounds simple: A list of images with a description to their right.
Illustration:http://kundenweb.creations.de/usenet...listimages.jpg

I read the spec again and found a solution:
Because the floating image is out of the flow and hence does not
affected the margin of a subsequent block box I can write:

<div class="item">
<img ...>
<div class="text">
...
</div>
</div>

div.item { clear: both; }
div.item img { float: left; }
div.item div.text { margin-left: <max-width-of-images>px; }

Reread what dorayme said. He is right (doraymee is f ;) ) and saying the
same as per your solution.
See the thread 2-3 days ago "Starting Over - ........"
Wherein I gave an example of the simple way to accomplish this without
the need of all those DIVs:

img {float:left;clear:left;}
p {margin-left:<max-width-of-images>px;}

<img><p>blah blah</p>

--
Gus