www.webdeveloper.com
Results 1 to 3 of 3

Thread: heading background increment with text

Hybrid View

  1. #1
    Join Date
    Nov 2010
    Location
    Los Angeles
    Posts
    11

    heading background increment with text

    hi guys, i have a common situation where i have a:

    <div style="width:600px;">

    inside i have:

    <h1> title </h1>

    this is the heading css:

    h1 {background: #16A2DD url("../images/titlearrow.jpg") bottom right no-repeat; height:30px;}

    What happens is that the background of the heading goes all the way to the end of the div (600px) instead of being proportional to the title text.

    I could give the width to the heading but that would be a problem when my client will change the title to something else.... longer or shorter.

    I'm looking for a solution on how to have a background color incrementing with the text changes.

    Thanks in advance...

  2. #2
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    Since <h1> is a block element, it will take up 100&#37; of the available width. In this case, it's 600 pixels since its parent limits it to that width. You could manually code the width but then you would have to change it every time as you said.

    Two options you have are:
    1. Give it display: inline. If you do this you won't be able to give it a height anymore though. It will behave like <a> or <span>. I don't think you want this.
    2. Give it display: inline-block. This gives you the best of both worlds. It will take up only as much width as the text is, and you can still give it a height, width, and other styling you could only apply to block elements. You might still need a line break after it though, because it is not taking up all the available width. This is your best option, although this will not work in IE6 or IE7, which accept inline-block only on naturally inline elements like anchor, image, and span.

  3. #3
    Join Date
    Nov 2010
    Location
    Los Angeles
    Posts
    11

    Thumbs up [solved]

    Big O(1), thanks for the help, i had to use the "display: inline-block" and then add an extra <span style="display:block;"> for the next line of text.

    I don't care much about IE6 or IE7 anymore so it worked out perfectly! thanks again

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles