GIving an <h2> tag a background

[madmatt69]

Hi everyone,

Relatively simple question, though I can't seem to get the answer myself.

I want my <H2> tags to have a fixed width background of 115px, and a colour of grey (#ccc).

How can I get it to do this, without having to make a seperate class and then call <h2 class="background">?

Any suggestions would be appreciated!

[your_store]

Put the following in your style sheet..

h2 {
width: 115px;
background-color: #ccc;
}

You can define custom styles for almost any html element using the same method.

[madmatt69]

Hi there,

Sorry, I should have mentioned - THat's already what I have. THe problem is that it doesn't recognize the "width" - it just shades grey the background to the length of the text.

For example <h2>Webmasterworld</h2> the grey background will stretch the width of that word, but not the specified 115px.

Is there a way to get it to do that?

[benihana]

sorry of this is a daft question, but is 115px wide enough to contain the complete <h2>?,

115 is not very much and if the letters are to long, the bg will stetch to fit.

if you are wanting the h2 to kind of stick out over the end of the grey, you could use a grey gif with a height of 1px and width of 115px, and tile it vertically.

hope this makes sense..

[madmatt69]

The width doesn't really matter - I just plugged that number in for the sake of it. You can make it 500 for a test, I just need to see if it can be done.

[pageoneresults]

I'm just guessing based on experience, but I think you need to add display:inline to make it all work in harmony. I could be wrong!

h2 { 
width: 115px; 
background-color: #ccc;
display: inline;
}

[Reflection]

The code in the second post is what you want and the reason that it isnt working is most likely because somewhere the h2 IS declared as display:inline;

Try this simple test...

h2 {width:200px; background-color:#CCC;}
h3 {width:200px; background-color:#036; display:inline;}

<h2>Blah blah</h2>
<h3>Blah blah</h3>

[madmatt69]

Perfect - it was the display:inline! Thanks everyone, much appreciated.

[pageoneresults]

Perfect - it was the display:inline!

You added it? Or, you found an instance where the <h2> had a display:inline?

[madmatt69]

I found an instance where it had the display:inline, and removed it.