Question: Technique for Creating Titles for Divs like on Sitepoint

[craichead]

Hey kids,

Have been practicing my rounded corner div skills... That and my nun chuck skills. Would like to add titles to my divs kinda like the divs on the homepage here at sitepoint.com

For example...

------------------ Title ---

Know what I mean? Can anyone here point me to a tutorial or help a brutha in need?

Cheers,

Craichead

[markbrown4]

Hi,

On the Sitepoint homepage the 'titles' are just headings with a background color that overlaps the border of the div. They also have a background image for the little round end to the right of the headings.
You can drag an element outside it's normal position by using a negative margin.
Something like this should work.

* { margin: 0; padding: 0; }
.coolTitle { border: 1px solid #000 }
.coolTitle h2 {
  float: right;
  margin-right: 10px;
  margin-top: -.5em;
  background: #FFF;
}

<div class="coolTitle">
  <h2>Title thingo</h2>
  <p>Content</p>
</div>

[craichead]

Thanks Mark... I was thinking that was the logical way to do things but for some reason I was wrapping my h3 tag in div which was muckin' things up. I played with a bit of your code and have it working with my rounded div-ness The rounded div technique that I just tried (and liked) was this:

http://home.tiscali.nl/developerscor...uidcorners.htm

Good schtuff

Best,

Craichead