I've been thinking on this one, and I can't seem to figure it out.
I have a site I use to put up my poetry. Since my poems are very structure-based, I need to use pre to ensure the spacing is as I intend it.
I also need each poem centered.
This is what works: <table><pre>poem goes here</pre></table> where the poem text is left justified and the table is centered on the page, therefore displaying the poem structured properly and in the center of the page. However, this is nasty, and doesn't pass as Transitional XHTML.
So I tried to change it. This is all I tried that does not work.
1)Centering the text changes what the whitespace is counted with respect to and ruins the structure of the poem entirely.
2)Putting the poem in a div with a class that sets width and both side margins to auto fails because the browser interprets the white-space: pre as indicating that all space to the right of the poem is also counted whitespace, and therefore the width is set to the width of the window, putting the poem, structurally okay, on the left side of the window.
I'm trying to avoid using tables and forming this layout with styles, but the short question is...can I center a div of text that is set to pre, and if so, how?<head>
#poem
{
padding: 10px;
position: absolute;
left:80px;
top:40px;
width: 129px;
background-color:#FFFFFF;
font-family: verdana;
font-size: 10px;
text-align: left;
line-height:.5cm;
border: 1px solid #A4AFFF;
}
</head>
<body>
<div id="poem">
poem line 1<br>
poem line 2<br>
poem line 3<br>
poem line 4<br>
poem line 5<br>
poem line 6<br>
poem line 7<br>
poem line 8<br>
poem line 9<br>
poem line 10
</div>
</body>
Did you try something like this? Im not sure if you did, I don't know If I followed you to well if you did.This is the best I can come up with. You'd have to play around with the number of ems for the .poem width setting for each poem, but once you get it it stays centered nicely regardless of the users screen size and font size.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en' xmlns="http://www.w3.org/1999/xhtml" xml:lang=
"en">
<head>
<meta http-equiv='Content-Type' content=
'text/html; charset=us-ascii' />
<title>Page title</title>
<style type="text/css">
.poem {
width: 17em;
margin: 0 auto;
border: solid 1px navy;
padding: 1em;
}
.poem h2 {
font-size: large;
text-align: center;
}
.poem h3 {
font-size: medium;
font-weight: normal;
font-style: italic;
margin-top: 0;
text-align: center;
}
.poem div {
margin: 1em 0;
padding: 0;
}
.poem p {
margin: 0;
white-space: nowrap;
}
.indent {
padding-left: 1em;
}
</style>
</head>
<body>
<div class="poem">
<h2>A Line-Storm Song</h2>
<h3>by Robert Frost</h3>
<div><!-- stanza -->
<p>The line-storm clouds fly tattered and swift.</p>
<p class="indent">The road is forlorn all day,</p>
<p>Where a myriad snowy quartz stones lift,</p>
<p class="indent">And the hoof-prints vanish away.</p>
<p>The roadside flowers, too wet for the bee,</p>
<p class="indent">Expend their bloom in vain.</p>
<p>Come over the hills and far with me,</p>
<p class="indent">And be my love in the rain.</p>
</div>
<div>
<p>The birds have less to say for themselves</p>
<p class="indent">In the wood-world's torn despair</p>
<p>Than now these numberless years the elves,</p>
<p class="indent">Although they are no less there:</p>
<p>All song of the woods is crushed like some</p>
<p class="indent">Wild, earily shattered rose.</p>
<p>Come, be my love in the wet woods, come,</p>
<p class="indent">Where the boughs rain when it blows.</p>
</div>
<div>
<p>There is the gale to urge behind</p>
<p class="indent">And bruit our singing down,</p>
<p>And the shallow waters aflutter with wind</p>
<p class="indent">From which to gather your gown.</p>
<p>What matter if we go clear to the west,</p>
<p class="indent">And come not through dry-shod?</p>
<p>For wilding brooch shall wet your breast</p>
<p class="indent">The rain-fresh goldenrod.</p>
</div>
<div>
<p>Oh, never this whelming east wind swells</p>
<p class="indent">But it seems like the sea's return</p>
<p>To the ancient lands where it left the shells</p>
<p class="indent">Before the age of the fern;</p>
<p>And it seems like the time when after doubt</p>
<p class="indent">Our love came back amain.</p>
<p>Oh, come forth into the storm and rout</p>
<p class="indent">And be my love in the rain.</p>
</div>
</div> <!-- end poem -->
</body>
</html>This is actually a really interesting problem, and something I've been wrestling with recently. What you really want to do is center something of an unknown horizontal size. You have float:left the "pre" so that it shrinkwraps its content, and then somehow center the float.
There's a bunch of weird ways to do this, involving display:inline-block and negative margins and stuff, but I've yet to find anything elegant that works cross-browser.Hah, figures that with a simple site it was my luck to run into the one place XHTML decides not to have a nice, undeprecated answer. Well I'll mess with the floats and such, and if that can't work out, I'll just use breaks and spaces instead of pre to format my poems, though that's a damn shame.
Thanks for the help, though, guys.
Hah, figures that with a simple site it was my luck to run into the one place XHTML decides not to have a nice, undeprecated answer. Well I'll mess with the floats and such, and if that can't work out, I'll just use breaks and spaces instead of pre to format my poems, though that's a damn shame.
Thanks for the help, though, guys.
You should be able to make it valid xHTML by just wrapping two more elements around the <pre>, right?
<table><tr><td><pre>...</pre></td></tr></table>HTML Tables do this completely fine by themselves without needing CSS... maybe I'm just missing something?
Table is aligned center, Cell is aligned left. Done.Why not two nested divs. Outer div aligned centre, inner div aligned left.Why not two nested divs. Outer div aligned centre, inner div aligned left.
Because the inner div will be the full width of the window (display:block) and thus not appear centered at all. The only way I know of to make a div the width of its content is to float it, and I don't know how to center a float of unknown width.The only way I know of to make a div the width of its content is to float itHuh?
and I don't know how to center a float of unknown widthmargin-left:auto;margin-right:auto;Good god, talk about making a mountain out of a mole hill.
<html>
<head>
<title>Centered Pre</title>
<style type="text/css">
pre {text-align:left;margin-left:auto;margin-right:auto;display:inline;}
body {text-align:center;}
</style>
</head>
<body>
<pre>
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
</pre>
</body>Good god, talk about making a mountain out of a mole hill.
Your suggestion sort of works, but it cuts the indents in half, because it's acutally centering the whole line including the leading spaces. Using this text:
<pre>
Test test test test test
Test test test test test
Test Test test test test
Test test test test test
Test test test test test
Test test test test test
Test test test test test
Test Test test test test
</pre>
It comes out looking like the attached image (I highlighted the text so you can see how it's centering the lines, thus decreasing the intended indents).Then just append enough whitespace on to the end of each line to bring it back into line again- hint: run spaces to the end of the longest line.Good god, talk about making a mountain out of a mole hill.
Good idea.
(my brain automatically rejects solutions that I know won't work on IE5, but this is a great way to do it if you aren't worried about supporting that...)Just use tables!Just use tables!
On that note, why not make your poem tabular data?
<table cellpadding="0" cellspacing="0" border="0" align="center" id="poemBody">
<thead>
<tr>
<th>Poem Title</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre>
There once was a man from Nantucket...
</pre></td>
</tr>
</tbody>
</table>
I realize, for the semantics advocates, this might be a bit of a stretch, but it makes sense to me.
I have a site I use to put up my poetry. Since my poems are very structure-based, I need to use pre to ensure the spacing is as I intend it.
I also need each poem centered.
This is what works: <table><pre>poem goes here</pre></table> where the poem text is left justified and the table is centered on the page, therefore displaying the poem structured properly and in the center of the page. However, this is nasty, and doesn't pass as Transitional XHTML.
So I tried to change it. This is all I tried that does not work.
1)Centering the text changes what the whitespace is counted with respect to and ruins the structure of the poem entirely.
2)Putting the poem in a div with a class that sets width and both side margins to auto fails because the browser interprets the white-space: pre as indicating that all space to the right of the poem is also counted whitespace, and therefore the width is set to the width of the window, putting the poem, structurally okay, on the left side of the window.
I'm trying to avoid using tables and forming this layout with styles, but the short question is...can I center a div of text that is set to pre, and if so, how?<head>
#poem
{
padding: 10px;
position: absolute;
left:80px;
top:40px;
width: 129px;
background-color:#FFFFFF;
font-family: verdana;
font-size: 10px;
text-align: left;
line-height:.5cm;
border: 1px solid #A4AFFF;
}
</head>
<body>
<div id="poem">
poem line 1<br>
poem line 2<br>
poem line 3<br>
poem line 4<br>
poem line 5<br>
poem line 6<br>
poem line 7<br>
poem line 8<br>
poem line 9<br>
poem line 10
</div>
</body>
Did you try something like this? Im not sure if you did, I don't know If I followed you to well if you did.This is the best I can come up with. You'd have to play around with the number of ems for the .poem width setting for each poem, but once you get it it stays centered nicely regardless of the users screen size and font size.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en' xmlns="http://www.w3.org/1999/xhtml" xml:lang=
"en">
<head>
<meta http-equiv='Content-Type' content=
'text/html; charset=us-ascii' />
<title>Page title</title>
<style type="text/css">
.poem {
width: 17em;
margin: 0 auto;
border: solid 1px navy;
padding: 1em;
}
.poem h2 {
font-size: large;
text-align: center;
}
.poem h3 {
font-size: medium;
font-weight: normal;
font-style: italic;
margin-top: 0;
text-align: center;
}
.poem div {
margin: 1em 0;
padding: 0;
}
.poem p {
margin: 0;
white-space: nowrap;
}
.indent {
padding-left: 1em;
}
</style>
</head>
<body>
<div class="poem">
<h2>A Line-Storm Song</h2>
<h3>by Robert Frost</h3>
<div><!-- stanza -->
<p>The line-storm clouds fly tattered and swift.</p>
<p class="indent">The road is forlorn all day,</p>
<p>Where a myriad snowy quartz stones lift,</p>
<p class="indent">And the hoof-prints vanish away.</p>
<p>The roadside flowers, too wet for the bee,</p>
<p class="indent">Expend their bloom in vain.</p>
<p>Come over the hills and far with me,</p>
<p class="indent">And be my love in the rain.</p>
</div>
<div>
<p>The birds have less to say for themselves</p>
<p class="indent">In the wood-world's torn despair</p>
<p>Than now these numberless years the elves,</p>
<p class="indent">Although they are no less there:</p>
<p>All song of the woods is crushed like some</p>
<p class="indent">Wild, earily shattered rose.</p>
<p>Come, be my love in the wet woods, come,</p>
<p class="indent">Where the boughs rain when it blows.</p>
</div>
<div>
<p>There is the gale to urge behind</p>
<p class="indent">And bruit our singing down,</p>
<p>And the shallow waters aflutter with wind</p>
<p class="indent">From which to gather your gown.</p>
<p>What matter if we go clear to the west,</p>
<p class="indent">And come not through dry-shod?</p>
<p>For wilding brooch shall wet your breast</p>
<p class="indent">The rain-fresh goldenrod.</p>
</div>
<div>
<p>Oh, never this whelming east wind swells</p>
<p class="indent">But it seems like the sea's return</p>
<p>To the ancient lands where it left the shells</p>
<p class="indent">Before the age of the fern;</p>
<p>And it seems like the time when after doubt</p>
<p class="indent">Our love came back amain.</p>
<p>Oh, come forth into the storm and rout</p>
<p class="indent">And be my love in the rain.</p>
</div>
</div> <!-- end poem -->
</body>
</html>This is actually a really interesting problem, and something I've been wrestling with recently. What you really want to do is center something of an unknown horizontal size. You have float:left the "pre" so that it shrinkwraps its content, and then somehow center the float.
There's a bunch of weird ways to do this, involving display:inline-block and negative margins and stuff, but I've yet to find anything elegant that works cross-browser.Hah, figures that with a simple site it was my luck to run into the one place XHTML decides not to have a nice, undeprecated answer. Well I'll mess with the floats and such, and if that can't work out, I'll just use breaks and spaces instead of pre to format my poems, though that's a damn shame.
Thanks for the help, though, guys.
Hah, figures that with a simple site it was my luck to run into the one place XHTML decides not to have a nice, undeprecated answer. Well I'll mess with the floats and such, and if that can't work out, I'll just use breaks and spaces instead of pre to format my poems, though that's a damn shame. Thanks for the help, though, guys.
You should be able to make it valid xHTML by just wrapping two more elements around the <pre>, right?
<table><tr><td><pre>...</pre></td></tr></table>HTML Tables do this completely fine by themselves without needing CSS... maybe I'm just missing something?
Table is aligned center, Cell is aligned left. Done.Why not two nested divs. Outer div aligned centre, inner div aligned left.Why not two nested divs. Outer div aligned centre, inner div aligned left.
Because the inner div will be the full width of the window (display:block) and thus not appear centered at all. The only way I know of to make a div the width of its content is to float it, and I don't know how to center a float of unknown width.The only way I know of to make a div the width of its content is to float itHuh?
and I don't know how to center a float of unknown widthmargin-left:auto;margin-right:auto;Good god, talk about making a mountain out of a mole hill.
<html>
<head>
<title>Centered Pre</title>
<style type="text/css">
pre {text-align:left;margin-left:auto;margin-right:auto;display:inline;}
body {text-align:center;}
</style>
</head>
<body>
<pre>
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
Test test test test test test test
Test test test test
</pre>
</body>Good god, talk about making a mountain out of a mole hill.
Your suggestion sort of works, but it cuts the indents in half, because it's acutally centering the whole line including the leading spaces. Using this text:
<pre>
Test test test test test
Test test test test test
Test Test test test test
Test test test test test
Test test test test test
Test test test test test
Test test test test test
Test Test test test test
</pre>
It comes out looking like the attached image (I highlighted the text so you can see how it's centering the lines, thus decreasing the intended indents).Then just append enough whitespace on to the end of each line to bring it back into line again- hint: run spaces to the end of the longest line.Good god, talk about making a mountain out of a mole hill.
Good idea.
(my brain automatically rejects solutions that I know won't work on IE5, but this is a great way to do it if you aren't worried about supporting that...)Just use tables!Just use tables!
On that note, why not make your poem tabular data?
<table cellpadding="0" cellspacing="0" border="0" align="center" id="poemBody">
<thead>
<tr>
<th>Poem Title</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre>
There once was a man from Nantucket...
</pre></td>
</tr>
</tbody>
</table>
I realize, for the semantics advocates, this might be a bit of a stretch, but it makes sense to me.