SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Location
    Toronto
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Heading Backgrounds

    Hey everyone,
    I'm trying to enclose the <h1> in a rounded box so the box will stretch depending on the length of the heading and not across the whole width of the page.

    It should look something like that
    Should I be using two end images and background?
    Is there a simple way to do this?

    Appreciate your help

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Should I be using two end images and background?
    In reality you would need to use multiple images to achieve this if you want to cater for the fact that the text could resize vertically and horizontally.

    In the simplest form you would need an image for each of the four corners (4) and images for the top and bottom (2) and possibly an image for the repeated background.

    You would also need to make the corner images much bigger so that more could be revealed or just have 4 small corners and let the sides be straight when they extend vertically.

    You could simply have two image for the left and right but as soon as the text was resized then it would pop out of the button.

    The heading would need to be floated so that the background shrinkwraps the content and doesn't extend full width.

    Have a look at these rounded corner examples as they will show the techniques that you can use depending on which way you go with this

    http://css-discuss.incutio.com/?page=RoundedCorners
    http://css-discuss.incutio.com/?page=DropShadows

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Location
    Toronto
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! I totally forgot about floating. And I guess there's no difference between divs and headings when it comes to rounding the corners. Thanks for the links

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I actually did something like this once... I called it "Sliding Headers" in honor of the Sliding Doors technique advocated by A List Apart.

    Yup, sure did. Here's the link to the post that shows how to do it:
    http://www.sitepoint.com/forums/show...74&postcount=3

  5. #5
    SitePoint Member
    Join Date
    Jun 2006
    Location
    Toronto
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dan, this is actually what i had in mind, i just wanted to know the proper way of doing it. I had to remove the width though and float it left.


    The only issue I have now is after I floated it left and did clear: both the <p> text slill sticks to the right edge of the first heading.

  6. #6
    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,

    Which element are you placing the 'clear: both' code on?
    It needs to be on the paragraph and not the heading


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
  •