box with text with grey background

[mouse]

I require some HTML which will draw a rectangular box with some small
text in it (e.g. an email message which is being quoted apart from the
rest of the text). The box should have a thin black boundary, and a
light grey background to make the text distinctive from what it
outside the box.

I would guess that a <TABLE> would have to be used with one entry and
some form of table entry background colour selection would be
necessary. Can people offer wise words on the tags and design choices
for such an element? Or are there examples on the web which come to
mind, so I can steal their code? Thank you.

 

[Chris F.A. Johnson]

I require some HTML which will draw a rectangular box with some small
text in it (e.g. an email message which is being quoted apart from the
rest of the text). The box should have a thin black boundary, and a
light grey background to make the text distinctive from what it
outside the box.

<div style="border: 1pt solid black;
padding: 1em;
background-color: #dddddd;
color: black;
width: 80%;
margin: auto;">
Text here.

 

[Beauregard T. Shagnasty]

I require some HTML which will draw a rectangular box with some small
text in it (e.g. an email message which is being quoted apart from
the rest of the text). The box should have a thin black boundary, and
a light grey background to make the text distinctive from what it
outside the box.

I would guess that a <TABLE> would have to be used with one entry and
some form of table entry background colour selection would be
necessary. Can people offer wise words on the tags and design choices
for such an element? Or are there examples on the web which come to
mind, so I can steal their code? Thank you.

Sounds like the perfect use of a <blockquote>. I've used it on a number
of pages, including this one:
http://k75s.home.att.net/tips.html

Styling in the CSS. Pick your own colors:
http://k75s.home.att.net/style/shag.css

 

[mouse]

Sounds like the perfect use of a <blockquote>. I've used it on a number
of pages, including this one:
http://k75s.home.att.net/tips.html

Styling in the CSS. Pick your own colors:
http://k75s.home.att.net/style/shag.css

It's strange because while blockquote works on your webpage, when I
try to code an elementary example it doesn't work for me, it indents
but there is no border. Does the;

<style type="text/css">
cite {margin: 0 3em; padding-top: 0; }
h2 { margin-top: 1.5em; }
p, ol, ul, blockquote { max-width: 40em; font-family: "Trebuchet MS",
sans-serif; }
</style>

at the beginning of the file have anything to do with your blockquotes
having borders? As you can see I'm a bit of an html newbie.

Chris Johnson's DIV works great.

 

[dorayme]

Styling in the CSS. Pick your own colors:
http://k75s.home.att.net/style/shag.css

It's strange because while blockquote works on your webpage, when I
try to code an elementary example it doesn't work for me, it indents
but there is no border. Does the;

<style type="text/css">
cite {margin: 0 3em; padding-top: 0; }
h2 { margin-top: 1.5em; }
p, ol, ul, blockquote { max-width: 40em; font-family: "Trebuchet MS",
sans-serif; }
</style>

at the beginning of the file have anything to do with your blockquotes
having borders? As you can see I'm a bit of an html newbie.
[/QUOTE]

If you want borders you need to add

border: 1px red solid;

in the list you can see above for the blockquote

 

[Beauregard T. Shagnasty]

It's strange because while blockquote works on your webpage, when I
try to code an elementary example it doesn't work for me, it indents
but there is no border. Does the;

<style type="text/css">
cite {margin: 0 3em; padding-top: 0; }
h2 { margin-top: 1.5em; }
p, ol, ul, blockquote { max-width: 40em; font-family: "Trebuchet MS",
sans-serif; }
</style>

at the beginning of the file have anything to do with your blockquotes
having borders? As you can see I'm a bit of an html newbie.

The border comes from the CSS file:

blockquote {
background: #f9f9f9 none;
border: solid #696 1px;
clear: both;
color: #000;
margin: 0 0 0 2em;
padding: 0.5em;
}
blockquote p {margin: 0; }

 

[Lars Eighner]

In our last episode,
the lovely and talented (e-mail address removed)
broadcast on comp.infosystems.www.authoring.html:

I require some HTML which will draw a rectangular box with some small
text in it (e.g. an email message which is being quoted apart from the
rest of the text). The box should have a thin black boundary, and a
light grey background to make the text distinctive from what it
outside the box.

I would guess that a <TABLE> would have to be used with one entry and
some form of table entry background colour selection would be
necessary. Can people offer wise words on the tags and design choices
for such an element? Or are there examples on the web which come to
mind, so I can steal their code? Thank you.

This is html. The hidden caption tells text browser users what this is.
You might want to call it (quoted text) or (email question). Whether
h4 is appropriate for this caption will depend on your context.
Simply omit the <div class="center"></div> if you do not want centered
text, which you probably do not want.

<div class="center">
<div class="pullout">
<hr class="hide">
<h4 class="hide">(pullquote)</h4>
<p class="large">

<hr class="hide">

</div>
</div>


Here is the preprocessor css. If you want smaller text, a font
size of say 70% might suit you. The border width is set up to suggest
a shadow. You seem to want border-width: thin. You can adjust
border and background colors to suit you, and likewise the width
of the box. Of course you must substitute real values for the
font-family or omit this completely if the same font as the context
is acceptable. In other words, season to taste.


..center { margin-right: auto;
margin-left: auto;
text-align: center; }

DIV.pullout {font-size: 150%;
background-color: #eee;
padding: 0.5em;
border-width: thin thick thick thin;
border-color: #00C;
border-style: outset;
font-weight: bold;
font-family: <?php print "{$sans}"; ?>;
margin-top: 0.5em;
margin-bottom: 1em;
margin-right: auto;
margin-left: auto;
width: 70%;}


For examples see: http://larseighner.com/ (the overall page is broken in IE
-- or IE is broken in a way the overall page reveals, but the boxes work
fine even in IE)

 

[mouse]

The border comes from the CSS file:

blockquote {
background: #f9f9f9 none;
border: solid #696 1px;
clear: both;
color: #000;
margin: 0 0 0 2em;
padding: 0.5em;
}
blockquote p {margin: 0; }

Your code works very well, thank you.

 

[Andy Mabbett]

If you want smaller text, a font size of say 70% might suit you.

But it won't suit your readers.