staggered images in HTML

Discussion in 'HTML' started by Ben Bullock, Jul 16, 2005.

  1. Ben Bullock

    Ben Bullock Guest

    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.
     
    Ben Bullock, Jul 16, 2005
    #1
    1. Advertising

  2. 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

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Jul 16, 2005
    #2
    1. Advertising

  3. Ben Bullock wrote:
    > 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>
    ..
    ..
    ..
    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 16, 2005
    #3
  4. Ben Bullock

    Sid Ismail Guest

    On Sun, 17 Jul 2005 00:03:59 +0900, "Ben Bullock" <>
    wrote:

    : 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.
    :
     
    Sid Ismail, Jul 16, 2005
    #4
  5. Ben Bullock

    Ben Bullock Guest

    "Jonathan N. Little" <> wrote in message
    news:gcaCe.2595$...
    > 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, Jul 17, 2005
    #5
  6. Ben Bullock

    Ben Bullock Guest

    "Sid Ismail" <> wrote in message
    news:...
    > On Sun, 17 Jul 2005 00:03:59 +0900, "Ben Bullock" <>
    > wrote:


    > Add: <br clear="all"> here


    I'll try it. Thank you for your help.
     
    Ben Bullock, Jul 17, 2005
    #6
  7. Ben Bullock

    Ben Bullock Guest

    "David Dorward" <> wrote in message
    news:dbb9po$8sm$1$...
    > 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


    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.
     
    Ben Bullock, Jul 17, 2005
    #7
  8. Ben Bullock

    dorayme Guest

    > From: "Ben Bullock" <>

    > 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="news:sci.lang.japan"><em>sci.lang.japan</em></a>
    and others</a>.

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

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



    dorayme
     
    dorayme, Jul 17, 2005
    #8
  9. Ben Bullock

    Ben Bullock Guest

    "dorayme" <> wrote in message
    news:BEFFF414.14A49%...
    >> From: "Ben Bullock" <>

    >
    >> 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;
    > }


    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="news:sci.lang.japan"><em>sci.lang.japan</em></a>
    > 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, Jul 17, 2005
    #9
  10. Ben Bullock

    Ben Bullock Guest

    "Ben Bullock" <> wrote in message
    news:dbb7ku$die$-u.ac.jp...

    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.
     
    Ben Bullock, Jul 18, 2005
    #10
  11. Ben Bullock wrote:
    <snip>
    > 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.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 19, 2005
    #11
  12. Ben Bullock

    Ben Bullock Guest

    "Jonathan N. Little" <> wrote in message
    news:36_Ce.2753$...
    > Ben Bullock wrote:
    > <snip>
    >> 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.


    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.
     
    Ben Bullock, Jul 19, 2005
    #12
  13. Ben Bullock wrote:
    >
    > "Jonathan N. Little" <> wrote in message
    > news:36_Ce.2753$...
    >
    >> Ben Bullock wrote:
    >> <snip>
    >>
    >>> 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.

    >
    >
    > 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.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 19, 2005
    #13
  14. Ben Bullock

    kchayka Guest

    Ben Bullock wrote:
    >
    > http://www.sljfaq.org/afaq/calligraphy.html.


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

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

    :)

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Jul 19, 2005
    #14
  15. Ben Bullock

    Ben Bullock Guest

    "kchayka" <> wrote in message
    news:...
    > Ben Bullock wrote:
    >>
    >> http://www.sljfaq.org/afaq/calligraphy.html.

    >
    > FYI, I think some of your meta data is mixed up:
    >
    > <meta http-equiv="last-modified" content="">
    > <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.
     
    Ben Bullock, Jul 20, 2005
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John Sutter
    Replies:
    0
    Views:
    646
    John Sutter
    Jan 13, 2004
  2. Guest
    Replies:
    4
    Views:
    908
    Eliyahu Goldin
    Jan 4, 2005
  3. Luis Esteban Valencia Muñoz
    Replies:
    0
    Views:
    780
    Luis Esteban Valencia Muñoz
    Jun 3, 2005
  4. wardemon

    Cache Images vs Static Images

    wardemon, Jun 14, 2007, in forum: ASP .Net
    Replies:
    3
    Views:
    668
    bruce barker
    Jun 14, 2007
  5. Jim
    Replies:
    0
    Views:
    407
Loading...

Share This Page