Reconciling a thumbnail link with adjacent paragraph

[Haines Brown]

I'm trying to resolve a contradictory situation in which I have rows
going down a page, and each consists of two elements: to the left is a
thumbnail image that is a hot link; to its right is a brief descriptive
paragraph.

The contradiction is that if I float the image to the left, the text in
the paragraph is shifted right in its the paragraph box by the
amount of the image width; if I put the text where I want it closer to
the image by moving the paragraph container left to fall under the
image, the area of the image that is over the paragraph box is no longer
hot.

<div class="row">
<a href="graphic.jpg">
<img src="graphic.jpg" />
</a>
<p class="right">The descriptive text</p>
</div>

div.row { overflow: hidden; }
img {
width: 100px; height: 100px;
border-style: none;
float: left;
}
p.right { position: relative; left: 110px; width: 40em; }
</div>

If I change the position of p.right to the left 100px so that the
paragraph it contains is where I want it, that area of the paragraph
box that falls under the image keeps that portion of the image from
being hot. Is there any way around this by using z-index?

There has to be an obvious answer to my problem, but it is not occurring
to me.
--

Haines Brown, KB1GRM

[John Hosking]

Haines Brown wrote:

I'm trying to resolve a contradictory situation in which I have rows
going down a page, and each consists of two elements: to the left is a
thumbnail image that is a hot link; to its right is a brief descriptive
paragraph.

>
There has to be an obvious answer to my problem, but it is not occurring
to me.

It'd be more obvious with a URL to a simplified example of your code.
But it sounds to me as though want you really want is a table (picture
left, text right, for 1 to n rows). I know I'm restating your problem
but it looks like the appropriate approach from here.

--
John
Pondering the value of the UIP: http://improve-usenet.org/

[dorayme]

In article <87************@teufel.hartford-hwp.com>,
Haines Brown <br****@teufel.hartford-hwp.comwrote:

I'm trying to resolve a contradictory situation in which I have rows
going down a page, and each consists of two elements: to the left is a
thumbnail image that is a hot link; to its right is a brief descriptive
paragraph.

The contradiction is that if I float the image to the left, the text in
the paragraph is shifted right in its the paragraph box by the
amount of the image width; if I put the text where I want it closer to
the image by moving the paragraph container left to fall under the
image, the area of the image that is over the paragraph box is no longer
hot.

<div class="row">
<a href="graphic.jpg">
<img src="graphic.jpg" />
</a>
<p class="right">The descriptive text</p>
</div>

div.row { overflow: hidden; }
img {
width: 100px; height: 100px;
border-style: none;
float: left;
}
p.right { position: relative; left: 110px; width: 40em; }
</div>

If I change the position of p.right to the left 100px so that the
paragraph it contains is where I want it, that area of the paragraph
box that falls under the image keeps that portion of the image from
being hot. Is there any way around this by using z-index?

There has to be an obvious answer to my problem, but it is not occurring
to me.

Why so complicated? <g>

How about something like:

http://dorayme.890m.com/alt/brown.html

--
dorayme

[Haines Brown]

Dorayme,

Thanks for the example, and indeed it was simpler than my own
effort. The reason I complicated things by using position-relative:
left:... for the descriptive text was because I didn't want the text
position to depend on the width of the thumbnails, for not all are the
same.

I implemented the page as you suggested by simplifying things greatly,
for most thumnails have the same width, and I'll deal with the
exceptions on an an ad hoc basis.

--

Haines Brown, KB1GRM

[dorayme]

In article <87************@teufel.hartford-hwp.com>,
Haines Brown <br****@teufel.hartford-hwp.comwrote:

Dorayme,

Thanks for the example, and indeed it was simpler than my own
effort. The reason I complicated things by using position-relative:
left:... for the descriptive text was because I didn't want the text
position to depend on the width of the thumbnails, for not all are the
same.

I implemented the page as you suggested by simplifying things greatly,
for most thumnails have the same width, and I'll deal with the
exceptions on an an ad hoc basis.

You are welcome. It would be useful if you quoted the bits that you are
replying to before your comments. For example, I am wondering what my
demo link was and maybe I can make an improvement for you. Not all of us
have newsreaders that store threads. Mine is an online reader and
forgets everything read (unless especially saved and even then it is not
great for reasons I will not bore you with!). So, here is a self
interest argument to be following normal ng rules. <g>

Nevertheless, let me see in my browser histories where it is and see if
we can do something about you not having to set a left margin to
accommodate different width pics. Ah yes...

A couple of suggestions, set the css left margin of the description
paragraphs for the widest pic you have rather than having to attend to
each. This will have the advantage of table like regularity. But as you
please.

Talking of tables, is there any particular reason not to use a two col
table and let the in-built technology of tables do the alignment work
for you? It is certainly tabular in nature what you are wanting (as, I
recently noticed, John H was urging).

--
dorayme

[Haines Brown]

dorayme <do************@optusnet.com.auwrites:

In article <87************@teufel.hartford-hwp.com>,
Haines Brown <br****@teufel.hartford-hwp.comwrote:

>Dorayme,

Talking of tables, is there any particular reason not to use a two col
table and let the in-built technology of tables do the alignment work
for you? It is certainly tabular in nature what you are wanting (as, I
recently noticed, John H was urging).

The site I'm reconstructing was built in ca. 1997, and since then I lost
control over it. I recently recovered it and am rebuilding it without the
javascript menuing, which didn't work very well (and was a pain for me
to work with). But in redesigning it, I also decided to do away with the
original (non-CSS) tabular organization of the pages. I don't see the
page content as representing a table and try to avoid tables in
ambivalent situations like this. CSS seems to be doing the job for
me just fine.

--

Haines Brown, KB1GRM

[dorayme]

In article <87************@teufel.hartford-hwp.com>,
Haines Brown <br****@teufel.hartford-hwp.comwrote:

dorayme <do************@optusnet.com.auwrites:

In article <87************@teufel.hartford-hwp.com>,
Haines Brown <br****@teufel.hartford-hwp.comwrote:

Dorayme,

Talking of tables, is there any particular reason not to use a two col
table and let the in-built technology of tables do the alignment work
for you? It is certainly tabular in nature what you are wanting (as, I
recently noticed, John H was urging).

The site I'm reconstructing was built in ca. 1997, and since then I lost
control over it. I recently recovered it and am rebuilding it without the
javascript menuing, which didn't work very well (and was a pain for me
to work with). But in redesigning it, I also decided to do away with the
original (non-CSS) tabular organization of the pages. I don't see the
page content as representing a table and try to avoid tables in
ambivalent situations like this. CSS seems to be doing the job for
me just fine.

Putting in a table in a page is not laying the page out in tables. And
it is certainly not a bad thing to do when you are dealing with material
that is appropriate to a table.

Your material is appropriate. There are pictures in one col and
corresponding descriptions, row by row, in the other.

Sure, it is fine to do what we discussed previously with floated things
and not use tables. But it is a misdescription to view this alternative
to tables as doing it with CSS. Doing it with tables is doing it with
CSS too (if you have CSS to style the table). Doing without tables is
often doing it 'with divs'

--
dorayme