Making z-index work in a span

HTML & CSS
1

I have a background image that changes periodically(jquery z-index 1), and over that I have a div that I want to put a name, and a menu in. The idea is to have white words, and for the words to have a black background.

Kind of like this page but with black just behind the words, instead of just white.

So far when my div (#page) has a z-index of 2, the background-color shows correctly over the slide show, but since I don’t want a whole block of black, I added a span around the text, and added a bgcolor to that. But when I do that the slideshow covers up the bgcolor, but not the text.

Any ideas how I can keep my backgroud color up front with the text, without having to use a whole div of black?

html:


        <div id="page">
                  <span class="namer"> <h1>Generic </h1></span>
                  <span class="namer"><h1>Generic Last</h1></span>
        </div>

CSS:


#page {
	z-index: 2;
	position: relative;
        width: 270px;
	padding: 7px;
	margin: 30px;
	font-family: Verdana, Geneva, sans-serif;
	color: #FFF;
}

#page .namer {
	background-color: #000;
}

#page .namer h1{
	margin:10px;
	font-size: 12px;
	text-transform: uppercase;
}

Thanks in advance!!!

2

No.

This:

<span class="namer">[COLOR="Red"] <h1>Generic </h1>[/COLOR]</span>

is what you should be concerned of. Because you can’t have h1 inside span, for one. You should have only one h1 per page.

For two: is there a specific reason why you don’t use:

<h2>Generic </h2>

and try to make it work with that? Because:

For three: your markup (and request, when looking at the markup) is illogic. You have the same class for two identical objects in the same parent element.

Your selector is this:

.page h2 {...}

Notice also the . (class) instead of # (id).

For four: a live example or a complete code would help. Maybe you didn’t quite well chose the excerpt? :slight_smile:

3

Hey Noonope,

Thanks for your reply. I did originally have them in h1 tags, but that highlights
the whole div line, that’s why I was trying to use span so that the black fit close to each seperate word. I wasn’t thinking about the h1 not doing in a span :blush: I’ll change them to h2’s and keep tinkering with that in mind…

Thanks again!!!

4

Why not have the background on the <h1> and <h2> ?