poetry advice sought

Discussion in 'HTML' started by JWS, Mar 28, 2008.

  1. JWS

    JWS Guest

    See http://www.jw-stumpel.nl/yeats.html

    The title says it all, really; I'd like to position the title and
    the poem nicely on the page, while keeping the whole thing 'fluid'
    (not using absolute dimensions). The present design does not work
    well with *all* window widths. Suggestions are appreciated!

    Regards, Jan
    JWS, Mar 28, 2008
    #1
    1. Advertising

  2. JWS

    Neredbojias Guest

    On 28 Mar 2008, JWS <> wrote:

    > See http://www.jw-stumpel.nl/yeats.html
    >
    > The title says it all, really; I'd like to position the title and
    > the poem nicely on the page, while keeping the whole thing 'fluid'
    > (not using absolute dimensions). The present design does not work
    > well with *all* window widths. Suggestions are appreciated!
    >
    > Regards, Jan


    First of all, try this instead of what you got:

    <div style="margin:auto;width:50%;white-space:nowrap;">

    Others will probably come along with more comprehensive advice. If not,
    I'll be back!

    --
    Neredbojias
    http://www.neredbojias.com/
    Great sights and sounds
    Neredbojias, Mar 28, 2008
    #2
    1. Advertising

  3. JWS

    JWS Guest

    Neredbojias wrote:

    > First of all, try this instead of what you got:
    >
    > <div style="margin:auto;width:50%;white-space:nowrap;">
    >
    > Others will probably come along with more comprehensive advice.
    > If not, I'll be back!


    I used your suggestion in a new version of the page:

    http://www.jw-stumpel.nl/yeats-test.html

    This is definitely better than my original design (behaves better
    when the window width is changed) but I can't help thinking that
    there might be even better solutions. So please, do come back!

    Regards, Jan
    JWS, Mar 28, 2008
    #3
  4. On 2008-03-28, JWS wrote:
    > See http://www.jw-stumpel.nl/yeats.html
    >
    > The title says it all, really; I'd like to position the title and
    > the poem nicely on the page, while keeping the whole thing 'fluid'
    > (not using absolute dimensions). The present design does not work
    > well with *all* window widths. Suggestions are appreciated!


    Use <div style="width: 25em; max-width: 80%; margin: auto;"> and
    include <h1> and <h3> (not centred) inside the <div>:

    <http://cfaj.freeshell.org/testing/yeats.html>

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Mar 28, 2008
    #4
  5. JWS wrote:

    > See http://www.jw-stumpel.nl/yeats.html
    >
    > The title says it all, really;


    Please place the question in the body of the post as well, thanks.

    > I'd like to position the title and the poem nicely on the page, while
    > keeping the whole thing 'fluid' (not using absolute dimensions). The
    > present design does not work well with *all* window widths.
    > Suggestions are appreciated!


    I use the <pre> element for poetry.

    <h1>The Second Coming</h1>
    <h3>A poem by W.B. Yeats (1921)</h3>
    <pre class="poetry">
    [type your poem here... no <br> necessary between lines]
    </pre>

    The CSS of your choice:
    h1, h3 { text-align: center; }
    /* though I would use a styled <div> for "A poem by W.B. Yeats (1921)"
    as I don't think that is a "heading" */

    ..poetry {
    font-family: Georgia, serif;
    margin-left: 10em;
    }

    Your Yeats page works just fine down to about a 500px-wide window.
    Unless you are going to consider mobile phones, that should be good
    enough.

    --
    -bts
    -Friends don't let friends drive Vista
    Beauregard T. Shagnasty, Mar 28, 2008
    #5
  6. Neredbojias wrote:

    > On 28 Mar 2008, JWS <> wrote:
    >
    >> See http://www.jw-stumpel.nl/yeats.html
    >>
    >> The title says it all, really; I'd like to position the title and the
    >> poem nicely on the page, while keeping the whole thing 'fluid' (not
    >> using absolute dimensions). The present design does not work well with
    >> *all* window widths. Suggestions are appreciated!
    >>
    >> Regards, Jan

    >
    > First of all, try this instead of what you got:
    >
    > <div style="margin:auto;width:50%;white-space:nowrap;">
    >
    > Others will probably come along with more comprehensive advice. If not,
    > I'll be back!


    Quick! Someone come along with more comprehensive advice! ;)


    --
    Blinky
    Killing all posts from Google Groups
    The Usenet Improvement Project: http://improve-usenet.org
    Blinky: http://blinkynet.net
    Blinky the Shark, Mar 28, 2008
    #6
  7. JWS

    Neredbojias Guest

    On 28 Mar 2008, JWS <> wrote:

    > Neredbojias wrote:
    >
    >> First of all, try this instead of what you got:
    >>
    >> <div style="margin:auto;width:50%;white-space:nowrap;">
    >>
    >> Others will probably come along with more comprehensive advice.
    >> If not, I'll be back!

    >
    > I used your suggestion in a new version of the page:
    >
    > http://www.jw-stumpel.nl/yeats-test.html
    >
    > This is definitely better than my original design (behaves better
    > when the window width is changed) but I can't help thinking that
    > there might be even better solutions. So please, do come back!


    Chris's solution strategy is probably the best. Find the length of the
    longest line in ems (-I think he arrived at 25em) and set the div width to
    that, with margin:auto;. I would retain the white-space:nowrap;, though.

    --
    Neredbojias
    http://www.neredbojias.com/
    Great sights and sounds
    Neredbojias, Mar 28, 2008
    #7
  8. JWS

    Neredbojias Guest

    On 28 Mar 2008, Blinky the Shark <> wrote:

    >> First of all, try this instead of what you got:
    >>
    >> <div style="margin:auto;width:50%;white-space:nowrap;">
    >>
    >> Others will probably come along with more comprehensive advice. If not,
    >> I'll be back!

    >
    > Quick! Someone come along with more comprehensive advice! ;)


    Hah hah, very funny!

    --
    Neredbojias
    http://www.neredbojias.com/
    Great sights and sounds
    Neredbojias, Mar 28, 2008
    #8
  9. Neredbojias wrote:

    > On 28 Mar 2008, Blinky the Shark <> wrote:
    >
    >>> First of all, try this instead of what you got:
    >>>
    >>> <div style="margin:auto;width:50%;white-space:nowrap;">
    >>>
    >>> Others will probably come along with more comprehensive advice. If
    >>> not, I'll be back!

    >>
    >> Quick! Someone come along with more comprehensive advice! ;)

    >
    > Hah hah, very funny!


    Well, you issued the warning. :)


    --
    Blinky
    Killing all posts from Google Groups
    The Usenet Improvement Project: http://improve-usenet.org
    Blinky: http://blinkynet.net
    Blinky the Shark, Mar 29, 2008
    #9
  10. JWS

    dorayme Guest

    In article <Xns9A6F9B6687FE3neredbojiasnano@85.214.90.236>,
    Neredbojias <> wrote:

    > On 28 Mar 2008, JWS <> wrote:
    >
    > > Neredbojias wrote:
    > >
    > >> First of all, try this instead of what you got:
    > >>
    > >> <div style="margin:auto;width:50%;white-space:nowrap;">
    > >>
    > >> Others will probably come along with more comprehensive advice.
    > >> If not, I'll be back!

    > >
    > > I used your suggestion in a new version of the page:
    > >
    > > http://www.jw-stumpel.nl/yeats-test.html
    > >
    > > This is definitely better than my original design (behaves better
    > > when the window width is changed) but I can't help thinking that
    > > there might be even better solutions. So please, do come back!

    >
    > Chris's solution strategy is probably the best. Find the length of the
    > longest line in ems (-I think he arrived at 25em) and set the div width to
    > that, with margin:auto;. I would retain the white-space:nowrap;, though.


    You have to be a bit careful with specifying a width. With some fonts,
    eg, Courier, I found 25em was too little. I was looking at B's pre and
    it came up in my default Courier. But if you allow for the widest of the
    fonts, you will bugger up the centering a bit! Swings and roundabouts.

    Anyway, might as well throw in my fiddling too:

    <http://netweaver.com.au/alt/yeats.html>

    --
    dorayme
    dorayme, Mar 29, 2008
    #10
  11. JWS

    Neredbojias Guest

    On 28 Mar 2008, dorayme <> wrote:

    >> Chris's solution strategy is probably the best. Find the length of
    >> the longest line in ems (-I think he arrived at 25em) and set the div
    >> width to that, with margin:auto;. I would retain the
    >> white-space:nowrap;, though.

    >
    > You have to be a bit careful with specifying a width. With some fonts,
    > eg, Courier, I found 25em was too little. I was looking at B's pre and
    > it came up in my default Courier. But if you allow for the widest of
    > the fonts, you will bugger up the centering a bit! Swings and
    > roundabouts.


    Right, and I should also mention that one should run through the gamot of
    reasonable font-size adjustments in a browser when setting this.

    > Anyway, might as well throw in my fiddling too:
    >
    > <http://netweaver.com.au/alt/yeats.html>


    Looks decent to me. Centering can sometimes be fine-tuned by adding a
    little padding-left to compensate for the uneven right side of text.

    --
    Neredbojias
    http://www.neredbojias.com/
    Great sights and sounds
    Neredbojias, Mar 29, 2008
    #11
  12. JWS

    Ben C Guest

    On 2008-03-29, dorayme <> wrote:
    > In article <Xns9A6F9B6687FE3neredbojiasnano@85.214.90.236>,

    [...]
    >> Chris's solution strategy is probably the best. Find the length of the
    >> longest line in ems (-I think he arrived at 25em) and set the div width to
    >> that, with margin:auto;. I would retain the white-space:nowrap;, though.

    >
    > You have to be a bit careful with specifying a width. With some fonts,
    > eg, Courier, I found 25em was too little. I was looking at B's pre and
    > it came up in my default Courier. But if you allow for the widest of the
    > fonts, you will bugger up the centering a bit! Swings and roundabouts.
    >
    > Anyway, might as well throw in my fiddling too:
    >
    ><http://netweaver.com.au/alt/yeats.html>


    Rather than guess 26em will be enough you really want centered
    shrink-to-fit block here. Replace width: 26em on body with display:
    table.

    See also

    http://netweaver.com.au/alt/shrinkToFitCentring/centeringShrinkToFit.html

    :)
    Ben C, Mar 29, 2008
    #12
  13. JWS

    JWS Guest

    Ben C wrote:
    > Rather than guess 26em will be enough you really want centered
    > shrink-to-fit block here. Replace width: 26em on body with display:
    > table.
    >
    > See also
    >
    > http://netweaver.com.au/alt/shrinkToFitCentring/centeringShrinkToFit.html


    Thanks, everyone, for all reactions. I nοw think some kind of
    "shrink-to-fit block" approach is probably the best, will post
    result when finished.

    Regards, Jan
    JWS, Mar 29, 2008
    #13
  14. Scripsit Ben C:

    > Rather than guess 26em will be enough you really want centered
    > shrink-to-fit block here. Replace width: 26em on body with display:
    > table.


    Somewhat impractical, since it fails on IE, thus in most browsing
    situations.

    You could use <table> markup... but stay tuned to getting flamed by
    Purists.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Mar 29, 2008
    #14
  15. JWS

    dorayme Guest

    In article <OPxHj.317797$>,
    "Jukka K. Korpela" <> wrote:

    > Scripsit Ben C:
    >
    > > Rather than guess 26em will be enough you really want centered
    > > shrink-to-fit block here. Replace width: 26em on body with display:
    > > table.

    >
    > Somewhat impractical, since it fails on IE, thus in most browsing
    > situations.
    >
    > You could use <table> markup... but stay tuned to getting flamed by
    > Purists.


    In this particular case, it will irritate some people for me to add (the
    Purists, no doubt), that there is nothing particularly wrong with a one
    col table where there is a clear relationship between the two or three
    rows, the top one or two being the title of the poem and author, the
    bottom being the poem.

    --
    dorayme
    dorayme, Mar 29, 2008
    #15
  16. JWS

    Ben C Guest

    On 2008-03-29, Jukka K. Korpela <> wrote:
    > Scripsit Ben C:
    >
    >> Rather than guess 26em will be enough you really want centered
    >> shrink-to-fit block here. Replace width: 26em on body with display:
    >> table.

    >
    > Somewhat impractical, since it fails on IE, thus in most browsing
    > situations.


    That's why I put the link to dorayme's page which explains that and has
    a workaround for IE.

    > You could use <table> markup... but stay tuned to getting flamed by
    > Purists.


    You could also use display: inline-block with text-align: center on the
    container.

    This should work in at least Opera, Safari and Firefox 3.

    I had thought that inline-blocks sort of worked in IE but that
    shrink-to-fit auto widths on them were the one thing that didn't. But
    looking again at dorayme's page

    http://netweaver.com.au/alt/shrinkToFitCentring/centeringShrinkToFit.html

    the suggested solution for IE does seem to be doing just that.

    So here is an inline-block version:

    http://www.tidraso.co.uk/misc/yeats.html

    which might work in IE (wild guess, not tested), but doesn't work in
    Firefox 2. So you could conditionally use display: table for Firefox
    2. Or try something involving -moz-inline-box but I don't know what the
    behaviour of that is supposed to be.
    Ben C, Mar 29, 2008
    #16
  17. JWS

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2008-03-29, Jukka K. Korpela <> wrote:
    > > Scripsit Ben C:
    > >
    > >> Rather than guess 26em will be enough you really want centered
    > >> shrink-to-fit block here. Replace width: 26em on body with display:
    > >> table.

    > >
    > > Somewhat impractical, since it fails on IE, thus in most browsing
    > > situations.

    >
    > That's why I put the link to dorayme's page which explains that and has
    > a workaround for IE.
    >
    > > You could use <table> markup... but stay tuned to getting flamed by
    > > Purists.

    >
    > You could also use display: inline-block with text-align: center on the
    > container.
    >
    > This should work in at least Opera, Safari and Firefox 3.
    >
    > I had thought that inline-blocks sort of worked in IE but that
    > shrink-to-fit auto widths on them were the one thing that didn't. But
    > looking again at dorayme's page
    >
    > http://netweaver.com.au/alt/shrinkToFitCentring/centeringShrinkToFit.html
    >
    > the suggested solution for IE does seem to be doing just that.
    >
    > So here is an inline-block version:
    >
    > http://www.tidraso.co.uk/misc/yeats.html
    >
    > which might work in IE (wild guess, not tested), but doesn't work in
    > Firefox 2. So you could conditionally use display: table for Firefox
    > 2. Or try something involving -moz-inline-box but I don't know what the
    > behaviour of that is supposed to be.


    Unfortunately not on IE6, no.

    --
    dorayme
    dorayme, Mar 29, 2008
    #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. Jolly Student

    .NET/General Advice Sought

    Jolly Student, Jun 13, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    453
    Sahil Malik
    Jun 14, 2004
  2. Jolly Student

    .NET/General Advice Sought

    Jolly Student, Jun 13, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    362
    Paul D. Murphy [ASPNET-MVP]
    Jun 14, 2004
  3. jbeck

    Beginner Advice Sought

    jbeck, Sep 20, 2004, in forum: Java
    Replies:
    12
    Views:
    551
    Scott Ellsworth
    Sep 25, 2004
  4. Replies:
    7
    Views:
    394
    Sharon
    Jun 16, 2004
  5. Replies:
    4
    Views:
    257
Loading...

Share This Page