Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Z-index, Overlapping problems

    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:
    Code:
    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>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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:

    Code:
    <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:

    Code:
    #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.

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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:
    Code:
    #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>

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello RealDeal599,
    Try making these changes to get things started -
    Code:
    #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 to get the img on top of the flash then
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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!

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.
    Last edited by SB65; 12-01-2009 at 06:19 PM.

  • Users who have thanked SB65 for this post:

    RealDeal599 (12-01-2009)

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    #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;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    RealDeal599 (12-01-2009)

  • #8
    New Coder
    Join Date
    Jan 2007
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thank you very much! I set the z-index to 9999 and works great!

  • #9
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 | Demande credit simulation plan de financement immobilier | Calcul pret projet financement immobilier travaux

  • #10
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by kilcbhad View Post
    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 | Demande credit simulation plan de financement immobilier | Calcul pret projet financement immobilier travaux
    Thank you very much for clarification.
    I bookmarked these info and will be back soon for further discussion. THanks again for sharing!
    ________________________
    cancun photographer |cancun photography |cancun photographers


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •