I want to put a border around the top, right, and bottom of the first H1 =
tag
on a page, and have the border offset by some distance.

Here's what I'm doing right now, and it doesn't work:

In the HTML:
<div id=3D"headerBoxTraining"><h1>Header 1</h1></div>

In the CSS:
#headerBoxTraining {
border-top: 2px solid #cccccc;
border-bottom: 2px solid #cccccc;
border-right: 2px solid #cccccc;
padding: 10px 5px 10px 0px;
margin-top: 10px;
}

#headerBoxTraining H1 {
margin-top: 0px;  /* because my normal H1 tag has a top margin */
}


What I get with this is a box that extends the width of the container in
which the H1 tags appear.=20


------------------------------------
                                    |
 Header text                        |
                                    |
------------------------------------

And what I want is this:

-------------
             |
 Header text |
             |
-------------

Any suggestions?

• Web Designer Courses
• Off the Shelf Training Courses

HWG hwg-style mailing list archives, maintained by Webmasters @ IWA