SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I shrink-wrap H1?

    I want to add an SVG background to my H1 elements to act as a wavy underline. The problem is, I want this SVG to stretch to the width of the text within the H1 element. As we know, by default, all headings are block elements so they stretch to 100% width. Is there anyway to make them behave like "inline-block", whilst preventing other inline elements from positioning themselves next to the heading. In other words, is there a way I can shrink-wrap a heading, whilst still ensuring it's the only element on that line?

    I'm going to a have quick play with floats, but I'll admit that floats have never solved any design problem for me. They always seem to introduce other undesirable side-effects so I'm not incredibly optimistic.

    Cheers

  2. #2
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Setting the H1 to "display: table;" seems to satisfy my requirements. I don't particular care about IE6/IE7, so it's an adequate solution.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Lol I just realized I don't know be heart if float left - clear right or both will clear non floated items. Anyways... Try that first. If that doesn't work you can give it a margin right of 100% (again not memorized - wow I'm on it). If that doesn't work then you can give it a fixed dimension margin right. If that doesn't work because fluid width you can put a "br" after it probably.

    Float, inline-block, and position absolute or fixed will shrink wrap.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    consider also :

    h1{ display:inline-block; vertical-align: top; }

    * ie friendly
    * doesn't cause any issues should you decide to use some AP /RP pseudo elements for further styling
    * is otherwise almost as good as float:left; clear:left;

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I've also added markup for it: a span sandbag when I know I want to limit a background to the inline text rather than the block element.


    Adding markup is not as nice as the other suggestions up here, but it is a viable option especially if you also need the block-box of the h1 element too (like full-width background-colors or borders, and then something limited to the text inside).


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
  •