Reconciling a thumbnail link with adjacent paragraph
- From: Haines Brown <brownh@xxxxxxxxxxxxxxxxxxxxxxx>
- Date: Mon, 26 May 2008 18:55:18 -0400
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
.
- Follow-Ups:
- Re: Reconciling a thumbnail link with adjacent paragraph
- From: dorayme
- Re: Reconciling a thumbnail link with adjacent paragraph
- From: John Hosking
- Re: Reconciling a thumbnail link with adjacent paragraph
- Prev by Date: Blank page when printing in Firefox
- Next by Date: Re: Reconciling a thumbnail link with adjacent paragraph
- Previous by thread: Blank page when printing in Firefox
- Next by thread: Re: Reconciling a thumbnail link with adjacent paragraph
- Index(es):
Relevant Pages
|
