...

View Full Version : Z-index, Overlapping problems



RealDeal599
12-01-2009, 06:07 AM
I am trying to overlap two elements...I have created a png (transparent background) and want it to slightly overlap a java slideshow. At first, I floated the png to the left and the slideshow to the right by could not get them to overlap as they kept bumping each other out of the way.

Then I made the png a background image in a div and then floated the slideshow to the right. Worked good except that I cannot get the png background image to overlap the slideshow using the z-index (for obvious reasons). Not sure how to proceed on this and it is driving me crazy! The png file has a curvy fade out on the right that should overlap the photo slideshow. I was going to just put the curvy fadeout on the images but I do not want the curve to fadeout when the image switches...would look kind of goofy.

Thanks in advance!

A demo is at: http://www.wheatlandcomputerservices.com/demos/blues/

Here is the relevant code:

CSS:

body {
font-family: arial, verdana, helvetica, sans-serif;
color: #000;
background-color: #fff;
font-size: 85%;}

#content {
width: 800px;
margin: 50px auto 0 auto;
text-align: left;
background-color: #000;
line-height: 1.5em;}

#fadeshow {
float: right;}

#header {
background-image: url(../img/header_blur.png);
background-repeat: no-repeat;
height: 225px;
position: relative;
z-index: 1000;}

HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="js/fadeslideshow.js"></script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow", //ID of blank DIV on page to house Slideshow
dimensions: [479, 225], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["img/slide/blues_a.jpg"],
["img/slide/blues_b.jpg"],
["img/slide/blues_c.jpg",] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
</head>


<body>
<!-- Container -->
<div id="content">
<!-- Header -->
<div id="header">
<div id="fadeshow"></div>
</div>
</div>
</body>

SB65
12-01-2009, 09:28 AM
I'd suggest using absolute positioning - because you really want your logo to be an img on the page not a background image.

So, assuming your html is something like:



<div id="content">
<div id="header">
<img id="logo" src="img/header_blur.jpg">
<div id="fadeshow"> etc


then your css needs to include additionally:



#header{position:relative;background-color:white}
#logo{position:absolute;left:100px;z-index:9999}


Adjust the left positioning as required. That should put the image on top of the slideshow.

RealDeal599
12-01-2009, 03:17 PM
Thank you for your help with this. I tried what you suggested and essentially got the same thing. I tried something else as well (see below)...and the same thing. I cannot get that logo to come on top of the slideshow.

Thanks again for anyones help with this...!

CSS:


#header {
background-color: #fff;}

#logo {
float: left;
position: relative;
z-index: 999;}

#fadeshow {
position: absolute;
top: 0;
right: 0;}

HTML:
<!-- Header -->
<div id="header">
<img id="logo" src="img/header_blur.png" alt="Logo" />
<div id="fadeshow"></div>
</div>

Excavator
12-01-2009, 03:57 PM
Hello RealDeal599,
Try making these changes to get things started -

#content {
width: 800px;
margin: 50px auto 0 auto;
text-align: left;
background-color: #000;
line-height: 1.5em;
height: 400px; /*just for testing*/
}
#header {
background-color: #fff;
position: relative;
}
#logo {
position: absolute;
top:0;
left:0;
}
#fadeshow {
position: absolute;
top: 0;
left: 320px;
}


To move that image over, you can just adjust the left pixel setting ... you will need to change wmode (http://www.communitymx.com/content/article.cfm?cid=e5141)to get the img on top of the flash then

RealDeal599
12-01-2009, 04:10 PM
Excavator - OK...made all of the changes and get the same visual results.

I opened the js file and searched for wmode...no such luck.

Cannot get the logo to overlay the slideshow.

Thanks again!

SB65
12-01-2009, 06:14 PM
Set the z-index for #logo to 9999 (four nines) - you have z-index set to 1000 on .gallerylayer - and I think you're there (as per my original post). Works in Firebug.
I don't see any flash, looks like an javascript image rotator.

Excavator
12-01-2009, 06:50 PM
SB65 is right... it's not flash. I did not even look at it - oops!
So, no need for the huge z-index number. This seems to work -
#header {
background-color: #fff;
position: relative;}

#logo {
position: absolute;
top: 0;
left: 100px;
z-index:2;}

#fadeshow {
position: absolute;
top: 0;
left: 320px;
z-index:1;}

RealDeal599
12-01-2009, 10:05 PM
Thank you very much! I set the z-index to 9999 and works great!

kilcbhad
12-02-2009, 03:34 AM
Here is, in my opinion, the most interesting part:
CSS Code:

//If first time key in date run statement
if(first == 0){
++first;//Track if is the first record key in
items[i] = new Item(itemNumber, itemDesc, sellPrice, quantity);
}
//Else continue key in record
else{
entries = items[0].getEntries();//Get number of entries entered
for(j=0; j<entries; ++j){

duplicate = items[j].equals(itemNumber, itemDesc, sellPrice, quantity);//Check for duplication of entries

if(duplicate == true) {
Print.duplicateError();
--i;
--looping;
break;
}
}
if(duplicate == false)//else save record
items[entries] = new Item(itemNumber, itemDesc, sellPrice, quantity);
}
________________________
Courtier conseil financement immobilier achat | (http://**************************/)Demande credit simulation plan de financement immobilier | (http://**************************/)Calcul pret projet financement immobilier travaux (http://**************************/)

cancunphotograp
12-07-2009, 10:25 PM
Here is, in my opinion, the most interesting part:
CSS Code:

//If first time key in date run statement
if(first == 0){
++first;//Track if is the first record key in
items[i] = new Item(itemNumber, itemDesc, sellPrice, quantity);
}
//Else continue key in record
else{
entries = items[0].getEntries();//Get number of entries entered
for(j=0; j<entries; ++j){

duplicate = items[j].equals(itemNumber, itemDesc, sellPrice, quantity);//Check for duplication of entries

if(duplicate == true) {
Print.duplicateError();
--i;
--looping;
break;
}
}
if(duplicate == false)//else save record
items[entries] = new Item(itemNumber, itemDesc, sellPrice, quantity);
}
________________________
Courtier conseil financement immobilier achat | (http://**************************/)Demande credit simulation plan de financement immobilier | (http://**************************/)Calcul pret projet financement immobilier travaux (http://**************************/)

Thank you very much for clarification.
I bookmarked these info and will be back soon for further discussion. THanks again for sharing!
________________________
cancun photographer (http://www.cancun-photographer.com/) |cancun photography (http://www.cancun-photographer.com/) |cancun photographers (http://www.cancun-photographer.com/)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum