SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
-
Sep 1, 2007, 19:57 #1
- 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
-
Sep 1, 2007, 20:25 #2
- 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>
-
Sep 1, 2007, 21:29 #3
- 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