Thread: Embedded Titles

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0

    Embedded Titles


    years ago, I made tables where the borders had the title embedded into them.

    It's not letting me do links but hopefully this will work to show what I mean.

    http://itgranny DOT com/embeddedTitle.jpg

    (Remove the spaces and the DOT)



    For the life of me I can't remember how I got them to do that. Can someone help? Thanks!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    710
    Rep Power
    441
    Basically you just need a box with a title and then pull the heading up over the border. You may need to adjust some of the numbers below to fit your situation.

    Code:
    CSS:
    .box {border: 1px solid #000; padding: .5em; margin-top: 3em;}
    .box h1 {background: #fff; margin-top: -.9em; display: table;}
    
    HTML:
    <div class="box">
    	<h1>Title of section</h1>
        <p>This is the text inside...</p>
    </div>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0
    Perfect! I wasn't sure how I did it. Thanks so much! Have a great day!
  6. #4
  7. Lord of the Dance
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2003
    Posts
    3,673
    Rep Power
    1958
    I will recommend to use the fieldset and legend tags for this:
    Code:
    <fieldset>
    	<legend>Title of section</legend>
    	<div>This is the text inside...</div>
    </fieldset>
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    710
    Rep Power
    441
    True, a fieldset and legend do have this look. But from a semantic point of view, fieldset is meant to hold a set of form fields.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Originally Posted by rdoyle720
    True, a fieldset and legend do have this look. But from a semantic point of view, fieldset is meant to hold a set of form fields.
    Yes, don't use an HTML element only because you like its default styles. Use mark up to describe the content and then use CSS to change how it looks.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0
    Thanks all! I appreciate all of your help! You're all great!

IMN logo majestic logo threadwatch logo seochat tools logo