Forum Moderators: open

Message Too Old, No Replies

XHTML Strict - Center one line of text, not whole page

         

SFNative

3:44 pm on Aug 20, 2007 (gmt 0)

10+ Year Member



I have a website that I am trying to make XHTML 1.0 Strict compliant. On each page, I have a container divided into left and right sides. Left side contains an image. Right side is content. At the bottom of the right side div, I have a blockquote with a border. The HTML is structured as follows:

<p>"Words of wisdom." <br /> <center> - author </center></p>

I want the author's name to be centered beneath the quote text. I do NOT want 1) other text on the page to be centered or 2) the quote text itself centered in the box; it is left justified.

What is the best way to put this into my CSS so that I get the effect I describe above? So far, I tried using

element.class {
text-align: center;
}

...but it centered everything. Do I need to create another div for just the blockquote? If so, how can I get ONLY the second line to center?

I have other pages where something similar comes up, so I think I can adapt to fit those situations. Just not sure how to get started.

Marshall

4:22 pm on Aug 20, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You may have to use a defined list:

<dl>
<dt>"Words of wisdom."</dt>
<dd>- author</dd>
</dl>

Then set you CSS to increase the left margin on the <dd> beyond its normal setting:

<dd style="margin-left: 200px;">Author</dd>

Or use a style sheet.

Marshall

Fotiman

5:16 pm on Aug 20, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



From a semantic point of view, this is how I'd do it:

<blockquote>
<p>Four score...</p>
<div class="author">Abraham Lincoln</div>
</blockquote>

Within your styles:
blockquote {
text-align: left;
}
blockquote .author {
text-align: center;
}