By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,203 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

Boxed text

P: n/a
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
Share this Question
Share on Google+
13 Replies


P: n/a
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 vo. O resto imperfeito.
- Renato Russo -
Jul 20 '05 #2

P: n/a
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

P: n/a
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

P: n/a
Els
Mark Tranchant wrote:
http://tranchant.plus.com/tmp/boxedtext


Sounds like a good recipe too :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 20 '05 #5

P: n/a
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 vo. O resto imperfeito.
- Renato Russo -
Jul 20 '05 #6

P: n/a
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

P: n/a
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

P: n/a
"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

P: n/a
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

P: n/a
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

P: n/a
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 vo. O resto imperfeito.
- Renato Russo -
Jul 20 '05 #12

P: n/a
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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.