Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS image Switcher Strange Issue

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #38537
    JamesMcG
    Member

    Hey. First off I love this site. Its been very helpful these last few weeks. However, I seem to have run into a HUGE Annoyance. If you go to http://www.jamesmcgill.name you will see my site. At the top is a CSS image switcher, however it does not seem to be switching images. I have been working on this for the last two days and the code pretty much matches Chris’ code both on his screen-cast and the code I pulled up from his working example here on the site. Though it matches the later more than the former. If anyone can tell me where I’ve gone wrong, I would be more than happy to…well lets not cross that bridge till we come to it shall we. :P

    Please help, this is annoying.

    #104507
    JamesMcG
    Member
    *{ margin: 0;  padding: 0;}
    a { text-decoration: none; color: black;}

    body{
    background-image:url(../Images/UnderConstruction.png);
    background-position:top;
    background-attachment:fixed;
    background-repeat:repeat-x;
    margin:0;
    padding:0px;
    background-color:#000;
    }

    #wrapper-top {
    width: 1290px;
    position: relative;
    margin: 0 auto;
    }

    .image-link { display: block; width: 1290px; height: 160px; position: absolute; top: 0; left: 0;}

    #home {background: url(../Images/Header.png) no-repeat; z-index: 2;}
    #web {background: url(../Images/HeaderWeb.png) no-repeat; }
    #graphic {background: url(../Images/HeaderGraphic.png) no-repeat;}
    #photography {background: url(../Images/HeaderPhoto.png) no-repeat;}

    #home span {position: absolute; top: 86px; left: 0px;}
    #web span {position: absolute; top: 86px; left: 315px;}
    #graphic span {position: absolute; top: 86px; left: 630px;}
    #photography span {position: absolute; top: 86px; left: 945px;}

    .image-link span { width: 315px; display: block; height: 68px;}
    .image-link:hover span { z-index: 100;}
    #104508
    JamesMcG
    Member




    James McGill's Portfolio












    #104515
    amoss
    Participant

    .image-link:hover span { z-index: 100;}

    Try removing span.

    #104582
    JamesMcG
    Member

    Nope. Didn’t work. Any other ideas?

    #104586
    Paulie_D
    Member

    Have you tried

    .image-link span:hover { z-index: 100;}

    Frankly this cries our for a sprite.

    #104592
    JamesMcG
    Member

    Actually, I figured the problem out. Thank you for the suggestions Amos and Paulie_D, however it had nothing to do with the span:hover, which is exactly what I was dead set on thinking it was. However, if you look up to the line that sets up the height of the .image-link, you will notice it says Height: 160. My banner is 86px high. The rollover was being cover by it. So every time i rolled over something, i was just rolling over home. Not any others. If you go to http://www.JamesMcgill.name You will see it now working. :D :D :D :D

    I can’t stop smiling. :D

    #104598
    amoss
    Participant

    So if you put the span back in on this line it would still work?

    .image-link:hover span { z-index: 100;}

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.