HTML help? How can I put a box around text like

[Eric J in MN]

this:

Example

on my own website?

[NYC Liberal]

1. You need to use a stylesheet.

Search Google for CSS basics.

[KitchenWitch]

2. You could also do a table

using only 1 cell and 1 row!

[Eric J in MN]

3. But how would I get it to look that nice? nt

nt

[sendero]

4. Use a table...

.... you can specify a border, bordercolor, background color and cell padding/cellspacing.

Something like this:
<TABLE width=100% cellspacing=0 cellpadding=4 border=1 bordercolor=#f0f0f0>
<TR><TD> here is some text
</TD></TR>
</TABLE>

[salvorhardin]

5. Short answer/DIY answer

Short answer
You can use an inline style to specify background color, padding and border properties (among other things).

<p style="background-color: #d0d0d0; border: solid thin #7f7f7f; padding: 1em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vel lorem sed elit aliquam luctus. Donec turpis. In venenatis sem eget dui. Aliquam condimentum feugiat elit. Nunc suscipit luctus turpis. Suspendisse potenti. Integer ultrices. Nam placerat. Morbi nisl urna, venenatis vel, ullamcorper eget, imperdiet ac, nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Would make your paragraph have a light gray background color with a darker gray thin solid border and 1 em worth of padding all around. If you want multiple paragraphs then you can wrap them in a <div> tag.

<div style="background-color: #d0d0d0; border: solid thin #7f7f7f; padding: 1em;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In purus. Nullam vel metus. Nam ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque sem tortor, consequat eget, tincidunt quis, cursus eget, magna. Aliquam convallis. Praesent pulvinar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam a quam. Suspendisse potenti. Integer leo. Nulla venenatis, odio vel consequat rutrum, est nulla luctus eros, sit amet euismod ligula est eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum vitae urna non leo feugiat elementum. Etiam consequat risus vitae magna. In nonummy turpis in nunc.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam in magna. Duis ante magna, luctus eget, lobortis vitae, blandit eu, eros. Phasellus vitae mi. Etiam quis nibh. Duis diam nulla, vulputate dictum, dignissim in, mattis non, justo. Duis augue odio, pulvinar vitae, sagittis quis, facilisis eu, ante. Sed lectus ante, porta vel, sagittis eget, aliquet nec, risus. Duis eu enim. Praesent vel ante vitae orci mollis blandit. Phasellus ultrices orci molestie nisl. Vestibulum volutpat magna sit amet turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras urna libero, lobortis in, blandit id, dapibus ut, est. Nullam at leo nec nisl posuere convallis.</p>
</div>

DIY answer
http://www.w3schools.com/css/default.asp

Lorem ipsum generator for generated greeking goodness
http://www.lipsum.com

[Eric J in MN]

8. What if I want the box less-wide than the rest of the text and

right-aligned with that approach?

In other words, what about indenting?

UPDATE: I just found that using blockquote will indent it, as in:
http://www.moveleft.com/quote2.html

Thanks, that is a good approach.

[salvorhardin]

9. Check out using margin properties in the style

<blockquote> works, and is just fine. You can specify this using CSS too.

For example:

<div style="background-color: #d0d0d0; border: solid thin #7f7f7f; margin-left: 3em; margin-right: 3em; padding: 1em;">
<p>Lorem ipsum dolor sit amet...</p>
</div>

Would indent both the left and right margins by 3 em.

When you get to using actual style sheets, this is handy because you can specify (for instance) different levels on indenting, and then apply them with a simple <div class="myclassname"> tag. :-)

[Eric J in MN]

10. What does em stand for? nt

nt

[salvorhardin]

11. Sorry...

An em is a typographical measurement. In olden days, an em was supposed to be literally the width of a capital 'M' in whatever typeface one was using. Nowadays it's just the font's body size (length from lowest descender to highest ascender). It's where we get the term 'em dash' from, the dash that is supposed to be 1 em wide.

In CSS you can specify measurements in a wide variety of ways. On screen you're probably most interested in %, px (pixels), pt (points) and em. However, you can also specify pc (picas), mm, cm, in, and ex (the height of a lowercase 'x' in the current font). There may be more I'm forgetting. :-) A lot of these come in handy if you're specifying a print media rule for your stylesheet (by specifying different styles for different types of media it makes it easy to do things like add a printer-friendly format without redoing the whole web page).

In general, its' best to use relative measurements rather than absolute measurements (e.g. % rather than px).

On edit: Handy reference.
http://www.w3schools.com/css/css_units.asp

[Eric J in MN]

12. Ok, thanks for your help (nt)

nt

[Eric J in MN]

6. Thanks everyone.

I came up with this page with your help:

http://www.moveleft.com/quote.html

[KitchenWitch]

7. Looks good Eric!