Hi guys,

I'm trying to modify the Scroller template with some logo's and backgrounds. I would like the normal "Scroller" logo to overlap the main container. But somehow I can not manage to get this to work the way I want to. I have set several z-indexes, positions, etc.

Does anybody have another tip how I can let the logo overlap my main textbox/container?

http://tinyurl.com/yt3932

Thanks in advance!

For z-index to work the div has to be set to position:absolute ... at the moment its relative so that will probably fix it.

Thanks Anthony.

Thanks Anthony,

what div do you advise to make absolute? Because I tried I think all of them, but it breaks up the background images (the default for Scroller and the one I put inbetween).

Thanks

Hi Arnoud,

I just did a quick little test on the demo and I found that I had to create a new div to get it to work properly.

So you need to follow these steps:

1. Remove the background image logo.png from the #container div.
2. Create a new div class like this:

Code:

.test_logo {position: absolute;top: 80px;height: 200px;width: 700px;background: url(../images/logo.png) no-repeat right top;left: auto;z-index: 200;}

and then add the following to the index file inside the outer container. 3. <div class="test_logo"></div> The width, top, height all depend on the size of your logo. You may need to tweak the css above to get a better fit for your site but that should basically deliver what you have asked for. I didnt test it in ie 6 or 7 but it should be ok ... although ie6 may need afew hacks to get it to work properly. Cheers Anthony.