Results 1 to 3 of 3

Thread: is the z-index being used wrong

  1. #1
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    612
    Thanks
    46
    Thanked 32 Times in 32 Posts

    Default is the z-index being used wrong

    I thought that it would be what I needed to put the date time on top of the images but it appears to be behind the image as it is briefly seen as the page loads.

    Am I using the right thing to do this(but not correctly using it) or am I more confused then I think I am...lol

    http://www.web-user.info/clock/test/111.html

    I need to get it all working then adjust the locations,colors and/or opacity for the image description and time/date
    Thanks,

    Bud

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The answer is yes and no. Yes you probably do need z-index or at least an awareness of it to get the clock to show over the slideshow. No that's not the main problem.

    The main problem is that the slideshow empties out or overwrites the HTML code within its target division (red). So the highlighted is removed from the document:

    Code:
    <div id="mybgcarousel" class="bgcarousel">
    <div id="time">
    <span id="clock"></span>
    </div>
    </div>
    What I would do is simply place it outside of the bgcarousel div:

    Code:
    <div id="mybgcarousel" class="bgcarousel">
    </div>
    <div id="time">
    <span id="clock"></span>
    </div>
    Now it becomes a matter of positioning and z-index (something like):

    Code:
    #time{position: absolute; right: 10%; bottom: 10%; width:390px; background: lightgreen; padding: 5px; z-index: 50;}
    And, looking at the element inspector, it looks like the carousel has no z-index. So you can probably skip it in the style for the time div. Simply coming after the carousel and being positioned should be enough for it to cover the carousel.

    I haven't tested any of this though, so there could also be other problems/considerations. I used % in the right/bottom cords because the carousel can at least in theory adapt to the size of the window. And I used right/bottom instead of left/top because those (right/bottom) appear to be the edges you want to conform to.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ajfmrf (07-19-2012)

  4. #3
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    612
    Thanks
    46
    Thanked 32 Times in 32 Posts

    Default

    Wow,it never ceases to amaze me when John, as well as a few others to numerous to mention here,swoop in here to easily answer so many questions.

    I am not the best at coding but I can learn from experience.

    I really enjoy coming here many times a day to see how many things I might help with.So far not too much but I am always confident I will get hep if I am stuck.

    Thanks John
    btw-it worked quite well John
    Last edited by ajfmrf; 07-19-2012 at 03:39 AM. Reason: forgot
    Thanks,

    Bud

Bookmarks

Posting Permissions

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