Overlapping images

How do I make the logo always on top?

[Wlauzon]

OK.. basic setup:

<div1>
logo 300px wide
<div2>
pretty picture 600px wide
</div2>
</div1>

Problem is that the logo always slides under the pretty picture. I could make the picture shorter, but then I end up with a lot of blank space at wider screen sizes.

I am using float:left and float:right for the images, 99% widths.

I have tried playing with z-index, clip, and a few other methods, but cannot come up with something that does not break someplace.

Any suggestions?

[DrDoc]

z-index assumes positioning.
Give both the logo and the "pretty picture" relative positioning. Then z-index will work.

:)

[Wlauzon]

Tried that with both relative and absolute.. so I must have something else wrong in the code (below) - the "trees" always slides over the top of the logo.

#header, #innerheader {height:138px;}
#header {background:#FFFFFF url('Images_CSS/W_400pxl.jpg') no-repeat; margin:auto; position:relative; z-index:2; left:0; top:0}

#innerheader {background-position: right top; background-image: url('Images_CSS/trees.jpg');
background-repeat:no-repeat; background-attachment:scroll; position:relative; top:0; right:0; z-index:-1}

HTML:

<div id="header">
<div id="innerheader">
<p class="naws">Blurb Text Here</p>
</div>
</div>

[Fotiman]

That's because your "trees" are nested WITHIN your other element instead of being sibling. This containment will always cause the inner layer to be on top of the outer layer, I think.

[Wlauzon]

Hmm.. you are right it seems.

I think I "fixed" it for now by just swapping what was inner and what was outer.

But you are saying that instead of having

<div header>
<div logo>
<div trees>
</div trees>
</div logo>
</div header>

Like I do now, I should have this:?

<div header>
<div logo>
</div logo>
<div trees>
</div trees>
</div header>

One thing for sure, the z-index does not work with nested divs.

[Fotiman]

But you are saying that instead of having

<div header>
<div logo>
<div trees>
</div trees>
</div logo>
</div header>

Like I do now, I should have this:?

<div header>
<div logo>
</div logo>
<div trees>
</div trees>
</div header>

Think about it semantically for a minute. Does your "logo" really "contain" "trees"? It doesn't sound like it. Thus, your second example seems more semantically correct to me.

Of course, I don't know the true semantics of what you're trying to accomplish... I can only speculate based on what you've said.

[Wlauzon]

Basically, the header has two images. And not much else but 1 line of text.

One is the company logo. The other is a picture relevant to what we sell.

In order to fill in the header on wider screens, the "trees" is wider than the the logo.

What I want is for the logo to go OVER the top of the "trees" picture when screen width is less than 800 or so, so that the logo does not get covered up.

[Fotiman]

One is the company logo. The other is a picture relevant to what we sell.

In order to fill in the header on wider screens, the "trees" is wider than the the logo.

What I want is for the logo to go OVER the top of the "trees" picture when screen width is less than 800 or so, so that the logo does not get covered up.

It sounds, then, like the "trees" image is not really content, but rather presentational. For example, the picture doesn't convey any message, rather it's just there to "look pretty", correct?

If that's the case, then I would remove it from your header, and instead:

<div id="header">
<div id="logo"></div>
</div>

Then make the trees the background on the header and put your logo in the "logo" div.

That's how I'd do it anyway.

[Wlauzon]

Hmm that sounds too obvious to work :)

Will try that and see what happens.. yes you are right, the "trees" is just decorate space filler.

[Wlauzon]

Well, that does not work either.

You would think that for something so simple to do in HTML that CSS would not be all that difficult, but I have been playing with this off and on for a week, and it is just one glitch after another.

For now I just gave up and put two IMG's in the header, works fine just like it is supposed to.

But I must be missing something obvious when trying to do it with CSS, so going to study up a bit more for now.