[SOLVED] Image rotator and transparant image in header

[peterbus]

Hello,

This is what I'm trying to realize:

IN the header:

- on the background some rotating images, using image_rotator
- on top of that an image (.png) with a transparent part. The rotating images should show up in the tranparent part. See at: http://www.doedestreekproef.nl

I want to do like this because the custumor wants to change the pictures every now and then.  By separating the transparant and background pictures the custumor only has to place some new pictures in the image_rotator folder without having to use photoshop or whatever (complicated) software.

I have been fidling arround with div style = background-image and so but I don't seem to get the two pictures on top of each other.

Who can help?

[Jos]

You can create a separate div which you place on top of the image_rotator images. Try this with css positioning: absolute;

[peterbus]

Hi Jos,

This is what I have:

IN template:


      {image_rotator folder='uploads/images/testheader/' speed_fade='6' speed='20'  width='950' height='250'}
     


in stylesheet:

div#header {
  height: 250px;    /* adjust according your image size */
  z-index: 1;
    position: absolute;

}

div#trans{
    z-index: 2;
height: 250px;
    position: absolute;
}

I tried several other versions and options but the only thing I realize is the images beneath or underneath each other. Do I forget something here?

[Rolf]

Hi Peterbus,

I copied some code from one of my own sites, you probably have to change it a little bit to your needs:

Code: Select all

<div id="header">
{image_rotator folder="uploads/images/testheader/" rotator="new" speed_fade='6' speed='20'  width='950' height='250'}
<img src="images/layout/header-nieuw.png" class="logo" alt="" title="" />
</div>

Code: Select all

.logo {
position: absolute; /*Puts logo over the image_rotator */
margin: 0;
z-index: 10;
}

Grtz. Rolf

[peterbus]

Sorry Rolf,

This doesn't work. have a look if you want: http://www.doedestreekproef.nl

[Jos]

Is it me or is there indeed no css for #header and/or .logo in your current stylesheet ??

[peterbus]

Hi Jos,

This is what's in the stylesheet:

div#header{
height: 250px;
width: 950px;
z-index: 1;
}

.logo {
position: absolute; /*Puts logo over the image_rotator */
margin: 0;
z-index: 10;
}

[Rolf]

This is what's in the stylesheet:

But is the stylesheet attached to your html template?
I can't see it either...

Rolf

[peterbus]

If I check the stylesheets that are "connected" to my template this list show's up:

Sjabloon :  2 kolommen

Titel 
Accessibility and cross-browser tools 
Navigation: Simple - Vertical 
Print 
Module: News 
sp: 2 kolommen


In the sp:2 kolommen I find these lines:

div#header{
height: 250px;
width: 950px;
z-index: 1;
}

.logo {
position: absolute; /*Puts logo over the image_rotator */
margin: 0;
z-index: 10;
}


Should do the job, toch?

[peterbus]

I put the lines:

div#header{
height: 250px;
width: 950px;
z-index: 1;
}

.logo {
position: absolute; /*Puts logo over the image_rotator */
margin: 0;
z-index: 10;
}


into a new stylesheet and connected it to the template. Something happened but still not working correctly.
I think there might be something wrong with the original sp: 2 kolommen stylesheet. I'm going to disconenct it en connect it again to the template.

[peterbus]

Find out that in the stylesheet there was a "/" missing in the line /*** header ***/ 

At least now the css lines are connected to the template.

The rotator works fine, but the png pic is still somewhere on the background.

[Rolf]

Just something I would change, don't know if it's related to the problem

CSS Validating doesn't like this:

Code: Select all

/*div#sidebar-right {

/*   width: 16%;     /* sidebar width, if you change this please also change #main margins */

/*display: inline;   /* FIX IE double margin bug */

/*margin-right: 0;*/

/*background: #11458d;*/

/*float: right;*/

/*overflow: auto;*/

/*word-wrap: break-word;*/

}*/

You better delete it...

Code: Select all

/* center wrapper, min max width */

div#pagewrapper {

   margin: 0 auto;       /* this centers wrapper */

   max-width: 950px;   /* IE wont understand these, so we will use javascript magick */

   min-width: 60em;

   background-color: #fff; 

   color: black;

   border: 1px solid #11458D;

}

Change    min-width: 60em; also to 950px;

I noticed that there are two javascripts around the Image_rotator???
On my site they are not...

It looks like you are missing a or something...

For now, I have to go 

®olf

[peterbus]

Thank you guys for all the help.

Finally, after trying all kind of options I found this:


.logo{
position: relative; /*Puts logo over the image_rotator */
z-index: 10;
height: 250px;
width: 950px;
top:-250px;
}


Problem was that with position: absolute the pgn image was placed to the right. Correcting that with left: ...px  gave different outcomes in different browsers.
So I tried position: relative with an negative top: -250  and everything seems ok (ie 7, ie 8 and firefox)

Thanks again for helping me to find an solution!!