Boxed text

Gustaf Liljegren

I wonder if there's a way with HTML4 + CSS1 to create boxed text. I mean
content that isn't directly related to the topic of dicussion, but is
still useful to know. Take this example:

---8<------------------------------------
A paragraph...

+----------------------+
| TITLE |
| By the way... |
| |
| And furthermore... |
+----------------------+

And now back to our discussion...
---8<------------------------------------

It's tricky to get the linebreaks right. No linebreak before or after
the title, and no linebreak after the last paragraph in the box. Am I
asking too much? :-)

Gustaf

Jul 20 '05 #1

Els

Gustaf Liljegren wrote:

I wonder if there's a way with HTML4 + CSS1 to create boxed
text. I mean content that isn't directly related to the
topic of dicussion, but is still useful to know. Take this
example:

---8<------------------------------------
A paragraph...

+----------------------+
| TITLE |
| By the way... |
| |
| And furthermore... |
+----------------------+

And now back to our discussion...
---8<------------------------------------

It's tricky to get the linebreaks right. No linebreak
before or after the title, and no linebreak after the last
paragraph in the box. Am I asking too much? :-)

Are you looking for

<blockquote>
<h1>TITLE</h1>
<p>
By the way..
</p>
<p>
And furthermore...
</p>
</blockquote>

?

If you still get to much space before the title or after the
last paragraph, you could add to the CSS:
blockquote h1 {margin-top:0;}
blockquote p {margin-top:1em;margin-bottom:0;}

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #2

Mark Tranchant

Gustaf Liljegren wrote:

I wonder if there's a way with HTML4 + CSS1 to create boxed text. I mean
content that isn't directly related to the topic of dicussion, but is
still useful to know. Take this example:

---8<------------------------------------
A paragraph...

+----------------------+
| TITLE |
| By the way... |
| |
| And furthermore... |
+----------------------+

And now back to our discussion...
---8<------------------------------------

It's tricky to get the linebreaks right. No linebreak before or after
the title, and no linebreak after the last paragraph in the box. Am I
asking too much? :-)

Those gaps you're referring to are not linebreaks, but padding and/or
margins.

Here's my example of what you want. The box is a bit cramped, but you
could easily apply some padding to it. I just wanted to show what could
be done.

http://tranchant.plus.com/tmp/boxedtext

--
Mark.

Jul 20 '05 #3

Matthias Gutfeldt

Mark Tranchant wrote:

Gustaf Liljegren wrote:

I wonder if there's a way with HTML4 + CSS1 to create boxed text. I
mean content that isn't directly related to the topic of dicussion,
but is still useful to know. Take this example:

---8<------------------------------------
A paragraph...

+----------------------+
| TITLE |
| By the way... |
| |
| And furthermore... |
+----------------------+

And now back to our discussion...
---8<------------------------------------

It's tricky to get the linebreaks right. No linebreak before or after
the title, and no linebreak after the last paragraph in the box. Am I
asking too much? :-)

Those gaps you're referring to are not linebreaks, but padding and/or
margins.

Here's my example of what you want. The box is a bit cramped, but you
could easily apply some padding to it. I just wanted to show what could
be done.

http://tranchant.plus.com/tmp/boxedtext

Tinned pears? I just lost my appetite!
Matthias

Jul 20 '05 #4

Els

Mark Tranchant wrote:

http://tranchant.plus.com/tmp/boxedtext

Sounds like a good recipe too :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #5

Els

Matthias Gutfeldt wrote:

http://tranchant.plus.com/tmp/boxedtext

Tinned pears? I just lost my appetite!

It's a lot better than tinned strawberries ;-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #6

Matthias Gutfeldt

Els wrote:

Matthias Gutfeldt wrote:

http://tranchant.plus.com/tmp/boxedtext

Tinned pears? I just lost my appetite!

It's a lot better than tinned strawberries ;-)

Ewwww. Please stop, or I'll lose my lunch!
Matthias

Jul 20 '05 #7

Peter Smit

Els wrote:

Mark Tranchant wrote:

http://tranchant.plus.com/tmp/boxedtext

Sounds like a good recipe too :-)

Take the pears and stuff them with tuna (out of a can with oil)
Delicious. Can also be done with peaches (out of the can)!
Peter

--

Het Digit@@l Café is een initiatief van de Stichting Welzijn
Ouderen Aalsmeer (SWOA)

Jul 20 '05 #8

Stan Brown

"Mark Tranchant" <ma**@tranchant.plus.com> wrote in
comp.infosystems.www.authoring.html:

Here's my example of what you want. The box is a bit cramped, but you
could easily apply some padding to it. I just wanted to show what could
be done.

http://tranchant.plus.com/tmp/boxedtext

Understanding you just implemented what the OP seemed to be asking
for, shouldn't that box be out of the normal flow. Logically if it'd
not part of the main discussion it shouldn't interrupt the main
discussion.

The traditional print way to do this is a sidebar or a footnote.
Footnotes are dreadful because careful readers tend to seek them out
and lose the thread of the main text, but sidebars are rather good
because they're off to the side. Your eyes can flick at them between
paragraphs of the main text, and you either read them or not.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

Jul 20 '05 #9

Shawn K. Quinn

Els wrote:

Gustaf Liljegren wrote:

I wonder if there's a way with HTML4 + CSS1 to create boxed
text. I mean content that isn't directly related to the
topic of dicussion, but is still useful to know. Take this
example:

---8<------------------------------------
A paragraph...

+----------------------+
| TITLE |
| By the way... |
| |
| And furthermore... |
+----------------------+

And now back to our discussion...
---8<------------------------------------

It's tricky to get the linebreaks right. No linebreak
before or after the title, and no linebreak after the last
paragraph in the box. Am I asking too much? :-)

Are you looking for

<blockquote>

[...]

Nothing the OP said stated that this was a block quotation. Therefore
<blockquote> is not the answer.

--
Shawn K. Quinn

Jul 20 '05 #10

Matthias Gutfeldt

Shawn K. Quinn wrote:

Els wrote:

Are you looking for

<blockquote>

[...]

Nothing the OP said stated that this was a block quotation. Therefore
<blockquote> is not the answer.

.... and the answer is?
Matthias

Jul 20 '05 #11

Els

Peter Smit wrote:

Els wrote:

Mark Tranchant wrote:

http://tranchant.plus.com/tmp/boxedtext

Sounds like a good recipe too :-)

Take the pears and stuff them with tuna (out of a can with
oil) Delicious. Can also be done with peaches (out of the
can)! Peter

Hmmm... now I think I have to share Matthias' opinion...
My curiosity might win though.. :S

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #12

Jukka K. Korpela

Stan Brown <th************@fastmail.fm> wrote:

http://tranchant.plus.com/tmp/boxedtext

Understanding you just implemented what the OP seemed to be asking
for, shouldn't that box be out of the normal flow. Logically if it'd
not part of the main discussion it shouldn't interrupt the main
discussion.

Indeed. If you just have a paragraph with borders, the natural assumption
is that this is a hightlighted paragraph in normal flow rather than a
digression. Setting float: right and some reasonable width (such as
15em) plus some margins should take care of this.

Moreover, using a different font, and maybe even reduced font size like
90%, might contribute to conveying the idea of a side note. But this is
basically CSS, not HTML.

It is possible to create a floated paragraph in pure (though not
Puristic) HTML as well, e.g.

<table align="right" cellspacing="8" cellpadding="6"
summary="This table contains a side note about foobar."
width="300" border="1">
<tr><td>Lorem ipsum - -.</td></tr>
</table>

This is unnecessarily tricky and inflexible, so this was basically just
my ObHTML this time. :-)

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Jul 20 '05 #13

Michael Selent

Am Mon, 12 Jul 2004 um 14:38 GMT hat Matthias Gutfeldt geschrieben:

... and the answer is?

Why not using:
<div style="width:20%; border:3px double #dddddd;
background-color:#eeeeee; float:left; margin-right:5pt;">
blabla - boxed Text
</div>
Place main text here. Foo.... more foo.... even more....
If you do not want the box to be inside the main text just leave
the float-part of the style definition away.

--
(^^\/\/^^)
~~~@@~~~ PGP key available
(..)

Jul 20 '05 #14