poetry advice sought

J

JWS

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
 
N

Neredbojias

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

JWS

Neredbojias said:
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
 
C

Chris F.A. Johnson

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

Beauregard T. Shagnasty

JWS said:
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.
 
B

Blinky the Shark

Neredbojias said:
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! ;)
 
N

Neredbojias

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

dorayme

Neredbojias said:
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>
 
N

Neredbojias

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

Ben C

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

:)
 
J

Jukka K. Korpela

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

dorayme

"Jukka K. Korpela said:
Scripsit Ben C:


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

Ben C

Scripsit Ben C:


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

dorayme

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


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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top