float text around image

[steven]

Hi,
I can float the image left or right so the text will float around it, but
only if the top of the image is aligned with the start of the paragraph. I'd
like the image be a little below that, so the text appears above, left and
below the image. The text is a single paragraph.
Thanks for any help.

Steven

[Beauregard T. Shagnasty]

steven wrote:

I can float the image left or right so the text will float around
it, but only if the top of the image is aligned with the start of
the paragraph. I'd like the image be a little below that, so the
text appears above, left and below the image. The text is a single
paragraph.

My solution is to place the image in a <span> that is inserted within
the paragraph text a few lines below the start of the text. Try this CSS:

..imgleft, .imgright {
font-size: 90%;
font-style: italic;
padding: 1em;
text-align: center;
}
..imgleft {
float: left;
}
..imgright {
float: right;
}

<p>
Here is a bunch of text ...
Here is a bunch of text ...
Here is a bunch of text ...
<span class="imgright ">
<img ...> <br>A caption here
</span>
Here is a bunch of text ...
Here is a bunch of text ...
Here is a bunch of text ...
</p>

See an example at my site: http://www.freezeblock.com/
...the picture of the house. Since the page works for any browser
width, the amount of text above will vary with that width. Place the
<span> where you think it works best.

--
-bts
-This space intentionally left blank.

[steven]

"Beauregard T. Shagnasty" <a.*********@ex ample.invalid> wrote in message
news:32******** *****@individua l.net...

steven wrote:

I can float the image left or right so the text will float around
it, but only if the top of the image is aligned with the start of
the paragraph. I'd like the image be a little below that, so the
text appears above, left and below the image. The text is a single
paragraph.

My solution is to place the image in a <span> that is inserted within
the paragraph text a few lines below the start of the text. Try this CSS:

.imgleft, .imgright {
font-size: 90%;
font-style: italic;
padding: 1em;
text-align: center;
}
.imgleft {
float: left;
}
.imgright {
float: right;
}

<p>
Here is a bunch of text ...
Here is a bunch of text ...
Here is a bunch of text ...
<span class="imgright ">
<img ...> <br>A caption here
</span>
Here is a bunch of text ...
Here is a bunch of text ...
Here is a bunch of text ...
</p>

Good idea! Thanks.
Steven

[David Dorward]

Beauregard T. Shagnasty wrote:

My solution is to place the image in a <span> that is inserted within
the paragraph text a few lines below the start of the text.

The trouble with that approach is that you have to be careful with your alt
text and caption, otherwise you end up with something like this:

Traditional gutters are prone to blockage, especially in winter when
ice jams push water back up under the roofing material and damage
fascia boards and A house suffering from an ice dam
House with ice dam interior walls. In warmer climates, heavy rains and
blocked gutters cause the same problems.

.... which is nonsensical.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Beauregard T. Shagnasty]

David Dorward wrote:

... which is nonsensical.

I agree. <g> Have you a better solution?

--
-bts
-This space intentionally left blank.

[David Dorward]

Beauregard T. Shagnasty wrote:

David Dorward wrote:

... which is nonsensical.

I agree. <g> Have you a better solution?

Don't use a caption and have sane (null) alt text. You still get an ugly
effect in graphical browsers without CSS, but its better then nothing. (The
other option is to forget about trying to achieve that effect and live with
the top of the image being parallel to the beginning of the paragraph).

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Alan J. Flavell]

On Sat, 18 Dec 2004, Beauregard T. Shagnasty wrote:

David Dorward wrote:

... which is nonsensical.

I agree. <g> Have you a better solution?

Provide any additional detail about the image by means of the
attribute that's meant for it, namely title= (just how the reader gets
their hands on that is a client-specific issue: I won't say it's by
any means ideal, but at least, as a document author, you'd be doing
the right thing).

Use the alt(ernative text) for providing a genuine textual alternative
for the image's purpose, whatever it might be. In this case, that
genuine alternative might be alt="".

But if you need the image to be an anchor link, then maybe you could
adapt this principle (from my now somewhat outdated example):

http://ppewww.ph.gla.ac.uk/~flavell/alt/floater.html

[Beauregard T. Shagnasty]

David Dorward wrote:

Beauregard T. Shagnasty wrote:

David Dorward wrote:

... which is nonsensical.

I agree. <g> Have you a better solution?

Don't use a caption and have sane (null) alt text. You still get an
ugly effect in graphical browsers without CSS, but its better then
nothing. (The other option is to forget about trying to achieve
that effect and live with the top of the image being parallel to
the beginning of the paragraph).

I'll consider the null alt text. My client, however, would not like me
to remove the captions, so there would still be a nonsensical
paragraph in a text browser. I'll ask him, though.

--
-bts
-This space intentionally left blank.

[David Dorward]

Beauregard T. Shagnasty wrote:

I'll consider the null alt text. My client, however, would not like me
to remove the captions, so there would still be a nonsensical
paragraph in a text browser.

Or a graphical browser with a screen reader ...
.... or a search engine indexing robot.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Beauregard T. Shagnasty]

David Dorward wrote:

Beauregard T. Shagnasty wrote:

I'll consider the null alt text. My client, however, would not
like me to remove the captions, so there would still be a
nonsensical paragraph in a text browser.

Or a graphical browser with a screen reader ... ... or a search
engine indexing robot.

Perhaps I could surround the caption with something like this:

<span style="cap">[Caption: </span>A house with ice dam<span
style="cap"> ]</span>

..cap { display: none }

--
-bts
-This space intentionally left blank.