/    Sign up×
Community /Pin to ProfileBookmark

heading background increment with text

Copy linkTweet thisAlerts:
May 11.2011

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…

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@Big_O_1_May 11.2011 — 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.
Copy linkTweet thisAlerts:
@magalhauthorMay 11.2011 — 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
×

Success!

Help @magalh spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...