«

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

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

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)

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

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

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

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

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