Position Relative: How to Make Title Boxes in CSS

[cssjoe]

Hi,

Is it possible to put a delineated title on a BOX?
Something like:

 +--¦ title ¦-------+ 
 ¦     ¦ 
 ¦     ¦ 
 +------------------+ 
 

Thanks!

P.S. I wrapped the above in [pre] and [fixed] but it doesn't seem to be coming out right... the middle lines should be flush against the right side of the "box".

[TGecho]

Try this:

In your style sheet:

.box {
border : 1px solid black;
padding : 10px;
}
.title {
position : relative;
top : 10px;
left : 25px;
border-left : 1px solid black;
border-right : 1px solid black;
background-color : white;
padding : 0 5px;
}

In your body:

<span class="title">Title</span>
<div class="box">
This is content text. There is nothing here. If you want something here, then put something here.
</div>

Note that this will create some "dead space" above the div equal to the height of the title.

[cssjoe]

Perfect! Thanks so much.

joe

[Nick_W]

Yes, I must say TGecho that that is really, really NICE!

Very elegant solution. I've only tested it on Opera, has anyone got the low down on how IE handles it, and what happens with adjusting the text in that monstrous browser?

Nick

[papabaer]

You can float headers within the box, apply borders to paragraphs/blockquotes/nested divs and adjust your header float using margins to achieve a similar effect while retaining document structure. It depends on if the title is a true title..

TGecho's method could be used with headers as well. Nice!

[pageoneresults]

I may be missing something here but, what does the title box do?

[Nick_W]

Nothing, neccessarily. It's just NICE! ;)

I can envision using it for product 'boxes' on a site or a number of other uses...

Nick

[TGecho]

Whoops. Version 1.1 is out now :)

I just thought of something. If you put have inline content (i.e. plain text) directly before the title/box combination, afect the title's position.

Solution: Change the span to a div.

Boy, think something's done and you end up having to fix it.

[TGecho]

Whoops again (v 1.2)

That messes it up. Okay, either:
1) Enclose the entire thing with another div
2) Make sure whatever is directly in front of it is block level (i.e. div or p)
3) Give the title a set width (i.e. 100px)

Nothing's as simple as it seems.

[snair]

I don't take credit for this as I got it from someone else, but it's really neat so I thought I would share it:

In your style sheet:

.box
{
margin: 30px 5px 15px 10px;
border: #3c5a86 1px dashed;
padding:5px;
font-size: 12px;
font-weight: normal;
color: #000000;
background-color: #d1e0ef;
}

.box H1
{
margin : 0px 0px -12px 5px;
position: relative;
top : -12px;
border: #3c5a86 1px solid;
padding-top : 3px;
padding-bottom: 3px;
padding-left : 5px;
padding-right : 5px;
font-size : 18px;
font-weight: bold;
color : #000000;
display: inline;
background-color: #99bbdd;
}

and for the body

<div class=box>
<h1>This is the Title</h1>
<p>This is the text</p>
</div>

[TGecho]

I thought it was strange no one had ever done that before.

[Paul_o_b]

Hi,

You can achieve the same effect by floating the title and using a negative margin to pull it out if the div. This has the benefit of not preserving the space that using position relative does.

e.g.(in the h1 style)
float:left;
margin-top : -12px;

instead of:
position:relative;
top: -12px

Similar result but less gap between title and text :)

Paul