Different h2 backgrounds.

[theGermz]

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.

[ScallioXTX]

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 ...

[theGermz]

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 ...

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

[ScallioXTX]

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

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>

???

[theGermz]

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>

???

I tried that but it just shows no background.

[Paul O'B]

I tried that but it just shows no background.

Did you change the css to match the new path ?

#page h2.span-center span{}

[theGermz]

Did you change the css to match the new path ?

#page h2.span-center span{}

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;
}

[RyanReese]

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

[theGermz]

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

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>

[RyanReese]

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{
	background: #efa71d;
	width:100%;
	display: block;
	margin-left: -5px;
	padding-left: 4px;
}

[theGermz]

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{
	background: #efa71d;
	width:100%;
	display: block;
	margin-left: -5px;
	padding-left: 4px;
}

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.

[RyanReese]

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.

[Stomme poes]

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;
}

[theGermz]

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;
}

That's perfect thank you!