Posted by Lars Eighner on 09/27/95 11:52

In our last episode,
<pm13b2l0ghvgdh8iaap6fo465vsdtj4jh8@4ax.com>,
the lovely and talented mouse@house.spam
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)

--
Lars Eighner http://larseighner.com/ http://myspace.com/larseighner
College: The fountains of knowledge, where everyone goes to drink.

[Back to original message]