Text and images in irregular shaped column(s)

Discussion in 'HTML' started by Woodmon, Oct 21, 2005.

  1. Woodmon

    Woodmon Guest

    I want to flow text in an "irregular" column on the left and place a
    large image at the top of an "irregular" column to the right. Then after
    the bottom of the large image I want the text column on the left to
    expand part way to the right, but not all the way to the right, as I want
    a smaller image on the right. Then this will continue to the bottom of
    the page. The text needs to flow down in the left column. And the right
    edge of the photos need to line up on the right edge of the page.


    txttxt --------
    txttxt | lg img |
    txttxt --------
    txttxttxtxt
    txttxttxtxt ----
    txttxttxtxt |img |
    txttxttxtxt ----
    txttxttxtxt
    txttxttxtxt ----
    txttxttxtxt |img |
    txttxttxtxt ----
    txttxttxtxt


    I previously attempted a nested table format but could not achieve
    consistent spacing between the right edge of the text block and the left
    edge of the images. Nor could I achieve consistent vertical spacing
    bwtween the images.

    I reverted to formatting the page with the text and images all in one
    single table column <td> and with the images aligned right and with
    vspace/hspace attributes (HTML is below). However the text flows beneath
    the images to the right margin when there is too much text and/or font
    size is increased. (this was expected but I wish to avoid).

    Is this particualr layout a candiate for a "float" similar to MP's
    situation posted on Tuesday? I will do some research at w3.org but any
    pointers are appreciated. BTW this project is not yet on a public server
    so no URL yet available.


    <td class="override" align="top">

    <img hspace="15" vspace="15" align="right" src="images/bigphoto.jpg">

    BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
    BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
    BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah.
    <br />
    <br />

    <a href="/images/image-popup2.jpg" title="blah" alt="blah">
    <img hspace="15" vspace="5" align="right" src="images/small-
    image2.jpg" /></a>

    BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
    BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
    BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah.
    <br />
    <br />

    <a href="/images/image-popup3.jpg" title="blah" alt="blah">
    <img hspace="15" vspace="5" align="right" src="images/small-
    image3.jpg" /></a>

    BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
    BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
    BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah.
    <br />
    <br />

    </td>

    Thanks,
    Woodmon
    Woodmon, Oct 21, 2005
    #1
    1. Advertising

  2. Woodmon

    Woodmon Guest

    Woodmon <mr.mediamonATgmail.com> wrote in
    news::


    >
    > <td class="override" align="top">
    >


    Oops. sSould be 'valign' above.

    W3C Recommendations on Tables at w3.org shows 'colgroup' and 'col'
    elements. Could this be part of solution?


    Below is a better picture of what I'm attempting to do.

    T0 = the flowing paragraphs of text.
    X1 = extra wide image.
    X2 - X5 = individual images (each narrower thant X1) .

    --------------------
    | T0 | X1 | X1 |
    --------------------
    | T0 | T0 | X2 |
    --------------------
    | T0 | T0 | X3 |
    --------------------
    | T0 | T0 | X4 |
    --------------------
    | T0 | T0 | X5 |
    --------------------


    I hope this is comprehensible. I can do basic tables but when it becomes
    more complex I only achieve a headache. Or should this be setup in CSS?
    This is a one shot deal so I didn't think so.

    Woodmon
    Woodmon, Oct 21, 2005
    #2
    1. Advertising

  3. On Fri, 21 Oct 2005 16:45:03 +0200, Woodmon <mr.mediamonATgmail.com> wrote:

    > txttxt --------
    > txttxt | lg img |
    > txttxt --------
    > txttxttxtxt
    > txttxttxtxt ----
    > txttxttxtxt |img |
    > txttxttxtxt ----
    > txttxttxtxt
    > txttxttxtxt ----
    > txttxttxtxt |img |
    > txttxttxtxt ----
    > txttxttxtxt



    <URL:http://home.wanadoo.nl/b.de.zoete/_test/woodmon.test.html>

    Look at the source for markup and styles.

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
    Barbara de Zoete, Oct 21, 2005
    #3
  4. Woodmon

    mbstevens Guest

    Woodmon wrote:
    > I want to flow text in an "irregular" column on the left and place a
    > large image at the top of an "irregular" column to the right. Then after
    > the bottom of the large image I want the text column on the left to
    > expand part way to the right, but not all the way to the right, as I want
    > a smaller image on the right. Then this will continue to the bottom of
    > the page. The text needs to flow down in the left column. And the right
    > edge of the photos need to line up on the right edge of the page.



    http://www.meyerweb.com/eric/css/edge/raggedfloat/demo.html
    .... not exactly what you want, but the knowledge should help.
    mbstevens, Oct 21, 2005
    #4
  5. In alt.html, Woodmon wrote:

    > W3C Recommendations on Tables at w3.org shows 'colgroup' and 'col'
    > elements. Could this be part of solution?
    >
    > Below is a better picture of what I'm attempting to do.
    >
    > T0 = the flowing paragraphs of text.
    > X1 = extra wide image.
    > X2 - X5 = individual images (each narrower thant X1) .

    <snip>
    > I hope this is comprehensible. I can do basic tables but when it becomes
    > more complex I only achieve a headache. Or should this be setup in CSS?
    > This is a one shot deal so I didn't think so.


    CSS, and it's easy.

    http://k75s.home.att.net/images.html

    --
    -bts
    -When motorcycling, never follow a pig truck
    Beauregard T. Shagnasty, Oct 21, 2005
    #5
  6. In alt.html, Barbara de Zoete wrote:

    > <URL:http://home.wanadoo.nl/b.de.zoete/_test/woodmon.test.html>


    "I use div's to simulate the images, because I don't want to upload any
    images. It is all about the example, right? So here goes..."

    Heh, I used images already on my server. And, with images (<img>) being
    an inline element, should be within the paragraphs, not between them.

    We both had the nearly identical thought, within minutes. The "secret"
    of course is the "float:right;"

    --
    -bts
    -When motorcycling, never follow a pig truck
    Beauregard T. Shagnasty, Oct 21, 2005
    #6
  7. On Fri, 21 Oct 2005 18:19:59 +0200, Beauregard T. Shagnasty
    <> wrote:

    > In alt.html, Barbara de Zoete wrote:
    >
    >> <URL:http://home.wanadoo.nl/b.de.zoete/_test/woodmon.test.html>

    >
    > "I use div's to simulate the images, because I don't want to upload any
    > images. It is all about the example, right? So here goes..."
    >
    > Heh, I used images already on my server.


    I was tempted to do that.

    > And, with images (<img>) being
    > an inline element, should be within the paragraphs, not between them.


    You are right of course. But if I put a div inside my paragraph, it terminates
    the paragraph, thinking I closed it. So I solved that by putting the div's
    outside the paragraphs.
    It is a valid reminder for the OP though, not putting the images all by
    themselves in the body. They should be inside some block level element, and if
    paragraphs are there, why not use them.

    > We both had the nearly identical thought, within minutes. The "secret"
    > of course is the "float:right;"


    I like to see 'my' idea of solving practical problem is the same as someone
    elses. It gives me a sense of 'I'm starting to learn, I'm getting there'.

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
    Barbara de Zoete, Oct 21, 2005
    #7
  8. On Fri, 21 Oct 2005 09:45:03 -0500, Woodmon <mr.mediamonATgmail.com>
    wrote:

    >I want to flow text in an "irregular" column on the left and place a
    >large image at the top of an "irregular" column to the right. Then after
    >the bottom of the large image I want the text column on the left to
    >expand part way to the right, but not all the way to the right, as I want
    >a smaller image on the right. Then this will continue to the bottom of
    >the page. The text needs to flow down in the left column. And the right
    >edge of the photos need to line up on the right edge of the page.
    >
    >
    >txttxt --------
    >txttxt | lg img |
    >txttxt --------
    >txttxttxtxt
    >txttxttxtxt ----
    >txttxttxtxt |img |
    >txttxttxtxt ----
    >txttxttxtxt
    >txttxttxtxt ----
    >txttxttxtxt |img |
    >txttxttxtxt ----
    >txttxttxtxt



    I don't think it's exactly what you're asking for, but see if the layout
    on http://www.xs4all.nl/~sbpoley/trip-reports/tunisia-may05.html would
    be acceptable for you. (When viewed in a standards-compliant browser.)
    It uses max-width and float. (There are max-width hacks for IE if you
    must.)

    --
    Stephen Poley

    http://www.xs4all.nl/~sbpoley/webmatters/
    Stephen Poley, Oct 21, 2005
    #8
  9. Woodmon

    kchayka Guest

    Barbara de Zoete wrote:

    > On Fri, 21 Oct 2005 18:19:59 +0200, Beauregard T. Shagnasty
    > <> wrote:
    >
    >> And, with images (<img>) being
    >> an inline element, should be within the paragraphs, not between them.

    >
    > You are right of course. But if I put a div inside my paragraph, it terminates
    > the paragraph, thinking I closed it. So I solved that by putting the div's
    > outside the paragraphs.


    Span is an inline element and probably would have more suitable than div
    as an image replacement.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Oct 21, 2005
    #9
  10. On Fri, 21 Oct 2005 19:23:41 +0200, kchayka <> wrote:

    > Barbara de Zoete wrote:
    >
    >> On Fri, 21 Oct 2005 18:19:59 +0200, Beauregard T. Shagnasty
    >> <> wrote:
    >>
    >>> And, with images (<img>) being
    >>> an inline element, should be within the paragraphs, not between them.

    >>
    >> You are right of course. But if I put a div inside my paragraph, it terminates
    >> the paragraph, thinking I closed it. So I solved that by putting the div's
    >> outside the paragraphs.

    >
    > Span is an inline element and probably would have more suitable than div
    > as an image replacement.


    You're absolutely right. I changed it now, so the span represents the image. The
    other thing I did was 'cluster' the fake images all at the top of the markup
    inside a containing div, so that the text can't get between the images if they
    get too far apart vertically.
    From this mock-up and the remarks on the first version, I suppose the OP can
    find his way.



    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
    Barbara de Zoete, Oct 21, 2005
    #10
  11. On Fri, 21 Oct 2005 21:35:11 +0200, Stan McCann <> wrote:

    > Woodmon <mr.mediamonATgmail.com> wrote in
    > news::
    >
    >> BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
    >> BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
    >> BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
    >> BlahBLah BlahBLah BlahBLah. <br />

    >
    > The only part of the post I understood. The rest of the post was kind
    > of like the adults on Charlie Brown.
    >


    lol

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
    Barbara de Zoete, Oct 21, 2005
    #11
  12. Woodmon

    Stan McCann Guest

    Woodmon <mr.mediamonATgmail.com> wrote in
    news::

    > BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
    > BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
    > BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
    > BlahBLah BlahBLah BlahBLah. <br />


    The only part of the post I understood. The rest of the post was kind
    of like the adults on Charlie Brown.

    --
    Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
    Webmaster/Computer Center Manager, NMSU at Alamogordo
    http://alamo.nmsu.edu/ There are 10 kinds of people.
    Those that understand binary and those that don't.
    Stan McCann, Oct 21, 2005
    #12
  13. Woodmon

    Woodmon Guest

    "Barbara de Zoete" <> wrote in
    news:eek:p.sy0a3hdex5vgts@zoete_b:

    > On Fri, 21 Oct 2005 19:23:41 +0200, kchayka <> wrote:
    >
    >> Barbara de Zoete wrote:
    >>
    >>> On Fri, 21 Oct 2005 18:19:59 +0200, Beauregard T. Shagnasty
    >>> <> wrote:
    >>>
    >>>> And, with images (<img>) being
    >>>> an inline element, should be within the paragraphs, not between
    >>>> them.
    >>>
    >>> You are right of course. But if I put a div inside my paragraph, it
    >>> terminates the paragraph, thinking I closed it. So I solved that by
    >>> putting the div's outside the paragraphs.

    >>
    >> Span is an inline element and probably would have more suitable than
    >> div as an image replacement.

    >
    > You're absolutely right. I changed it now, so the span represents the
    > image. The other thing I did was 'cluster' the fake images all at the
    > top of the markup inside a containing div, so that the text can't get
    > between the images if they get too far apart vertically.
    > From this mock-up and the remarks on the first version, I suppose the
    > OP can
    > find his way.
    >


    Appreciate the recommendations and pointers from everyone. I implemented
    Barbara's suggestions into my layout. A big help. Thanks so much Barbara, I
    like the idea of clustering rhe images in the div.

    Just uploaded files to the web so you can now see.
    http;//www.bigbubblers.com/

    (but not ready to go public with it...still lots of clean up work to do,
    optimizing images, putting up additional contnet, flash video clips, new
    display head/logo, polishing up forum and gallery, etc).

    To my questions...

    1. I just ran the home page thru W3 validator and that about killed me.
    After lots of repair work the page validated to HTML 4.01 Transitional.
    (That is, W3 ssays "tentaivlely passed validation"... are there other
    things I have to do so is no longer "tentative"?

    2. Also passed CSS2 validation.

    3. When validating to strict HTML 4.01 the pahe is still failing due to my
    implmentation of target="_new" to launch a new window when clicking on a
    particular link. Any recommends?

    4. Also not validating to strict HTML 4.01 due to the HTML for the
    "moonphase" script. Should I contact vendor to recommend they validate the
    HTML they give out?

    5. Not sure if I should validate page to XHTML 1.0. Any need?

    6. Once done with the home page will distribute changes to other pages and
    validate.

    7. My final concern regards the flowing text on the home page when it
    extends past the last image on the right, I observe the text flows all te
    way to the right edge of the page margin when the text is too long (you can
    see the effect by increasing text size in the browser text). This is not a
    real issue when multiple lines of text flow below the image, but it looks a
    bit funky when only one or two lines flow down there all by themselves. .
    Is there a method to keep text in it's 'column' or any other recommends?

    8. Wondering about the following javascript in Barbara's page source. Any
    thoughts what this is for?

    <script type='text/javascript'>
    <!--
    if (top != self) top.location.href = self.location.href;
    // -->
    </script>


    9. My later plan is to adapt the site structure to current HTML/CSS
    standards e.g. rid of the nested tables where possible. But at the same
    time I'm finding my old school skill set needs a bit of updating... so lots
    of side reading w3.org docs ahead of me.

    Thanks again for everyones feedback.

    Woodmon
    Woodmon, Oct 22, 2005
    #13
  14. On Sat, 22 Oct 2005 13:12:37 +0200, Woodmon <mr.mediamonATgmail.com> wrote:

    > 3. When validating to strict HTML 4.01 the pahe is still failing due to my
    > implmentation of target="_new" to launch a new window when clicking on a
    > particular link. Any recommends?


    Just leave it out. Your visitor will probably know best whether or not s/he
    wants a link to open in a new page.

    > 5. Not sure if I should validate page to XHTML 1.0. Any need?


    If you are thinking about upgrading your markup, going for valid html4.01 strict
    is good already. I don't see any use (for this page/site) to go to xhtml.

    > 7. My final concern regards the flowing text on the home page when it
    > extends past the last image on the right, I observe the text flows all te
    > way to the right edge of the page margin when the text is too long

    <snip>
    > Is there a method to keep text in it's 'column' or any other recommends?


    You know how wide your images will be, right? I would put a padding on the body
    of the page, just a little wider than those images. Then give the images with
    the stylesheet a negative margin-right, so they fit in the space on the right of
    the page, you just created with the padding on the body.

    Like this (use values suited for your situation):

    body {
    padding-right:17em; }

    img {
    width:15em;
    margin-right:-16em; }

    > 8. Wondering about the following javascript in Barbara's page source. Any
    > thoughts what this is for?
    >
    > <script type='text/javascript'>
    > <!--
    > if (top != self) top.location.href = self.location.href;
    > // -->
    > </script>


    Ah, yes. Only recently I added that to all my pages and my template. I noticed
    that some sites 'frame' some of my pages. I don't like that.
    This small script makes my pages 'escape' from someones frameset, by putting the
    page back in 'top', as if it was linked to with target=_top. Unfortunately only
    works when browser is javascript enabled, but that is true for the vast
    majority. So most of the times it will work.


    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
    Barbara de Zoete, Oct 22, 2005
    #14
  15. Woodmon

    Woodmon Guest

    "Barbara de Zoete" <> wrote in
    news:eek:p.sy1pvekix5vgts@zoete_b:

    > On Sat, 22 Oct 2005 13:12:37 +0200, Woodmon <mr.mediamonATgmail.com>
    > wrote:
    >
    >> 3. When validating to strict HTML 4.01 the page is still failing due
    >> to my implmentation of target="_new" to launch a new window when
    >> clicking on a particular link. Any recommends?

    >
    > Just leave it out. Your visitor will probably know best whether or not
    > s/he wants a link to open in a new page.


    So is target="_new" or target="_blank" completely deprecated? Any
    replacement code that works well in both IE an Firefox?

    My friend who I am helping out with this site desires to launch a new
    window (or preferably a tab) in his browser when clicking on a link to
    the gallery or the forum (neither of which is integrated into his
    website) or when clicking external links in his resources page.

    Myself I know how to use the back button and/or use Shift-click or
    Control-click.


    > give the images with the stylesheet a negative margin-right, so they
    > fit in the space on the right of the page, you just created with the
    > padding on the body.
    >
    > Like this ... {snip}


    I'll have to test this out. Thanks for the example.


    >> 8. Wondering about the following javascript in Barbara's page source.
    >> {snip}


    You're full of all sorts of good ideas! Thanks again Barbara,


    BTW I just put up a Flash clip on the site (lots more coming soon). So
    now I just need get the body text flush to the top margin, even with the
    photo image on the left and the vid clip on the right. And want to have
    the broswer window open at an 820 pixel width or so, I would be happy
    with these fixes, even if the site still looks like a website designed
    in the 70's ;-)

    Woodmon
    Woodmon, Oct 22, 2005
    #15
  16. On Sat, 22 Oct 2005, Woodmon wrote:

    > So is target="_new" or target="_blank" completely deprecated?


    In a web context, "deprecated" is a technical term. You find the
    answer to questions about it by looking it up at the W3C, not by
    asking usenet's opinion. For example for HTML/4.01:
    http://www.w3.org/TR/html401/index/attributes.html

    Though some find it odd that although it's missing from Strict, it's
    not actually deprecated.

    > Any replacement code that works well in both IE an Firefox?


    Taking it out is the generally user-friendly thing to do. Browser
    control should be in the hands of the user.

    > My friend who I am helping out with this site desires to launch a new
    > window (or preferably a tab) in his browser


    Then teach him how to use his browser's feature for doing that (e.g
    right-click, "open link in new tab", seems intuitive enough, if they
    can't remember CTRL/click). Leave other readers free to make their
    own choices.

    have fun
    Alan J. Flavell, Oct 22, 2005
    #16
  17. Woodmon

    Robi Guest

    Woodmon wrote in message news:...
    [...]
    > 3. When validating to strict HTML 4.01 the pahe is still failing due to my
    > implmentation of target="_new" to launch a new window when clicking on a
    > particular link. Any recommends?


    Don't do that, it's noy user friendly.
    I always hate it, when I click on a link and a new window pops up.
    Lave the target= away.

    [...]

    > 7. My final concern regards the flowing text on the home page when it
    > extends past the last image on the right, I observe the text flows all te
    > way to the right edge of the page margin when the text is too long (you can
    > see the effect by increasing text size in the browser text). This is not a
    > real issue when multiple lines of text flow below the image, but it looks a
    > bit funky when only one or two lines flow down there all by themselves. .
    > Is there a method to keep text in it's 'column' or any other recommends?


    You are looking for something like this:
    http://glish.com/css/7.asp

    > 8. Wondering about the following javascript in Barbara's page source. Any
    > thoughts what this is for?
    >
    > <script type='text/javascript'>
    > <!--
    > if (top != self) top.location.href = self.location.href;
    > // -->
    > </script>


    that gets you out of other people's frames.
    Robi, Oct 23, 2005
    #17
    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. Voyager

    Problem with Shaped Windows Forms

    Voyager, Mar 6, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    454
    n3crius
    Mar 7, 2004
  2. jodasi
    Replies:
    0
    Views:
    379
    jodasi
    Nov 28, 2005
  3. bruce varley
    Replies:
    2
    Views:
    381
    Mike Wahler
    Nov 25, 2003
  4. sharan
    Replies:
    4
    Views:
    1,265
    Pavel Lepin
    Nov 5, 2007
  5. Cofa via CofaMail
    Replies:
    1
    Views:
    1,507
    Cofa via CofaMail
    Mar 1, 2010
Loading...

Share This Page