SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Heading background as wide as content instead of container?

    i was wanting the background of a heading element to be a different color, but to only go behind the actual text of the heading rather than all across the containing div.. is there some way to acheive that simply in css? any width properties I try and set go the whole way unless I set an absolute width on it...

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I assume heading element=<h1> (or 2-3-4-5-6).

    You could make the width shrink to fit, by display:inline/display:inline-block/float/AP

    display:inline might work the best depending on your structure (some stuff might appear next to the heading now depending if it's an inline element)

    Alternatively give the heading a float:left;clear:left
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot! display:inline does do it pretty well. now what would be the simplest standards compliant way of adding the effect of margin-bottom. would it be just to put the header inside a p or a div?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Well you could make that header element display:inline-block, although it wouldneed this (I assume you are using an <h1> below, though adjust to fit yours, aka add a class/ID or whatever also )
    Code:
    * html h1{display:inline;}/*IE6*/
    *+html h1{display:inline;}/*IE7*/
    h1{
    display:-moz-inline-box;/*FF2*/
    display:inline-block;/*Now IE can use inline-block*/
    }
    The IE6/7 hacvks wouldn't be needed had you used an inline element to begin with (headers are block to begin with)

    I hope I make sense lol
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup i read you! thanks a lot


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
  •