Results 1 to 3 of 3

Thread: Layer Help

  1. #1
    Join Date
    Aug 2007
    Location
    Oakham England
    Posts
    499

    Layer Help

    Hey,

    I have the following code:

    HTML Code:
    <div class="row fixed" style="z-index:-1;">
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(main_large, 940, 400, 0, 5000, 0) 
    </script>
    </div>
    
    <div class="row fixed" style="z-index:1;"><img src="images/drp.png" width="253" height="75" border="0" />
    </div>

    I am trying to get the image to layer over the slideshow, I can make it layer but I cant make it in a fixed position so when you resize the window the image staying in the correct place on the image...

    Hope you understand what I am trying to do....

    Dan
    Streama - Your WordPress Friend
    http://www.streama.co.uk

  2. #2
    Join Date
    Mar 2007
    Location
    UK
    Posts
    89
    Assuming that your javascript doesn't wipe out everything inside of its container div, you could scrap the second div and put the overlay image inside of the first one. This would allow you to use absolute positioning relative to the first div and keep eveything aligned without much hassle.

    eg
    HTML Code:
    <div class="row fixed player">
    <script type="text/javascript">
    new fadeshow(main_large, 940, 400, 0, 5000, 0) 
    </script>
    <img class="overlay" src="images/drp.png" width="253" height="75" border="0" />
    </div>
    With the corresponding CSS being something along the lines of:
    Code:
    .player {
      position: relative;
      z-index: 0;
    }
    
    .overlay {
      position: absolute;
      top: ...
      left: ...
      z-index: 1;
    }


    Alternatively, have you considered putting a wrapper div around both of your divs, and absolutely positioning them both relative to the wrapper div?

    eg
    HTML Code:
    <div class="wrapper">
    <div class="row fixed player">
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(main_large, 940, 400, 0, 5000, 0) 
    </script>
    </div>
    
    <div class="row fixed overlay"><img src="images/drp.png" width="253" height="75" border="0" />
    </div>
    </div>
    With the corresponding CSS being something along the lines of:
    Code:
    .wrapper {
      position: relative;
      width: ...
      height: ...
      z-index: 0;
    }
    
    .player {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }
    
    .overlay {
      position: absolute;
      top: ...
      left: ...
      z-index: 1;
    }
    This will cause the overlay div to always stay in the same position relative to the player div.

    I realise that this is introducing additional markup, but it is impossible to know why your page isn't behaving without seeing the rest of your HTML + CSS.


    Cheers,

    Simon

  3. #3
    Join Date
    Aug 2007
    Location
    Oakham England
    Posts
    499
    Simon, Thanks so much your second suggestion works a treat... Thanks Dan
    Streama - Your WordPress Friend
    http://www.streama.co.uk

Similar Threads

  1. Replies: 0
    Last Post: 02-26-2011, 05:37 PM
  2. Shared Layer, Where are they now?
    By Mister Bob in forum Providers and Network Outages and Updates
    Replies: 5
    Last Post: 01-29-2010, 05:55 AM
  3. Switch - Layer 2 or Layer 3 / Managed or Unmanaged
    By marsupillami in forum Colocation and Data Centers
    Replies: 15
    Last Post: 04-23-2006, 11:57 PM
  4. Do we need a layer???
    By numaria in forum Web Hosting
    Replies: 15
    Last Post: 11-18-2005, 07:10 AM
  5. Layer 7
    By apollo in forum Dedicated Server
    Replies: 0
    Last Post: 03-20-2003, 04:28 PM

Posting Permissions

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