css box with header

[afe]

Hello, I've been searching for a css box with header, however, I could not find one that I need. Does anyone have a code for a css box with header. Please and thank you!

[BLiZZaRD]

You mean you want to encase a header with a box made in CSS? I don't understand what you are looking for.

Of course that could be me just being a dork.

[afe]

I did not explain well.. so what I want is sort of like this..
glossary.oilfield.slb.com/Display.cfm?Term=header%20box

Also, are css tables same as HTML tables?

[BLiZZaRD]

Sorry to be dense. There are a lot of boxes on that page. The blue one? The pic of the oil dredge? the side bar menu? Which do you want to emulate?

[afe]

Sorry, where it says "header box" and the left side vertical menu.

[BLiZZaRD]

Ah..okay, that was me being dense. I should learn how to read some day.

All they did was make a table, give the table a background color of #CCCCCC (the gray behind the text there), and gave the text in there a bold and pixel size.

Then in the next <tr> they changed the background color so it overrides the first andmakes it look separate.

If you really want to do it in a table thats fine. However, it would work better and look better using divs and CSS.

If you need more help with either, let me know.

[afe]

Yes, I know how tables are messy and not the choice for web designing. So I would like to know how to do it using divs and CSS please and thank you!

[BLiZZaRD]

okay divs and css it is:

inside your css place this:

#the_box {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 300;
  color: #BBBBDD;
  background-color: #EEEEEE;
  width: 250px;
}

.box_header {
  padding-top: 1em;
  font-weight: 600;
  color: #000000;
  background-color: #CCCCCC;
  text-align: center;
  height: 35px;
}

.box_text {
  text-align: left;
}

and where ever you want your boxes place this on the page:

<div id="the_box">
<div class="box_header">
Header Text
</div>
<div class="box_text">
The description of the item or whatever goes here. Including links and photos etc.
</div>
<div class="box_header">
</div>
</div>

Note that in the css you can change any of those values to fit your needs. In the HTML I added a blank <div class="box_header"> at the end to make it more "box like" in appearance.

You can replace that with borders or nothing, what ever suits your needs.

Any questions just ask.

It will look like this

[afe]

WOW! Thanks Blizzard!

[BLiZZaRD]

Welcome