|HTML & CSS
Tips and Tricks
TEXT BOXES — AT YOUR COMMAND
You might have noticed that many of my pages feature a cutesy little quote near the top, horizontally centered and with a border, such as the one on the Computer Menu:
“There are 10 types of people
in the world — those who
understand binary, and those who don't.”
The box features a blue
double-border, with the author's name
italicized and reduced in size. A line-break is positioned
so as to make the result look best. Of course, a single border
might be preferred:
“Any idiot can put up a website.”
Sometimes, however, it is desirable just to enclose some ordinary text, perhaps for informational or instructional purposes:
The default textbox
utilizes the current font and
its color. These specs can easily be adjusted.
Each box is defined as an
inline-block in CSS,
because that is how to confine it to the size of the text.
Each must be wrapped in an outer container as well, because
that's how to horizontally center an inline-block.
It is convenient to have the structure for these boxes
pre-defined, so that implementing one becomes a simple
copy-and-paste process. The following classes
(housed in ALL.CSS, of course) provide for three box
types, a choice of blue or black text, and a selection
of background colors:
Utilizing those classes, the three boxes are easily coded as follows:
Because the <div> centers everything as
it is configured, the text in
Box #3 also would be
centered. The inclusion of two additional classes
left-aligns the text and reduces its size as well.
Although there are other ways to accomplish the desired effects, this method is pretty easy to use. Define your own specifications, and enjoy!