SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question: Technique for Creating Titles for Divs like on Sitepoint

    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

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    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.
    Code:
    * { margin: 0; padding: 0; }
    .coolTitle { border: 1px solid #000 }
    .coolTitle h2 {
      float: right;
      margin-right: 10px;
      margin-top: -.5em;
      background: #FFF;
    }
    Code:
    <div class="coolTitle">
      <h2>Title thingo</h2>
      <p>Content</p>
    </div>

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks Mark - You're a Star

    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •