Page 1 of 1
[SOLVED] Image rotator and transparant image in header
Posted: Wed Oct 14, 2009 1:09 pm
by 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?
Re: Image rotator and transparant image in header
Posted: Wed Oct 14, 2009 1:25 pm
by Jos
You can create a separate div which you place on top of the image_rotator images. Try this with css positioning: absolute;
Re: Image rotator and transparant image in header
Posted: Wed Oct 14, 2009 2:56 pm
by 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?
Re: Image rotator and transparant image in header
Posted: Wed Oct 14, 2009 3:15 pm
by 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
Re: Image rotator and transparant image in header
Posted: Wed Oct 14, 2009 7:20 pm
by peterbus
Sorry Rolf,
This doesn't work. have a look if you want:
http://www.doedestreekproef.nl
Re: Image rotator and transparant image in header
Posted: Wed Oct 14, 2009 7:32 pm
by Jos
Is it me or is there indeed no css for #header and/or .logo in your current stylesheet ??
Re: Image rotator and transparant image in header
Posted: Thu Oct 15, 2009 6:42 am
by 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;
}
Re: Image rotator and transparant image in header
Posted: Thu Oct 15, 2009 6:48 am
by Rolf
This is what's in the stylesheet:
But is the stylesheet attached to your html template?
I can't see it either...
Rolf
Re: Image rotator and transparant image in header
Posted: Thu Oct 15, 2009 7:01 am
by 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?
Re: Image rotator and transparant image in header
Posted: Thu Oct 15, 2009 7:09 am
by 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.
Re: Image rotator and transparant image in header
Posted: Thu Oct 15, 2009 7:16 am
by 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.
Re: Image rotator and transparant image in header
Posted: Thu Oct 15, 2009 8:13 am
by 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
Re: Image rotator and transparant image in header
Posted: Thu Oct 15, 2009 10:07 am
by 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!!