Different h2 backgrounds

HTML & CSS
1

I’ve got pageh2

#page h2 {
	font-size:15px;
	line-height:25px;
	font-family: Arial,Helvetica,Verdana,Sans-Serif;
	color:#f5f5f5;
	padding-left: 5px;
	
}

And then in my html I have some titles with h2 tags, I have three for three columns, and I need each to have a different colored 100% width background like not that it ends as soon as the text ends but rather when the container ends.
Should I just do h3, h4 for the other two columns? At the moment I have them on span tags like,

#page h2 .span-left {
	background: #2B9435 none repeat scroll 0 0;
	width:221px;
}
#page h2 .span-center {
	background: #efa71d none repeat scroll 0 0;
	width:354px;
}
#page h2 .span-right {
	background: #d11a1a none repeat scroll 0 0;
	width:225px;
}

But its ignoring the width I set and only highlights the text.

2

spans are inline elements and thus ignore with you set in the css. Add display: block to the spans, and they will use 100% with.

Also, why don’t you just give the h2’s css classes? I don’t really see the point of introducing extra spans …

3

Worked great thank you!
They are classes, “#page h2 .span-center {”

4

Yes they are classes, but they are classes on spans. Why not put them on the h2’s ?

So instead of


<h2><span class="span-center">My Text</span></h2>

use


<h2 class="span-center">My Text</span>

???

5

I tried that but it just shows no background.

6

Did you change the css to match the new path ?


#page h2.span-center span{}
7

Yes I have

#page h2 .span-center span{
	background: #efa71d none repeat scroll 0 0;
	width:100%;
	display: block;
	margin-left: -5px;
	padding-left: 4px;
}
8

Hi, if you have a space between h2 and .span-center it implys that your HTML has a <h2> with a child inside of with a class of .span-center

Remove the space there between h2 and .span-center

9

It’s

#page h2.span-center span{
	background: #efa71d none repeat scroll 0 0;
	width:100%;
	display: block;
	margin-left: -5px;
	padding-left: 4px;
}

Now, and it’s blank, this is the HTML

<h2><span class="span-center">My Text</span></h2>
10

Ah but Paul told you to update the HTML to this. Which I’m assuming you didn’t do even though Paul already told you.

<h2 class="span-center">My Text</span>

Also, I don’t know why you are using such a complicated background value. You use the word “none” which could be interpreted as background:none ;).

#page h2.span-center span{
	[B]background: #efa71d;[/B]
	width:100&#37;;
	display: block;
	margin-left: -5px;
	padding-left: 4px;
}
11

Sorry about that, I removed paul’s html code after i saw it didn’t work. anyway, I changed it but now it made the entire object white.

12

Can you post a link? Kinda hard to shoot in the dark. All we have to go off of is that little CSS snippet there and the HTML which matches it.

13

That’s perfect thank you!

14

Hell, let’s lose the name “span” in the class name if we’re killing the bloaty span anyway…

<h2 class=“center”>My Text</h2>

#page h2.center {
background: #efa71d;
margin-left: -5px;
padding-left: 4px;
}

h2’s are already blocks and already 100% wide by default, so we should feel safe removing all redundant statements.


#page h2 {
	font: 15px/25px Arial,Helvetica,Verdana,Sans-Serif;
	color:#f5f5f5;
	padding-left: 5px;
}

#page h2.left {
	background-color: #2B9435;
	width:221px;
}
#page h2.center {
	background-color: #efa71d;
	width:354px;
}
#page h2.right {
	background-color: #d11a1a;
	width:225px;
}