List with images

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

André Hänsel - 27 Aug 2007 01:33 GMT

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/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é

Reply to this Message

André Hänsel - 27 Aug 2007 02:58 GMT

> Sounds simple: A list of images with a description to their right.
> Illustration:http://kundenweb.creations.de/usenet/listimages/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é

Reply to this Message

Gus Richter - 28 Aug 2007 00:20 GMT

>> Sounds simple: A list of images with a description to their right.
>> Illustration:http://kundenweb.creations.de/usenet/listimages/listimages.jpg
[quoted text clipped - 13 lines]
> 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>

Signature

Gus

Reply to this Message

dorayme - 27 Aug 2007 03:05 GMT

In article
<1188174813.984880.80060@y42g2000hsy.googlegroups.com>,

> Hi,
>
[quoted text clipped - 8 lines]
> - 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?

Signature

dorayme

Reply to this Message

André Hänsel - 27 Aug 2007 21:38 GMT

> In article
> <1188174813.984880.80...@y42g2000hsy.googlegroups.com>,
[quoted text clipped - 5 lines]
> 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é

Reply to this Message

dorayme - 27 Aug 2007 22:32 GMT

In article
<1188247096.249712.229530@k79g2000hse.googlegroups.com>,

> > In article
> > <1188174813.984880.80...@y42g2000hsy.googlegroups.com>,
[quoted text clipped - 8 lines]
> 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>

Signature

dorayme

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2007

List with images