staggered images in HTML

[Ben Bullock]

Hi,

I tried using something like

<h3>Title 1</h3>

<p>
<img align=left> ...</img>
a little text.
</p>

<h3> Title 2</h3>

for some images, but the problem with this was that because the text in the
paragraph was short, successive titles and images became staggered towards
the left. So "Title 2" appears on the left of the image. There is a picture
on page 134 of the O'Reilly book "HTML and XHTML" of what happens. I want to
make sure that Title 2 appears under the image, no matter how short the text
in the paragraph is.

How can I ensure this?

Thank you for any help.

Ben.

 

[David Dorward]

Ben Bullock wrote:

<p>
<img align=left> ...</img>
a little text.
</p>
for some images, but the problem with this was that because the text in
the paragraph was short, successive titles and images became staggered
towards the left.

The align attribute is deprecated in favour of the float property. Use that
in combination with the clear property.

http://www.w3.org/TR/CSS21/visuren.html#floats

 

[Jonathan N. Little]

Hi,

I tried using something like

<h3>Title 1</h3>

<p>
<img align=left> ...</img>
a little text.
</p>

<h3> Title 2</h3>

for some images, but the problem with this was that because the text in
the paragraph was short, successive titles and images became staggered
towards the left. So "Title 2" appears on the left of the image. There
is a picture on page 134 of the O'Reilly book "HTML and XHTML" of what
happens. I want to make sure that Title 2 appears under the image, no
matter how short the text in the paragraph is.

How can I ensure this?

Thank you for any help.

Ben.

1: The answer could have been found by searching this NG with 'float'

2: <img align=left> ...*</img>*, image element does not have an ending tag.

3: <img *align=left*> ...</img> attribute *align* is deprecated in 4.01
you should style the element with float

4: On way would be to clear the floats with your heading...


CSS:
H3 { clear: both; }
..onLeft { float: left; }


HTML:

<h3>Short Title 1 </h3>
<p><img src="somepix1.jpg" alt="somepix1">
text about somepix1 ...
</p>

<h3>Short Title 2 </h3>
<p><img src="somepix2.jpg" alt="somepix2">
text about somepix2 ...
</p>
..
..
..

 

[Sid Ismail]

: Hi,
:
: I tried using something like
:
: <h3>Title 1</h3>
:
: <p>
: <img align=left> ...</img>
: a little text.
: </p>
:


Add: <br clear="all"> here

Sid


: <h3> Title 2</h3>
:
: for some images, but the problem with this was that because the text in the
: paragraph was short, successive titles and images became staggered towards
: the left. So "Title 2" appears on the left of the image. There is a picture
: on page 134 of the O'Reilly book "HTML and XHTML" of what happens. I want to
: make sure that Title 2 appears under the image, no matter how short the text
: in the paragraph is.
:
: How can I ensure this?
:
: Thank you for any help.
:
: Ben.
:

 

[Ben Bullock]

Ben Bullock wrote:

2: <img align=left> ...*</img>*, image element does not have an ending
tag.

3: <img *align=left*> ...</img> attribute *align* is deprecated in 4.01
you should style the element with float

4: On way would be to clear the floats with your heading...

Thanks for your help!

CSS:
H3 { clear: both; }
.onLeft { float: left; }


HTML:

<h3>Short Title 1 </h3>
<p><img src="somepix1.jpg" alt="somepix1">
text about somepix1 ...
</p>

<h3>Short Title 2 </h3>
<p><img src="somepix2.jpg" alt="somepix2">
text about somepix2 ...
</p>

Thanks for taking the time to answer my question!

I'm recently trying to update my rather-lame-from-an-html-point-of-view web
site http://www.sljfaq.org/, and I bought the O'Reilly books about CSS and
HTML, and am gradually studying my way through them. I'll use your examples
as hints for studying them.

 

[Ben Bullock]

Add: <br clear="all"> here

I'll try it. Thank you for your help.

 

[Ben Bullock]

Ben Bullock wrote:



The align attribute is deprecated in favour of the float property. Use
that
in combination with the clear property.

http://www.w3.org/TR/CSS21/visuren.html#floats

Thanks for the link. I've had a quick look at it. It's a little hard to
understand at first glance so I'll have to think a little more about it.

Thanks again,

Ben.

 

[dorayme]

I'm recently trying to update my rather-lame-from-an-html-point-of-view web
site http://www.sljfaq.org/, and I bought the O'Reilly books about CSS and
HTML, and am gradually studying my way through them. I'll use your examples
as hints for studying them.

You do need to tidy this up. Some things:

1.

your style sheet has a missing colon.

body {
margin-left: 5%; margin-right: 5%;
font-family Verdana, sans-serif;
}


2.

<li>
A <a href=hon/contents.html>list of book reviews by readers of <a
href="and others</a>.

has nested links (you leave out a closing anchor).

And you really should use href="..."



dorayme

 

[Ben Bullock]

You do need to tidy this up. Some things:

1.

your style sheet has a missing colon.

body {
margin-left: 5%; margin-right: 5%;
font-family Verdana, sans-serif;
}

Thanks for the tip! I've barely begun to do style sheets at the moment, this
was an experimental effort.

Thank you for taking the time to look at those details.

2.

<li>
A <a href=hon/contents.html>list of book reviews by readers of <a
href="and others</a>.

has nested links (you leave out a closing anchor).

Thanks for spotting that. As you can probably guess, the file was
auto-generated by a computer program, and it substituted this "news" link in
automatically.

BTW, about the "href=news" thing, the HTML book of O'Reilly says that it
shouldn't be used much. As this is the FAQ for a usenet newsgroup, I think
it's highly appropriate to provide this type of link, and also the links
(see also http://www.sljfaq.org/afaq/related-newsgroups.html) seem to work
perfectly well on Internet Explorer and FireFox. It pops up the news client,
temporarily subscribes me to the relevant group, then when I shut the news
client down it asks me if I want to keep on being subscribed or not. So it
seems absolutely fine from my point of view.

But ... does anyone else have anything different to relate?

And you really should use href="..."

Right, I remember getting complaints about that from the HTML validator at
www.w3.org.

I changed most of it to use quotes, as you can see, but that bit only
doesn't have them yet.

Thanks for your input.

Ben.

 

[Ben Bullock]

I've now rewritten the page I was getting "image problems" with, and in case
anyone's interested it can be seen at the following address:

http://www.sljfaq.org/afaq/calligraphy.html.

In the end I went with a style sheet solution.

I'm not sure it's perfect but the images are displaying roughly OK on IE and
Mozilla.

This is a work in progress, so any suggestions are much appreciated.

Thanks very much to David Dorward, Jonathon N. Little, dorayme, and Sid
Ismail for the help so far.

Ben.

 

[Jonathan N. Little]

Ben Bullock wrote:

I'm not sure it's perfect but the images are displaying roughly OK on IE
and Mozilla.

<snip>

My suggestion for the kanji images is to convert to a greyscale palette,
8 shades of grey works very well and use GIF format. JPG works better
for 'photographic' images with many colors, but for flat graphic
produces those little wiggly artifacts that blurs the calligraphy.

 

[Ben Bullock]

Ben Bullock wrote:

<snip>

My suggestion for the kanji images is to convert to a greyscale palette,
8 shades of grey works very well and use GIF format. JPG works better
for 'photographic' images with many colors, but for flat graphic
produces those little wiggly artifacts that blurs the calligraphy.

Thanks for the tip on the images. I've got some more images to scan in, so
I'll try using greyscale with gif output and see how it goes.

 

[Jonathan N. Little]

Thanks for the tip on the images. I've got some more images to scan in,
so I'll try using greyscale with gif output and see how it goes.

Yes, convert to greyscale, but that's 8-bit or 256 shades of grey
(colors) typically. At 8-bit a GIF many be bigger file size than the
JPG, however the your eye cannot really detect all 256 shade of grey so
if you take the next step and reduce the palette to 16 (4-bit) or 8
(3-bit) colors you can reduce the file size of the GIF and you will not
notice it in your image. In fact for calligraphy/print it can 'sharpen'
the image.

 

[kchayka]

http://www.sljfaq.org/afaq/calligraphy.html.

FYI, I think some of your meta data is mixed up:

<meta http-equiv="last-modified" content="(e-mail address removed)">
<link rev="made" href="mailto:Mon Jul 18 22:10:32 2005">

 

[Ben Bullock]

FYI, I think some of your meta data is mixed up:

<meta http-equiv="last-modified" content="(e-mail address removed)">
<link rev="made" href="mailto:Mon Jul 18 22:10:32 2005">

Oops! It's actually generated by something like this (in C):

fprintf (html, "...\"<meta http-equiv=\"last-modified\" content=\"%s\" ...",
...., email, date, ...);

I think I shifted the order of the format around and forgot to update the
input strings.

Thanks for pointing that out.

PS in case anyone's interested, I updated the contents somewhat, but not the
html, and I renamed it

http://www.sljfaq.org/afaq/lettering.html

since it's not about calligraphy as such.